Chartjs-Problems Populating Chart.js OHLC Financial Chart from JSON Array (Ajax call from Django model)

by

1👍

✅

Marking this as answered. I pivoted to canvasjs because I prefer the chart options. But, as I said, you have to push each data point to the end of the array before populating the chart, as shown here (spline instead of OHLC, but same principle):

window.onload = function () {
    var chart = new CanvasJS.Chart("chartContainer", { 
        title: {
            text: "Adding & Updating dataPoints"
        },
        data: [
        {
            type: "spline",
            dataPoints: [
                { y: 10 },
                { y:  4 },
                { y: 18 },
                { y:  8 }   
            ]
        }
        ]
    });
    chart.render(); 

    $("#addDataPoint").click(function () {

    var length = chart.options.data[0].dataPoints.length;
    chart.options.title.text = "New DataPoint Added at the end";
    chart.options.data[0].dataPoints.push({ y: 25 - Math.random() * 10});
    chart.render();

Leave a comment