CODEWITHSUNDEEP
javascripthtmlcanvasjs
JDS
JDS

Reputation: 16978

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);

}

Upvotes: 0

Views: 1031

Answers (2)

Muhammad Toqeer Tahir
Muhammad Toqeer Tahir

Reputation: 1

axisY:{ maximum: 1000 }, //use maximum for change y axis value

Upvotes: 0

wahwahwah
wahwahwah

Reputation: 3177

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.

Upvotes: 2

Related Questions