javascripthtmlcanvasjs

CanvasJS Chart - How to make the axisY have constant range?


I have a dynamic chart updating data every 100ms or so. I know my numbers will range from 0 to 100, but dynamically the chart keeps readjusting the range. How can I keep a constant Y axis range, from 0 to 100, so that everything can be seen proportionally?

Code below:

function scoreGraphSetup() {
    // Global vars used:
    // scoreBuffer, latestScore
    //var scoreBuffer = []; // dataPoints
    var chart = new CanvasJS.Chart("chartContainer", {
        title :{
            text: "Motion Score (last few seconds)"
        },
        data: [{
            type: "line",
            dataPoints: scoreBuffer
        }],
        axisY: {
            prefix: "",
            suffix: "",
            includeZero: false
            // I need to do something in axisY, right?
        },
    });
    var xVal = 0;
    var yVal = 0; 
    var updateInterval = 100;
    var dataLength = 150; // number of dataPoints visible at any point

    var updateChart = function (count) {
        count = count || 1;
        for (var j = 0; j < count; j++) {
            //yVal = yVal +  Math.round(5 + Math.random() *(-5-5));
            scoreBuffer.push({
                x: xVal,
                y: latestScore // push on the latest analysis score //formerly: yVal
            });
            xVal++;
        }
        if (scoreBuffer.length > dataLength) {
            scoreBuffer.shift();
        }
        chart.render();
    };
    updateChart(dataLength);
    setInterval(function(){updateChart()}, updateInterval);

}

Solution

  • Fixed y axes min and max values from canvasjs:

    maximum:number Sets the maximum value permitted on Axis. Values greater than maximum are clipped. maximum also set the upper limit while panning chart.

    Default: Automatically Calculated based on the data

    Example: 100, 350..

    Notes: If maximum value is not set, it is automatically calculated. While setting maximum, it should be taken care that maximum should be greater than minimum.

    Per your example:

     axisY:{
       minimum: 0,
       maximum: 100
     },
    

    Since the values outside of the range (0-100) are "clipped" you want to add either a fixed or algorithmic min-max boundary that allows for end users to see that data value has been reached or exceeded.