Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Multiple sensor data CanvasJS charts from CSV with deep object cloning to allow a common default chart template object variable
<!-- for https://canvasjs.com/forums/topic/zooming-on-graph-changes-it-to-another-graph/ -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sensors Data</title>
<style>
body { background-color: black; }
#tempContainer, #humidContainer, #pressContainer {height: 520px; width: 100%; }
table { width:520px; height:520px; color: white; border: 1px solid white;
margin-left: auto; margin-right: auto; }
tr td { width: 50%; border: 1px solid white; text-align: center; }
</style>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="canvasjs.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
type: "GET",
url:"tempHumidPressure.csv",
dataType: "text",
success: function(data) {processCSV(data);}
});
});
/*TODO: Add highest and lowest values to table ajax get here.*/
function processCSV(allText) {
var chart_defaults={ interactivityEnabled: true,
zoomEnabled: true,
backgroundColor: "black",
title:{ fontColor: "white",
fontSize: 25 },
axisX:{ labelFontColor: "white",
titleFontColor: "white",
titleFontSize: 20,
labelFontSize: 15 },
axisY:{ labelFontColor: "white",
titleFontColor: "white",
titleFontSize: 20,
labelFontSize: 15,
gridThickness: 0.25,
interlacedColor: "#06060d",
includeZero: false },
data:[{ type: "line",
xValueType: "dateTime",
lineThickness: 1 }] };
var allLinesArray = allText.split("\n");
if( allLinesArray.length > 0 ){
var points_temp = [];
var points_humid = [];
var points_press = [];
for (var i = 0; i <= allLinesArray.length-1; i++) {
//rowData: Date,Temp,Humid,Pressure
//rowData: [0] ,[1] , [2] , [3]
var rowData = allLinesArray[i].split(",");
if(allLinesArray[i].charAt(0) != "#" && rowData && rowData.length > 1) {
points_temp.push( { x: new Date(Date.parse(rowData[0])), y:parseFloat(rowData[1]) });
points_humid.push({ x: new Date(Date.parse(rowData[0])), y:parseFloat(rowData[2]) });
points_press.push({ x: new Date(Date.parse(rowData[0])), y:parseFloat(rowData[3]) });
}
}
var defaults_temp = jQuery.extend(true, {}, chart_defaults);
var chart_temp = new CanvasJS.Chart(tempContainer, defaults_temp);
chart_temp.options.title.text = "Temprature Readings";
chart_temp.options.axisY.title = "Degrees Celsius (°C)";
chart_temp.options.data[0].dataPoints = points_temp;
chart_temp.render();
var defaults_humid = jQuery.extend(true, {}, chart_defaults);
var chart_humid = new CanvasJS.Chart(humidContainer, defaults_humid);
chart_humid.options.title.text = "Humidity Readings";
chart_humid.options.axisY.title = "Relative Humidity (%)";
chart_humid.options.data[0].dataPoints = points_humid;
chart_humid.render();
var defaults_press = jQuery.extend(true, {}, chart_defaults);
var chart_press = new CanvasJS.Chart(pressContainer, defaults_press);
chart_press.options.title.text = "Pressure Readings";
chart_press.options.axisY.title = "Hectopascals (hPa)";
chart_press.options.data[0].dataPoints = points_press;
chart_press.render();
}
}
</script>
</head>
<body>
<div id="tempContainer"></div>
<br><hr><br>
<div id="humidContainer"></div>
<br><hr><br>
<div id="pressContainer"></div>
<br><hr><br>
<table>
<tr> <td rowspan=2>Highest temprature</td> <td id="maxTempDate"> </td> </tr>
<tr> <td id="maxTemp"> </td> </tr>
<tr> <td rowspan=2>Lowest temprature</td> <td id="minTempDate"> </td> </tr>
<tr> <td id="minTemp"> </td> </tr>
<tr> <td rowspan=2>Highest humidity</td> <td id="maxHumidDate"></td> </tr>
<tr> <td id="maxHumid"> </td> </tr>
<tr> <td rowspan=2>Lowest humidity</td> <td id="minHumidDate"></td> </tr>
<tr> <td id="minHumid"> </td> </tr>
<tr> <td rowspan=2>Highest pressure</td> <td id="maxPressDate"></td> </tr>
<tr> <td id="maxPress"> </td> </tr>
<tr> <td rowspan=2>Lowest pressure</td> <td id="minPressDate"></td> </tr>
<tr> <td id="minPress"> </td> </tr>
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment