Home forums Using CanvasJS Automatically zoom to end of update

This topic contains 3 replies, has 2 voices, and was last updated by  Vishwas R 5 days, 8 hours ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #22611

    adjmpw
    Participant

    I am testing canvas js , I have huge set of data sets of datasets thats updated every seconds to my chart , after I get around 1000 datasets , chart become too tiny and unreadable..

    How Do i set zoom level to show last 100 data everytime I receive ticks , below is my code so far.I dont want to use shift() , because I am unable to pan back and see previous data..

    window.onload = function () {
    
    var dps = [];
    var dpss = [];
    var dpsss = [];
    
    var chart = new CanvasJS.Chart("chartContainer", {
    	 zoomEnabled:true,
    	 panEnabled:true,
    
    	title :{
    		text: "Dynamic Spline Chart"
    	},
    	axisY: {
    		includeZero: false,
    		 minimum: -200,
        maximum: 200
    	},
      axisY2: {
    		includeZero: false
    	},
    	data: [{
    		type: "stackedColumn",
    		markerSize: 0,
    		dataPoints: dps 
    	},
              {
    		type: "stackedColumn",
    		markerSize: 0,
    		dataPoints: dpss 
    	},
              {
    		type: "stackedColumn",
    		markerSize: 0,
    		dataPoints: dpsss 
    	}]
    });
    
    var xVal = 0;
    var yVal = 100;
    var updateInterval = 1000;
    var dataLength = 240; // number of dataPoints visible at any point
    
    var updateChart = function (count) {
    	count = count || 1;
    	// count is number of times loop runs to generate random dataPoints.
    	for (var j = 0; j < count; j++) {	
    		yVal = yVal + Math.round(5 + Math.random() *(-5-5));
    				yValx = yVal + Math.round(12 + Math.random() *(-5-5));
    
    		dps.push({
    			x: xVal,
    			y: yVal
    		});
          dpss.push({
    			x: xVal,
    			y: -yValx
    		});
          dpsss.push({
    			x: xVal,
    			y: -yVal
    		});
    		xVal++;
    	}
    	if (dps.length > dataLength) {
    		dps.shift();
          		dpss.shift();
                		dpsss.shift();
    
    	}
    	chart.render();
    };
    
    updateChart(dataLength); 
    setInterval(function(){ updateChart() }, updateInterval); 
    
    }
    #22612

    adjmpw
    Participant

    I am unable to edit it so I am replying with the updated code , I managed to do it by setting viewport minimum, but If i pan back its causing problem , please check this codepen – https://codepen.io/adjmpw/pen/ZMMGpY

    If i click pan tool and try to move back its acting weird , zooming out viewports..

    #22614

    adjmpw
    Participant

    Update : I made it working .. please delete this post – here is the update.

    #22619

    Vishwas R
    Keymaster

    @adjmpw,

    Glad that you made it work using viewportMinimum and viewportMaximum :)


    Vishwas R
    Team CanvasJS

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.