FORUMS

Select any forum below to ask question

Home › Forums › Chart Support › Loading Data to Canvas › Reply To: Loading Data to Canvas

April 16, 2018 at 4:16 pm #20340

thrasher7811

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>