Create single graph from 2 CSV files - CanvasJS
An attempt to create a single graph showing data from 2 CSV files
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();
}
});