laytec-ag / plotly.blazor Goto Github PK
View Code? Open in Web Editor NEWThis library packages the well-known charting library plotly.js into a razor component that can be used in a Blazor project.
License: MIT License
This library packages the well-known charting library plotly.js into a razor component that can be used in a Blazor project.
License: MIT License
I am trying to use Plotly to plot a graph in time domain (DateTime as X axis data elements). I get an error:
Error: System.AggregateException: One or more errors occurred. (One of the identified items was in an invalid format.)
---> System.FormatException: One of the identified items was in an invalid format.
at System.Text.Json.JsonElement.GetDecimal()
at Plotly.Blazor.Extensions.PrepareJsonElement(JsonElement obj)
at System.Linq.Enumerable.SelectEnumerableIterator`2.MoveNext()
at System.Text.Json.Serialization.Converters.IEnumerableDefaultConverter`2.OnWriteResume(Utf8JsonWriter writer, TCollection value, JsonSerializerOptions options, WriteStack& state)
at System.Text.Json.Serialization.JsonCollectionConverter`2.OnTryWrite(Utf8JsonWriter writer, TCollection value, JsonSerializerOptions options, WriteStack& state)
at System.Text.Json.Serialization.JsonConverter`1.TryWrite(Utf8JsonWriter writer, T& value, JsonSerializerOptions options, WriteStack& state)
at System.Text.Json.Serialization.JsonConverter`1.TryWriteAsObject(Utf8JsonWriter writer, Object value, JsonSerializerOptions options, WriteStack& state)
at System.Text.Json.Serialization.JsonConverter`1.TryWrite(Utf8JsonWriter writer, T& value, JsonSerializerOptions options, WriteStack& state)
at System.Text.Json.Serialization.Converters.DictionaryDefaultConverter`3.OnWriteResume(Utf8JsonWriter writer, TDictionary value, JsonSerializerOptions options, WriteStack& state)
at System.Text.Json.Serialization.JsonDictionaryConverter`3.OnTryWrite(Utf8JsonWriter writer, TDictionary dictionary, JsonSerializerOptions options, WriteStack& state)
at System.Text.Json.Serialization.JsonConverter`1.TryWrite(Utf8JsonWriter writer, T& value, JsonSerializerOptions options, WriteStack& state)
at System.Text.Json.Serialization.JsonConverter`1.TryWriteAsObject(Utf8JsonWriter writer, Object value, JsonSerializerOptions options, WriteStack& state)
at System.Text.Json.Serialization.JsonConverter`1.TryWrite(Utf8JsonWriter writer, T& value, JsonSerializerOptions options, WriteStack& state)
at System.Text.Json.Serialization.Converters.IEnumerableDefaultConverter`2.OnWriteResume(Utf8JsonWriter writer, TCollection value, JsonSerializerOptions options, WriteStack& state)
at System.Text.Json.Serialization.JsonCollectionConverter`2.OnTryWrite(Utf8JsonWriter writer, TCollection value, JsonSerializerOptions options, WriteStack& state)
at System.Text.Json.Serialization.JsonConverter`1.TryWrite(Utf8JsonWriter writer, T& value, JsonSerializerOptions options, WriteStack& state)
at System.Text.Json.Serialization.JsonConverter`1.TryWriteAsObject(Utf8JsonWriter writer, Object value, JsonSerializerOptions options, WriteStack& state)
at System.Text.Json.Serialization.JsonConverter`1.TryWrite(Utf8JsonWriter writer, T& value, JsonSerializerOptions options, WriteStack& state)
at System.Text.Json.Serialization.Converters.ArrayConverter`2.OnWriteResume(Utf8JsonWriter writer, TElement[] array, JsonSerializerOptions options, WriteStack& state)
at System.Text.Json.Serialization.JsonCollectionConverter`2.OnTryWrite(Utf8JsonWriter writer, TCollection value, JsonSerializerOptions options, WriteStack& state)
at System.Text.Json.Serialization.JsonConverter`1.TryWrite(Utf8JsonWriter writer, T& value, JsonSerializerOptions options, WriteStack& state)
at System.Text.Json.Serialization.JsonConverter`1.WriteCore(Utf8JsonWriter writer, T& value, JsonSerializerOptions options, WriteStack& state)
at System.Text.Json.JsonSerializer.WriteUsingSerializer[TValue](Utf8JsonWriter writer, TValue& value, JsonTypeInfo jsonTypeInfo)
at System.Text.Json.JsonSerializer.WriteStringUsingSerializer[TValue](TValue& value, JsonTypeInfo jsonTypeInfo)
at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, CancellationToken cancellationToken, Object[] args)
at Microsoft.JSInterop.JSRuntime.InvokeAsync[TValue](Int64 targetInstanceId, String identifier, Object[] args)
at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object[] args)
at Plotly.Blazor.PlotlyJsInterop.NewPlot(IJSRuntime jsRuntime, DotNetObjectReference`1 objectReference)
at Plotly.Blazor.PlotlyChart.NewPlot()
at Plotly.Blazor.PlotlyChart.OnAfterRenderAsync(Boolean firstRender)
--- End of inner exception stack trace --
Any suggestions why this might be occuring are appriciated,
Are there any plans to implement sankey charts ? I can't figure out how to display one from the given examples
I am trying to update a stacked bar chart that is being used in a dashboard every 5 minutes or so and also has the capability of being able to be manually refreshed whenever the user wants to. When calling chart.React() this is the error I am getting.
Cannot access a disposed object.
Object name: 'DotNetObjectReference`1'.
With a stack trace of:
at Microsoft.JSInterop.DotNetObjectReference1.ThrowIfDisposed()
at Microsoft.JSInterop.DotNetObjectReference1.get_Value()
at Plotly.Blazor.PlotlyJsInterop.d__3.MoveNext()
at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
at Plotly.Blazor.PlotlyChart.d__49.MoveNext()
at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw()
at System.Runtime.CompilerServices.TaskAwaiter.ThrowForNonSuccess(Task task)
at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification(Task task)
Code being used to update the chart:
if (_chart != null) { await InvokeAsync(async () => { await _chart.React(); }); }
This same code works fine for the Line (Scatter) charts for updating values in realtime/manual refresh.
Code belows throws NullReferenceException
on call to Update
.
<PlotlyChart @bind-Config="config" @bind-Layout="layout" @bind-Data="data" @ref="chart"/>
@code {
[Parameter] public IReadOnlyCollection<Bar<T>> Bars { get; set; } = null!;
public PlotlyChart chart = new();
public Config config = new()
{
Responsive = true,
};
public Plotly.Blazor.Layout layout = new()
{
DragMode = DragModeEnum.Zoom,
Margin = new Margin
{
R = 10,
T = 25,
B = 40,
L = 60,
},
XAxis = new List<XAxis>
{
new()
{
AutoRange = AutoRangeEnum.True,
Type = typeof(T) == typeof(double) ? TypeEnum.Linear : TypeEnum.Date,
},
},
YAxis = new List<YAxis>
{
new()
{
AutoRange = Plotly.Blazor.LayoutLib.YAxisLib.AutoRangeEnum.True,
Type = Plotly.Blazor.LayoutLib.YAxisLib.TypeEnum.Linear,
},
},
Height = 800,
Title = new Title(),
};
private List<ITrace> GetData()
{
// Omitted...
}
protected override async Task OnParametersSetAsync()
{
this.data = this.GetData();
try
{
await this.chart.Update();
}
catch
{
}
await this.InvokeAsync(this.StateHasChanged);
}
}
Somehow if I catch the exception, I still get the chart displayed.
The mode bar will always appear in hover mode (the default action).
Config config = new Config
{
DisplayModeBar = ConfigLib.DisplayModeBarEnum.True
};
Setting to False has no effect.
https://plotly.com/javascript/configuration-options/#never-display-the-modebar
Changing Config.cs DisplayModeBar def to below fixes issue:
public bool? DisplayModeBar { get; set; }
After setting the height and width in the layout I notice that when a bar chart renders that a min-height of 350px is set.
The element looks like the following upon inspecting HTML
The chart itself seems to render the correct height but then there is a ton of white space even after shrinking the margins. Is there a way to override that setting ?
According to plotly.js, ExtendTraces
truncates the head of the data array, counting backward maxPoints from the tail.
/**
* extend && prepend traces at indices with update arrays, window trace lengths to maxPoints
*
* Extend and Prepend have identical APIs. Prepend inserts an array at the head while Extend
* inserts an array off the tail. Prepend truncates the tail of the array - counting maxPoints
* from the head, whereas Extend truncates the head of the array, counting backward maxPoints
* from the tail.
*
* If maxPoints is undefined, nonNumeric, negative or greater than extended trace length no
* truncation / windowing will be performed. If its zero, well the whole trace is truncated.
but in Plotly.Blazor, ExtendTraces is using Take(max.Value)
(see below), which truncates the tail of the data - counting maxPoints from the head.
if (max != null)
{
traceType.GetProperty("X")?.SetValue(currentTrace, list?.Take(max.Value).ToList());
}
I would love the possibility for using logarithmic axis like matplotlib/matlab's semilogx / semilogy / loglog functionality described here for plotly.
I have searched for it but it does not yet seem be there...
Anyway, thanks for the excellent package.
Hi
This is a really cool wrapper - however I am struggling to implement a 3D surface map. This there a plan to include one in the examples?
Many thanks
Jannes
Is there an example of how to create a candlestick chart?
Specifically, this kind of chart.
https://plotly.com/javascript/candlestick-charts/
This is default example with Scatter type.
PlotlyChart chart;
Plotly.Blazor.Config config = new Plotly.Blazor.Config();
Plotly.Blazor.Layout layout = new Plotly.Blazor.Layout();
List<Scatter> data = new List<Scatter>
{
new Scatter
{
Name = "Trace1",
Mode = ScatterMode.Lines
}
};
If I try to use CandleStick or Box as a type, VS complains that CandleStick is a static class and cannot be used as a type.
PlotlyChart chart;
Plotly.Blazor.Config config = new Plotly.Blazor.Config();
Plotly.Blazor.Layout layout = new Plotly.Blazor.Layout();
List<Plotly.Candlestick> data = new List<Plotly.Candlestick>
{
new Plotly.Candlestick
{
Name = "Trace1",
Mode = ScatterMode.Lines
}
};
Support of multiple axes is required.
I'm wondering if it is possible to retain the viewport orientation for a Surface chart after calling React()? I make use of showing and hiding surfaces on a chart quite regularly, but having to manually reorient the chart to look at a particular location after hiding a surface and calling React() adds a lot of tedium.
I looked at the chart, its layout, the scene owned by the layout, and the camera owned by the scene, to see if there was some way of pulling out the values for the rotation, zoom, etc, but did not find anything that could be used.
If it's something that isn't currently possible, but could reasonably be implemented, let me know and I can look into creating a pull request.
I'm setting the XAxis.Ticks = TicksEnum.Empty
but the ticks remain visible.
I suspect that because this is internally an empty string, something somewhere is treating this as equivalent to null and ignoring it, but I haven't traced it down specifically.
Hi, I am using Plotly blazor. The problem I am facing is that, in the case where there are two or more y values on same x axis, on dragging on the point the animation shows only the values of the latest one.
Even if I drag on 100M y-axis point it still shows me the value animation of the one 8M.
I wanted value animation of each point even on the same x axis.
Help will be appreciated.
Hi,
Im using Blazor with Telerik, but i wasn't a fan of their charts, so I decided to try these out. after asynchronysly loading the data i call "await chart.React()" so the Data in the chart is updated, Consequently my LoadingIcon is blocked and stops spinning for a couple of seconds until "chart.React" is finished.
Am I doing something wrong. Why is the chart not updates asynchronously, even if the function is awaitable.
Kind Regards,
Vlad
Hi,
I'm trying to implement heatmap using this library but due to lacking in examples of heatmap I'm struggling to make it to work.
Data for heatmap is from an internal API. The requirement are user select production types (Oil, Gas, BOE) and data levels (7 days, 30 days, etc.) from 2 dropdown lists. When I run, all the values for X, Y and Z were populated but the heatmap doesn't show up, only the axises (they are even wrong, not the ones I assigned, just generic 1, 2, 3, 4). All of the controls and CSS work fine. There's no error. Please help.
Note: I'm using MudBlazor for CSS
Front end:
@using Plotly.Blazor.LayoutLib
<div class="mt-5">
<MudText Typo="Typo.h3" Color="Color.Primary" Align="Align.Center">GOM Production Heatmap</MudText>
</div>
<div class="mt-5">
<MudGrid>
<MudItem lg="12">
<MudGrid Spacing="4" Justify="Justify.Center">
<MudItem>
<MudSelect T="string" Variant="Variant.Outlined" Label="Select production type" @bind-Value="selectedProductionType" Style="width:250px;">
@foreach(var type in ProductionTypes)
{
<MudSelectItem Value="@type">@type</MudSelectItem>
}
</MudSelect>
</MudItem>
<MudItem>
<MudSelect T="string" Variant="Variant.Outlined" Label="Select level" @bind-Value="selectedLevel" Style="width:250px;">
@foreach(var level in DisplayLevels)
{
<MudSelectItem Value="@level">@level</MudSelectItem>
}
</MudSelect>
</MudItem>
</MudGrid>
</MudItem>
</MudGrid>
</div>
<div class="mt-5">
<PlotlyChart Id="TestId" Config="config" Layout="layout" Data="data" @ref="chart" />
</div>
Code behind:
using Kosgo.Apps.Services;
using Kosgo.Models;
using Microsoft.AspNetCore.Components;
using Plotly.Blazor;
using Plotly.Blazor.LayoutLib;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Plotly.Blazor.Traces;
namespace Kosgo.Components
{
public partial class GOMProdHeatmap : ComponentBase
{
[Inject]
public IGOMHeatmapDataService GOMHeatmapDataService { get; set; }
public IEnumerable<GOMProdHeatmapData> jsData { get; set; }
private List<object> YValues { get; set; }
private List<object> XValues { get; set; }
private List<object> ZValues { get; set; } = new List<object>();
private List<object> Levels { get; set; }
private List<string> DisplayLevels { get; set; } = new List<string>
{
"7 days",
"30 days",
"90 days",
"365 days"
};
private List<int> Periods { get; set; }
private List<string> ProductionTypes { get; set; } = new List<string>
{
"Gross Oil",
"Gross Gas",
"Gross BOE",
"Net BOE"
};
private string selectedProductionType { get; set; } = "Gross Oil";
private string selectedLevel { get; set; } = "7 days";
PlotlyChart chart { get; set; }
Config config { get; set; }
Layout layout { get; set; }
IList<ITrace> data { get; set; }
public override async Task SetParametersAsync(ParameterView parameters)
{
await base.SetParametersAsync(parameters);
config = new Config
{
Responsive = true
};
jsData = (await GOMHeatmapDataService.GetData()).ToList();
ProcessData();
data = new List<ITrace>
{
new HeatMap
{
X = XValues,
Y = YValues,
Z = ZValues,
//ShowScale = true,
HoverOnGaps = false
}
};
}
private void ProcessData()
{
YValues = jsData.Select(d => Convert.ChangeType(d.WellName, typeof(object))).Distinct().OrderBy(y => y).ToList();
Levels = jsData.Select(d => Convert.ChangeType(d.Level, typeof(object))).Distinct().OrderBy(x => x).ToList();
if (!Levels.Any(l => l.ToString().Length < 4))
{
DisplayLevels = Levels.Select(l => l.ToString().Insert(l.ToString().Length - 4, " ")).ToList();
}
XValues = jsData.Where(d => d.Level == selectedLevel.Replace(" ", ""))
.Select(d => Convert.ChangeType(d.MaxDate, typeof(object)))
.OrderBy(d => d).Distinct().ToList();
var z = new List<decimal?[]>();
foreach (var well in YValues)
{
if (selectedProductionType == "Gross Oil")
{
z.Add(jsData.Where(d => d.WellName == well.ToString() && d.Level == selectedLevel.Replace(" ", ""))
.Select(d => d.DeltaOil).ToArray());
}
else if (selectedProductionType == "Gross Gas")
{
z.Add(jsData.Where(d => d.WellName == well.ToString() && d.Level == selectedLevel.Replace(" ", ""))
.Select(d => d.DeltaGas).ToArray());
}
else if (selectedProductionType == "Gross BOE")
{
z.Add(jsData.Where(d => d.WellName == well.ToString() && d.Level == selectedLevel.Replace(" ", ""))
.Select(d => d.DeltaBoe).ToArray());
}
else
{
z.Add(jsData.Where(d => d.WellName == well.ToString() && d.Level == selectedLevel.Replace(" ", ""))
.Select(d => d.DeltaNetBoe).ToArray());
}
}
ZValues = z.Cast<object>().ToList();
}
}
}
Hello
I am using Plotly.Blazor for plotting graphs. For a small data set, it is working really good but if the data set becomes large e.g 100000 data points. The plotted graph is very very slow. I cannot pan it neither I can use the rest of the controls.
The application which we are using is deployed upon the P1V2
Azure App Service instance. If I try to pan it the graph is unresponsive and I see the following message
One more thing I that I am using ScatterGl
for traces. If I use simple scatter, it becomes unresponsive even on my machine. Kindly help me with this issue
Best Wishes
Saad
I have a GeoJSON file with feature data as polygons. How do I add this to a map?
Setting the GeoJson property of a ScatterGeo with either the path to the json file or the file contents as a string does nothing.
The property comparison is wrong.
Wrong:
Type == other.Type &&
Type != null && other.Type != null &&
Type.Equals(other.Type)
Correct:
Type == other.Type ||
Type != null &&
Type.Equals(other.Type)
Note: we only use properties, where null is allowed.
I used this library in the .net5 project. I added the library package according to the instructions in the markdown document, and the console reported an error during runtime:
Unhandled exception rendering component: Could not find 'plotlyInterop.newPlot' ('plotlyInterop' was undefined).
Error: Could not find 'plotlyInterop.newPlot' ('plotlyInterop' was undefined).
at https://localhost:5001/_framework/blazor.server.js:1:67713
at Array.forEach ()
at e.findFunction (https://localhost:5001/_framework/blazor.server.js:1:67673)
at v (https://localhost:5001/_framework/blazor.server.js:1:69415)
at https://localhost:5001/_framework/blazor.server.js:1:70361
at new Promise ()
at e.beginInvokeJSFromDotNet (https://localhost:5001/_framework/blazor.server.js:1:70334)
at https://localhost:5001/_framework/blazor.server.js:1:26441
at Array.forEach ()
at e.invokeClientMethod (https://localhost:5001/_framework/blazor.server.js:1:26411)
Microsoft.JSInterop.JSException: Could not find 'plotlyInterop.newPlot' ('plotlyInterop' was undefined).
With jQuery, we can get the selected points by a click on the line charts . Then we can generate another charts with the data point the user clicks on.
Could you add this feature in Blazor?
I googled the whole internet , found one website of ECharts has one feature . http://blazor-echarts.5izhy.cn/line/index .
I checked #147 and also demo https://plotly-blazor.azurewebsites.net/ , I did not find the function of getting the selected points . Could you make a demo ?
Hi, I am using Plotly blazor. The problem I am facing is that, when there are two points with same x and y axis then how to show count on that point.
Right now it shows one point on that x and y and I am unable to figure out how many points are there on same x and y.
In the above image there are two points on x-5000 and y-5000 but we are able to see only one. I wanted a way to show that there is two-points with the same values. I wanted something like when I hover on that point it shows me count (num of points with same x and y) as well.
I'm trying to set a custom color scale in a heatmap, but can't work out the C# syntax. I've various instances of the following but none work:
ColorScale = new List<object>
{
(0.0, "#f33"),
(0.5, "#3f3"),
(1.0, "#33f")
},
ColorScale = new Dictionary<double, string>
{
{0.0, "#f33" },
{0.5, "#3f3" },
{1.0, "#33f" }
},
The JS reference is:
colorscale: [
['0.0', 'rgb(165,0,38)'],
['0.1', 'rgb(215,48,39)'],
['0.2', 'rgb(244,109,67)'],
['0.3', 'rgb(253,174,97)'],
['0.4', 'rgb(254,224,144)'],
['0.5', 'rgb(224,243,248)'],
['0.6', 'rgb(171,217,233)'],
['0.7', 'rgb(116,173,209)'],
['0.8', 'rgb(69,117,180)'],
['1.0', 'rgb(49,54,149)']
]
Currently, this NuGet package bundles the "plotly-latest.min.js", I would like to use the "plotly-basic.min.js" script as its much smaller in size.
Turns out, that the default type is scatter.
Added text example.
When I install the 2.0.0 version of the package, there is no Plotly
namespace that can be imported.
Steps to recreate:
dotnet add package Plotly.Blazor --version 2.0.0
@using Plotly.Blazor
Attempting to compile will say The type or namespace name Plotly could not be found
Instead installing version 1.5.0 will fix this issue.
dotnet add package Plotly.Blazor --version 1.5.0
@using Plotly.Blazor
Import will work successfully
I got the examples compiled and running. Works like a charm. However, when I tried to add a scatter plot to a page in a new project following instructions in the readme file, I got the following:
CS1503: Argument 2: cannot convert from 'Microsoft.AspNetCore.Components.EventCallback<System.Collections.Generic.List<Plotly.Blazor.ITrace>>' to 'Microsoft.AspNetCore.Components.EventCallback'
I am using .NET Core 3.1 with Blazor Server and the default project template.
We need to display network graph using cytoscape
https://github.com/plotly/react-cytoscapejs
The current version works fine with .NET 6, but it seems worth updating for a few reasons:
Hello there. I wanted to try to use Blazor Serverside and Plotly Blazor, but all Examples seem to be outdated.
For example, using the following is impossible with a current Installation of VS2019 Preview, .Net 6 Preview and Blazor Serverside
<PlotlyChart style="height: 60vh; min-height: 350px" @bind-Config="config" @bind-Layout="layout" @bind-Data="data" @ref="chart" />
@code {
PlotlyChart chart;
Config config = new Config
{
Responsive = true
};
Layout layout = new Layout
{
Title = new Title
{
Text = "Scatter"
},
YAxis = new List<YAxis>
{
new YAxis
{
Title = new LayoutLib.YAxisLib.Title
{
Text = "Scatter Unit"
}
}
}
};
IList<ITrace> data = new List<ITrace>{
new Scatter
{
Name = "ScatterTrace",
Mode = ModeFlag.Lines | ModeFlag.Markers,
X = new List<object>(),
Y = new List<object>()
}
};
}
For reference, a List of the errors I am getting are:
Am I doing something wrong here?
Thanks for this contribution guys, It's working beautifully!
However, when I update the parameters, I new up a new list and re-calculate the data, however the chart doesn't refresh...
I tried by calling the chart.React method and still can't get it to update.
Do you have any ideas of what it could be?
I would suggest moving the helper class to the Example project.
I am using your repo as a base for a dashboard like website thats supposed to run only locally. I did not change anything in the structure. When I run the app in debug mode right out of VS, either IIS or just the examples project it all works fine, renders, all graphs are shown, no errors etc. I do have some warning because async methods crash some of the graphs but for a local environment sync methods should work fine I guess.
So when building the app, starting the exe and calling localhost in the browser, the app gets rendered partly, graphs are not rendered at all and when chanhing sites via the menu it crashes. Seems to be an issue with java interop, I paste the error and warnings from the console here.
If you have any idea what this is about I'd be happy about your answer. I have intermediate experience with c# but almost none in blazor yet.
Getting the following error when trying to implement an example from the examples section of the project.
crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
Unhandled exception rendering component: Cannot read properties of undefined (reading 'newPlot')
TypeError: Cannot read properties of undefined (reading 'newPlot')
at Object.newPlot (http://localhost:5054/_content/Plotly.Blazor/plotly-interop.js:3:23)
at http://localhost:5054/_framework/blazor.webassembly.js:1:3332
at new Promise ()
at Object.beginInvokeJSFromDotNet (http://localhost:5054/_framework/blazor.webassembly.js:1:3306)
at Object.St [as invokeJSFromDotNet] (http://localhost:5054/_framework/blazor.webassembly.js:1:59849)
at _mono_wasm_invoke_js_blazor (http://localhost:5054/_framework/dotnet.6.0.4.dckq00jdfr.js:1:195300)
at http://localhost:5054/_framework/dotnet.wasm:wasm-function[219]:0x1a0fb
at http://localhost:5054/_framework/dotnet.wasm:wasm-function[167]:0xcac9
at http://localhost:5054/_framework/dotnet.wasm:wasm-function[166]:0xb9dc
at http://localhost:5054/_framework/dotnet.wasm:wasm-function[2810]:0xabb22
Microsoft.JSInterop.JSException: Cannot read properties of undefined (reading 'newPlot')
TypeError: Cannot read properties of undefined (reading 'newPlot')
at Object.newPlot (http://localhost:5054/_content/Plotly.Blazor/plotly-interop.js:3:23)
at http://localhost:5054/_framework/blazor.webassembly.js:1:3332
at new Promise ()
at Object.beginInvokeJSFromDotNet (http://localhost:5054/_framework/blazor.webassembly.js:1:3306)
at Object.St [as invokeJSFromDotNet] (http://localhost:5054/_framework/blazor.webassembly.js:1:59849)
at _mono_wasm_invoke_js_blazor (http://localhost:5054/_framework/dotnet.6.0.4.dckq00jdfr.js:1:195300)
at http://localhost:5054/_framework/dotnet.wasm:wasm-function[219]:0x1a0fb
at http://localhost:5054/_framework/dotnet.wasm:wasm-function[167]:0xcac9
at http://localhost:5054/_framework/dotnet.wasm:wasm-function[166]:0xb9dc
at http://localhost:5054/_framework/dotnet.wasm:wasm-function[2810]:0xabb22
at Microsoft.JSInterop.JSRuntime.d__161[[Microsoft.JSInterop.Infrastructure.IJSVoidResult, Microsoft.JSInterop, Version=6.0.0.0, Culture=neutral, PublicKeyToken=adb9793829ddae60]].MoveNext() at Microsoft.JSInterop.JSRuntimeExtensions.InvokeVoidAsync(IJSRuntime jsRuntime, String identifier, Object[] args) at Plotly.Blazor.PlotlyJsInterop.NewPlot(IJSRuntime jsRuntime, DotNetObjectReference
1 objectReference)
at Plotly.Blazor.PlotlyChart.NewPlot()
at Plotly.Blazor.PlotlyChart.OnAfterRenderAsync(Boolean firstRender)
at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)
My razor component:
`@using Plotly.Blazor.LayoutLib
<PlotlyChart Id="TestId" Config="config" Layout="layout" Data="data" @ref="chart"/>
@code {
PlotlyChart chart;
Config config = new Config
{
Responsive = true
};
Layout layout = new Layout
{
Title = new Title
{
Text = "Bar"
},
BarMode = BarModeEnum.Stack,
Height = 500
};
List<ITrace> data = new List<ITrace>
{
new Bar
{
X = new List<object> {"giraffes", "orangutans", "monkeys"},
Y = new List<object> {20, 14, 23},
Name = "SF Zoo"
},
new Bar
{
X = new List<object> {"giraffes", "orangutans", "monkeys"},
Y = new List<object> {12, 18, 29},
Name = "LA Zoo"
}
};
}`
_Imports.razor:
... @using Plotly.Blazor; @using Plotly.Blazor.Traces;
index.html:
<!-- Import the plotly.js library --> <script src="_content/Plotly.Blazor/plotly-latest.min.js" type="text/javascript"></script> <!-- Import the plotly.js interop functions --> <script src="_content/Plotly.Blazor/plotly-interop.js" type="text/javascript"></script>
Hi,
I'd like to add a sum for the traces in my scatter plot, and I'm having trouble understanding the aggregation.target and aggregate.groups settings and how they work in Plotly.Blazor.
An example would be great if you can =) thanks.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.