Forum Replies Created by thrasher7811

Viewing 1 post (of 1 total)
  • in reply to: Loading Data to Canvas #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>
    
Viewing 1 post (of 1 total)