Quantcast
Channel: Active questions tagged blazor - Stack Overflow
Viewing all articles
Browse latest Browse all 4173

SciChart's Waterfall chart with .NET Blazor wrapper

$
0
0

I'm trying to add this beautiful Waterfall chart SciChart has with this wrapper:https://github.com/NRTDP/SciChartBlazorBut it looks like there is a problem with rendering 2d surfaces.

I've created a Chart.razor on Client side using new Blazor Web App with following code:

@page "/chart"@using SciChartBlazor@using SciChartBlazor.Axes@using SciChartBlazor.DataSeries@using SciChartBlazor.Modifiers@using SciChartBlazor.RenderableSeries@using SciChartBlazor.Services@rendermode InteractiveAuto@inject IJSRuntime JsRuntime <div id="@Id" @ref="_chart" style="height:600px" /><button @onclick=Load>Load</button>@code{    private string Id { get; set; } = "C" + Guid.NewGuid().ToString();    private protected ElementReference _chart;    SciChartBuilder _chartBuilder = default!;    int _seriesCount = 10;    private async void Load()    {        for (int i = 0; i < _seriesCount; i++)        {            var XAxis = new NumericAxis()                {                    Id = $"X{i}",                    MaxAutoTicks = 5,                    DrawMajorGridLines = false,                    GrowBy = new SciChartNumberRange(0, 0.2),                    VisibleRange = new SciChartNumberRange(-1000.0, 1000.0),                    VisibleRangeLimit = new SciChartNumberRange(-1000.0, 1000.0),                    IsVisible = (i == 0),                    //OverrideOffset = 0                };            await _chartBuilder.AddAxis(XAxis, AxisType.X);            var YAxis = new NumericAxis()                {                    Id = $"Y{i}",                    MaxAutoTicks = 5,                    DrawMajorGridLines = false,                    VisibleRange = new SciChartNumberRange(-100.0, 100.0),                    VisibleRangeLimit = new SciChartNumberRange(-1000.0, 1000.0),                    IsVisible = (i == 0),                    //OverrideOffset = 0                };            await _chartBuilder.AddAxis(YAxis, AxisType.Y);            double[] x = new double[10];            double[] y = new double[10];            for (int j = 0; j < 10; j++)            {                x[j] = (double)j;                y[j] = Math.Sin(j) * 100 + i;            }            var ser = new XyDataSeries<double, double>(x, y) { DataSeriesName = $"N{i}" };            var fastLineRenderableSeries = new SciChartBlazor.RenderableSeries.FastLineRenderableSeries<double, double>(ser)                { Id = $"S{i}", XAxisId = $"X{i}", YAxisId = $"Y{i}", StrokeThickness = 1, Stroke = "#64BAE4" };            await _chartBuilder.AddSeries(fastLineRenderableSeries);        }    }    protected override async Task OnAfterRenderAsync(bool firstRender)    {        if (firstRender)        {            //Create the chart            _chartBuilder = new SciChartBuilder(_chart, JsRuntime, new SciChartBlazorService(JsRuntime, new SciChartOptions()));            await _chartBuilder.CreateChart();        }    }} 

With _seriesCount equals 1 it builds a simple chart, but adding more series returns an error in a line:

 this.nativeArgs.StartIndex = rp.indexesRange.min

Full trace:

Error from chart in div Ced51579e-26cc-4536-96e2-49f46254f9db: TypeError: Cannot read properties of undefined (reading 'min')    at ExtremeResamplerHelper.resetAndFillBasicNativeArgs (ExtremeResamplerHelper.js:178:54)    at ExtremeResamplerHelper.needsResampling (ExtremeResamplerHelper.js:50:18)    at BaseRenderableSeries.needsResampling (BaseRenderableSeries.js:935:37)    at SciChartRenderer.resampleSeries (SciChartRenderer.js:65:17)    at SciChartRenderer.prepareSeriesRenderData (SciChartRenderer.js:328:57)    at SciChartRenderer.render (SciChartRenderer.js:144:35)    at SciChartSurface.doDrawingLoop (SciChartSurface.js:707:35)    at SciChartSurface.onRenderSurfaceDraw (SciChartSurface.js:1337:18)    at RenderSurface.onRenderTimeElapsed (RenderSurface.js:37:14)    at Object.Draw (createMaster.js:294:60)

Following this stacktrace at SciChartRenderer.resampleSeries (SciChartRenderer.js:65:17)

 var rp = new ResamplingParams_1.ResamplingParams(seriesViewRect, rs, xAxis);

where

var ResamplingParams_1 = __webpack_require__(/*! ../Numerics/Resamplers/ResamplingParams */ "./node_modules/scichart/Charting/Numerics/Resamplers/ResamplingParams.js");

it looks like rp is not created correctly but I don't understand why?

Ps I've downloaded the package from git and didn't use NuGet. Also you can find js equivalent of this here https://github.com/ABTSoftware/SciChart.JS.Examples/blob/master/Examples/src/components/Examples/FeaturedApps/ScientificCharts/InteractiveWaterfallChart/index.tsx

Also you will need to add this line in your App.razor:

<script async src="_content/SciChartBlazor/SciChart/sciChartBlazorJson.js"></script>

Viewing all articles
Browse latest Browse all 4173

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>