Home Forums Chart Support Loading Data to Canvas

Loading Data to Canvas

Viewing 4 posts - 1 through 4 (of 4 total)
  • #20326

    Hello,
    I have a canvas that I tried to adapt to use with flask(python). I have the canvas loading and the data is there. I am not able to get the data to load to the chart. Below is the code. Any help will be very much appreciated.

    
    <!DOCTYPE HTML>
    <html>
    <head>
    <script>
    window.onload = function () {
    
    var dataPoints1 = [];
    var dataPoints2 = [];
    var humidorT = {{ humidorT|safe }};
    var humidorH = {{ humidorH|safe }};
    
    var date = {{ date|safe }};
    var length = {{ length|safe }};
    
    var chart = new CanvasJS.Chart("chartContainer", {
    	zoomEnabled: true,
    	title: {
    		text: "Share Value of Two Companies"
    	},
    	axisX: {
    		title: "Time Stamp"
    	},
    	axisY:{
    		prefix: "",
    		includeZero: false
    	}, 
    	toolTip: {
    		shared: true
    	},
    	legend: {
    		cursor:"pointer",
    		verticalAlign: "top",
    		fontSize: 22,
    		fontColor: "dimGrey",
    		itemclick : toggleDataSeries
    	},
    	data: [{ 
    		type: "line",
    		xValueType: "dateTime",
    		yValueFormatString: "####",
    		//xValueFormatString: "MM-dd-YYYY hh:mm:ss TT",
    		showInLegend: true,
    		name: "Temerature",
    		dataPoints: dataPoints1
    		},
    		{				
    			type: "line",
    			xValueType: "dateTime",
    			yValueFormatString: "####",
    			showInLegend: true,
    			name: "Humidity" ,
    			dataPoints: dataPoints2
    	}]
    });
    
    function toggleDataSeries(e) {
    	if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
    		e.dataSeries.visible = false;
    	}
    	else {
    		e.dataSeries.visible = true;
    	}
    	chart.render();
    }
    
    function updateChart(length) {
    
    	// pushing the new values
    	var i;
    	for(i = 0; i < length; i++){
    		dataPoints1.push({
    			x: date[i],
    			y: humidorH[i]
    		});
    		dataPoints2.push({
    			x: date[i],
    			y: humidorT[i]
    		});
    		
    	}
    
    	}
    	
    	updateChart(length);
    	
    	chart.render();
    }
    </script>
    </head>
    <body>
    <div id="chartContainer" style="height: 300px; width: 100%;"></div>
    <script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
    </body>
    </html>
    
    #20329

    @thrasher7811,

    Can you please provide your sample data so that we can look into the data and help you out.

    ___________
    Indranil Deo,
    Team CanvasJS

    #20340

    Here is the code with the input data. Thank you.

    
    
    <!DOCTYPE HTML>
    <html>
    <head>
    <script>
    window.onload = function () {
    
    var dataPoints1 = [];
    var dataPoints2 = [];
    var humidorT = [69.8, 69.8, 69.8, 69.8, 69.8, 69.8, 69.8, 69.8, 71.6, 71.6, 71.6, 71.6, 71.6, 71.6, 71.6, 71.6, 71.6, 71.6, 71.6, 71.6, 71.6, 69.8, 68.0, 64.4, 66.2, 66.2, 68.0, 69.8, 71.6, 71.6, 73.4, 75.2, 75.2, 75.2, 75.2];
    
    var humidorH = [40.0, 40.0, 41.0, 43.0, 43.0, 43.0, 43.0, 45.0, 47.0, 46.0, 48.0, 50.0, 49.0, 46.0, 47.0, 44.0, 43.0, 44.0, 44.0, 44.0, 43.0, 44.0, 41.0, 42.0, 41.0, 40.0, 39.0, 40.0, 39.0, 39.0, 38.0, 35.0, 36.0, 37.0, 38.0];
    
    var date = ['2018-04-16 06:00:21', '2018-04-16 06:00:21', '2018-04-16 05:00:14', '2018-04-16 04:00:08', '2018-04-16 03:00:21', '2018-04-16 02:00:14', '2018-04-16 01:00:07', '2018-04-16 00:00:21', '2018-04-15 23:00:14', '2018-04-15 22:00:07', '2018-04-15 21:00:20', '2018-04-15 20:00:10', '2018-04-15 19:00:21', '2018-04-15 18:00:14', '2018-04-15 17:00:07', '2018-04-15 16:00:19', '2018-04-15 15:00:12', '2018-04-15 14:00:23', '2018-04-15 13:00:16', '2018-04-15 12:00:09', '2018-04-15 11:00:22', '2018-04-15 10:00:16', '2018-04-15 09:00:09', '2018-04-15 08:00:22', '2018-04-15 07:00:15', '2018-04-15 06:00:08', '2018-04-15 05:00:22', '2018-04-15 04:00:15', '2018-04-15 03:00:08', '2018-04-15 02:00:21', '2018-04-15 01:00:14', '2018-04-15 00:00:08', '2018-04-14 23:00:21', '2018-04-14 22:00:11', '2018-04-14 21:00:25'];
    
    var length = 35;
    
    var chart = new CanvasJS.Chart("chartContainer", {
    	zoomEnabled: true,
    	title: {
    		text: "Share Value of Two Companies"
    	},
    	axisX: {
    		title: "Time Stamp"
    	},
    	axisY:{
    		prefix: "",
    		includeZero: false
    	}, 
    	toolTip: {
    		shared: true
    	},
    	legend: {
    		cursor:"pointer",
    		verticalAlign: "top",
    		fontSize: 22,
    		fontColor: "dimGrey",
    		itemclick : toggleDataSeries
    	},
    	data: [{ 
    		type: "line",
    		xValueType: "dateTime",
    		yValueFormatString: "####.00",
    		//xValueFormatString: "MM-dd-YYYY hh:mm:ss TT",
    		showInLegend: true,
    		name: "Temerature",
    		dataPoints: dataPoints1
    		},
    		{				
    			type: "line",
    			xValueType: "dateTime",
    			yValueFormatString: "####.00",
    			showInLegend: true,
    			name: "Humidity" ,
    			dataPoints: dataPoints2
    	}]
    });
    
    function toggleDataSeries(e) {
    	if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
    		e.dataSeries.visible = false;
    	}
    	else {
    		e.dataSeries.visible = true;
    	}
    	chart.render();
    }
    
    function updateChart(length) {
    
    	// pushing the new values
    	var i;
    	for(i = 0; i < length; i++){
    		dataPoints1.push({
    			x: date[i],
    			y: humidorH[i]
    		});
    		dataPoints2.push({
    			x: date[i],
    			y: humidorT[i]
    		});
    		
    	}
    
    	}
    	
    	updateChart(length);
    	
    	chart.render();
    }
    </script>
    </head>
    <body>
    <div id="chartContainer" style="height: 300px; width: 100%;"></div>
    <script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
    </body>
    </html>
    
    #20358

    @thrasher7811,

    X-values can either be number or valid date-time object. In your case, its not valid date-object. Changing x: date[i], to x: new Date(date[i]), and passing date-time in one of the valid formats should work fine in this case.

    Also, please take a look at this documentation page for information on rendering chart with date-time axis.

    Still, if you are facing any issue or have other requirements please create a jsfiddle reproducing the issue you are facing so that we can understand your requirement better and help you out.

    Chart with Date Time axis

    ___________
    Indranil Deo
    Team CanvasJS

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

You must be logged in to reply to this topic.