Home › Forums › Chart Support › update chart with new values

update chart with new values

Viewing 6 posts - 1 through 6 (of 6 total)
  • May 21, 2018 at 12:55 pm #20795

    unixssh

    Hi guys,

    I was trying to update chart with new values on rangeChanged/rangeChanging event but no results. Even if in debug mode i’ve checked the chart.options.data[0].dataPoints[i] object and contained the expected object, the chart was not updated. Below is a code where i tried pushing a button to update the chart but i get the same results. Initially the chart is populated with 24 objects representing 24 hours and pressing the update button i’d like to redraw the chart with 500 objects representing some minutes.

    Any help would be highly appreciated.

    <!DOCTYPE html>
<html>
<head> 
<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://cdn.canvasjs.com/canvasjs.min.js"></script> 
<script type="text/javascript">
window.onload = function () {

var bigArray = [];
var dataObj = {type: "spline", dataPoints: []};
bigArray.push(dataObj);

var hoursList = [];
var hoursLimit = 24;
var y=0;

//generateHours();
	for ( var j = 0; j < hoursLimit; j++ ) {
		y += Math.round( 10 + Math.random() * (-10 -10));
		var date2 = new Date();
		date2.setHours(j);
		date2.setMinutes(0);
		date2.setSeconds(0);
		date2.setMilliseconds(0);
		dataObj.dataPoints.push({x:date2, y:y})
	}
	
	var chart = new CanvasJS.Chart("chartContainer", { 
		title: {
			text: "Adding & Updating dataPoints"
		},
		zoomEnabled:true,
		data: bigArray
		
	});
	
	chart.render();	
	

	
	

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


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

	});

	$("#updateDataPoint").click(function () {
	
	chart.options.title.text = "Last DataPoint Updated";
	chart.options.data[0].dataPoints = [];	
	
	var minuteList = [];
	var minuteLimit = 500;
	//var w;
	for ( var i = 0; i < minuteLimit; i++ ) {
		var w = Math.round( 10 + Math.random() * (-10 -10));
		var date1 = new Date();
		
		date1.setMinutes(i);
		date1.setSeconds(0);
		date1.setMilliseconds(0);
	
		chart.options.data[0].dataPoints[i] = {x:date1, w:w};
	}

	chart.render();

	});
}
</script>
</head>  
<body>  
<div id="chartContainer" style="width:100%; height:280px"></div>  
<button id="addDataPoint">Add Data Point</button>  
<button id="updateDataPoint">Update Data Point</button>  
</body>
</html>
    May 21, 2018 at 1:20 pm #20796

    Vishwas R

    @unixssh,

    Datapoint accepts x-value and y-value with optional label and z-value. In your case, you seem to be passing a property called ‘w’ instead of ‘y’ on clicking update button. Changing chart.options.data[0].dataPoints[i] = {x:date1, w:w}; to chart.options.data[0].dataPoints[i] = {x:date1, y:w}; should work fine in your case.

    If you are still facing issue, kindly create JSFiddle reproducing the issue you are facing and share it with us, so that we can look into the code / chart-options being used, understand the scenario better and help you out.

    —
    Vishwas R
    Team CanvasJS

    May 21, 2018 at 10:17 pm #20811

    unixssh

    Hi Vishwas,

    Yes you were right, is working now but moving the code to rangeChanged function it seems the chart is not render properly and i don’t understand why. I’ve created a jsfiddle: https://jsfiddle.net/unixssh/ubegw036/

    Below I’ll try to explain what i want to do and i’ll appreciate your advice :)

    In the back-end i have multiple quartz jobs which are running each 1 minute/30 minutes/1 hour using spring framework and insert data particular data in DB.
    At the first run of the chart, i’d like to load using ajax call only the 1 hour json data. After the chart is loaded and selecting a range i need to go and get using ajax a 30 minutes data from db and further getting 1 minute data json. All of these because i have a big data load bigger than 10 MB if i load minutes data.

    Besides all of these i need to load multiple logarithmic charts in the same CanvasJS chart object, maybe around 5 charts, I know is possible.
    Right now i’m trying to figure out if canvasjs is the library i need for supporting all of these and trying to mock the data from backend in the example from jsfiddle.
    What would you recommend for my above business case?

    Thank a lot,
    unixssh

    • This reply was modified 6 years, 6 months ago by unixssh.
    May 22, 2018 at 5:24 pm #20841

    Vishwas R

    @unixssh,

    You can perform data filtering based on range of zoomed region with the help of rangeChanging event. Initially you can read all data using AJAX and pass it to chart. Based on range of zoomed-region, you can filter the datapoints upon zooming. Below is the code snippet.

    if (e.trigger === "zoom") {
    chart.options.data[0].dataPoints = [];
    if (((e.axisX[0].viewportMaximum - e.axisX[0].viewportMinimum) / hours) < 1) {
        for (var i = 0; i < dps.length; i++) {
            chart.options.data[0].dataPoints.push(dps[i]);
        }
    } else if (((e.axisX[0].viewportMaximum - e.axisX[0].viewportMinimum) / (hours)) < 24) {
        for (var i = 0; i < dps.length; i += 10) {
            chart.options.data[0].dataPoints.push(dps[i]);
        }
    }
}

    Please take a look at this JSFiddle for an working example on the same.
    column chart with data filtering

    moving the code to rangeChanged function it seems the chart is not render properly and i don’t understand why

    In the JSFiddle that you have shared, you are generating new dataPoints with x-value as date-time which is outside the range you have zoomed. Because of this you may find chart to be blank after zooming into a certain region – without any dataPoints.

    —
    Vishwas R
    Team CanvasJS

    May 22, 2018 at 9:39 pm #20843

    unixssh

    Hi Vishwas,

    Thanks a lot for all the hints. As i see rangeChainging/rangeChanged functions are triggered only if you select an expected time range. Can this be modified for a custom range?

    Thx,
    Unixssh

    May 23, 2018 at 10:36 am #20849

    Vishwas R

    @Unixssh,

    rangeChanging and rangeChanged are triggered everytime when viewportMinimum or viewPortMaximum are updated while zooming, panning, or reset. If you like to perform some task within rangeChanging/rangeChanged for custom range, you can add a condition to check the range before the actual functionality.

    rangeChanging: function(e) {
    if(e.axisX[0].viewportMinimum > customRangeMinimum && e.axisX[0].viewportMaximum < customRangeMaximum) {
        //Your code goes here
    }
}

    —
    Vishwas R
    Team CanvasJS

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

You must be logged in to reply to this topic.