Create single graph from 2 CSV files - CanvasJS

An attempt to create a single graph showing data from 2 CSV files

by Stuart Hanlon

HTML

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->

<div id="GP01" style="height: 360px; width: 100%;"></div>

<p>
<a href="http://cuedup.biz/vgraphing/demoui/gp01b.HTML" Target="_blank">Result of this attempt on my server</a>
<p>
<a href="http://www.cuedup.biz/vgraphing/demoui/" target="_blank">The working graphs with all the data are here, my aim is to combine all the heating demand and boiler call events into the save graphs as the thermostat temperatures</a><p>
<a href="http://www.cuedup.biz/vgraphing/demoui/test.js" target="_blank">Here is the Java file</a></br><p>
<a href="http://www.cuedup.biz/vgraphing/demoui/GP01.CSV" target="_blank">This is the temperature data</a><p>

<a href="http://www.cuedup.biz/vgraphing/demoui/BT01.CSV" target="_blank">This is the fake heating demand data, the real data is currently only either 0 or 1</a><p>

JavaScript

$(document).ready(function (){

	var dataPoints1 = [];
	var dataPoints2 = [];

	
	function processData1(allText) {
		var allLinesArray = allText.split('\n');
		if(allLinesArray.length>0){
			
			for (var i = 0; i <= allLinesArray.length-1; i++) {
				var rowData = allLinesArray[i].split(',');
				if ( rowData.length >= 2)
					dataPoints1.push({label:rowData[0],y:parseInt(rowData[1])});
			}
		}
		requestTempCsv();
	}

	function requestTempCsv(){
		$.ajax({
			type: "GET",
			url: "http://www.cuedup.biz/vgraphing/demoui/GP01.csv",
			dataType: "text",
			success: function(data) {processData2(data);}
		});
	}

	function processData2(allText) {
		var allLinesArray = allText.split('\n');
		if(allLinesArray.length>0){
			
			for (var i = 0; i <= allLinesArray.length-1; i++) {
				var rowData = allLinesArray[i].split(',');
				if ( rowData.length >= 2)
					dataPoints2.push({label:rowData[0],y:parseInt(rowData[1])});
				
			}
			drawChart(dataPoints1 , dataPoints2 );
		}
	}

	$.ajax({
		type: "GET",
		url: "http://www.cuedup.biz/vgraphing/demoui/BT01.csv",
		dataType: "text",
		success: function(data) {processData1(data);}
	});	


	function drawChart( dataPoints1 , dataPoints2 ) {
		var chart = new CanvasJS.Chart("GP01", {
		theme: "theme2",
		title:{
			text: "Master bedroom temperature and heating demand"
		},
		data: [
		{
			type: "stepLine",
			dataPoints: dataPoints1
		},
		{
			type: "spline",
			dataPoints: dataPoints2
		}

		]
		});

		chart.render();
	}
});