You must be logged in to post your query.
Home › Forums › Chart Support › Help to dynamically bind the stripline to the diagram!
Good day! I want to display a dynamic stripline on a line chart, but I don’t know where to insert the code. Please tell me! As in this example https://canvasjs.com/javascript-stockcharts/dynamic-stockchart-stripline/
chart = new CanvasJS.Chart(“chartContainer”, { animationEnabled: true, theme: “light2”, backgroundColor: “#1E1E1E”, title: { titleFontSize: 3, text: “Grafik” }, toolTip: { enabled: true, animationEnabled: true, borderColor: “#29F800”, fillOpacity: 0.1,
borderThickness: 2, fontColor: “#F40206”, backgroundColor: “#1E1E1E”, content: “{y}” }, axisX: { includeZero: false, titleFontSize: 0, labelFontSize: 0, gridThickness: 0, tickLength: 0, lineThickness: 1, lineColor: “#29624A” }, axisY: { includeZero: false, titleFontSize: 0, labelFontSize: 0, gridThickness: 0, tickLength: 0, lineThickness: 1, lineColor: “#29624A” },
data: [{ type: “splineArea”, toolTipContent: “Price: </b>${y}”, fillOpacity: 0.2, /*showInLegend: true, legendText: “Algorithm xZ & Worm”,*/
lineColor: “#00FBFF”, exportEnabled: true, lineThickness: 2, markerType:”square”,markerColor: “red”, markerSize: 12, opacity: 0.8, markerBorderThickness: 1.5, markerBorderColor: “#00FBFF”, dataPoints: dps
}]
});
}, false); I want to achieve such a line with the current value https://drive.google.com/file/d/1yK_xYoq_8r2G2kQpr4u0QeG7xqSwvyd7/view?usp=sharing
I want to achieve such a line with the current value https://drive.google.com/file/d/1yK_xYoq_8r2G2kQpr4u0QeG7xqSwvyd7/view?usp=sharing
Hi.
I think it can be done by pre-defining a stlipline and assigning that pre-definition in axisY.
`let stline=[]; stline.push({value:YVALUE, [other option]})
axisY : { stripLines:stline, : }
@oleglr,
You can create a dynamic stripLine by adding a stripLine and then updating its value and label property to the subsequent y-value of the latest dataPoints which have been added dynamically.
Please take a look at the code snippet below,
function updateChart() { $.getJSON("https://canvasjs.com/services/data/datapoints.php?xstart=" + (dataPoints.length + 1) + "&ystart=" + (dataPoints[dataPoints.length - 1].y) + "&length=1&type=json", function(data) { $.each(data, function(key, value) { dataPoints.push({ x: parseInt(value[0]), y: parseInt(value[1]) }); chart.options.axisY.stripLines[0].value = value[1]; chart.options.axisY.stripLines[0].label = value[1]; }); chart.render(); setTimeout(function(){updateChart()}, 1000); }); }
Also, kindly take a look at this JSFiddle for an example to create a dynamic stripLine.
— Adithya Menon Team CanvasJS
You must be logged in to reply to this topic. Login/Register