Home Forums Chart Support Push StripLine values using JSON in .Net Core Razor Page Application Reply To: Push StripLine values using JSON in .Net Core Razor Page Application



Push Strip Line Values
You’ll see from the code that I currently push the chart Data Points using an AJAX call and returning JSON data. However, I also need to return values for the 3 strip lines (average, upper and lower) which I have set manually within the demo project. These values are already calculated in the JSON function, however, I don’t know how to return them to the chart along with the Data Points.

You can add striplines dynamically using addTo method to any desired value. Please refer the below code-snippet to add striplines at minimum & maximum values of dataSeries –

chart.axisY[0].addTo("stripLines", { value: minY, label: minY, thickness:2 }, false);
chart.axisY[0].addTo("stripLines", { value: maxY, label: maxY, thickness:2 });

Also, kindly take a look at this JSFiddle for complete code.

Dummy dataSeries for legends average, upper and lower
I have also added dummy data series to the chart to create legends for the average, upper and lower strip lines. I also need to be able to push values to each of these dataSeries, i.e. the name and data point.

I’ve also noticed that when adding the dummy dataSeries that it squashes the chart values, can this be solved?

In your case, you have added dataPoints to the dummy dataSeries whose x-values are comparatively higher than that of the dataPoints present in the first dataSeries, as a result, it is reserving the space for those dataPoints. You can overcome this by dynamically adding the x-value of first dataPoint(from first dataSeries) to the dummy dataSeries by updating chart options as shown below –

chart.options.data[1].dataPoints.push({ x: new Date(chart.options.data[0].dataPoints[0].x), y: 0 });
chart.options.data[2].dataPoints.push({ x: new Date(chart.options.data[0].dataPoints[0].x), y: 0 });
chart.options.data[3].dataPoints.push({ x: new Date(chart.options.data[0].dataPoints[0].x), y: 0 });

Please check this JSFiddle for an example on adding dataPoints and name to dataSeries by updating chart options.

Add StripLines Dynamically

Indranil Singh Deo
Team CanvasJS