hello,
I created a graph with a csv import bme280 data. I can not get all the data displayed.
I do not understand
thancks for your help !
Paladyn
Source
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″>
<script type=”text/javascript”>
// TEMPERATURE **********************************************
window.onload = function() {
var dataPoints = [];
var chart = new CanvasJS.Chart(“chartContainer”, {
animationEnabled: true,
exportEnabled: true,
theme: “light”,
title: {
text: “Temperatures Raspberry TEST 3”
},
axisX:{
labelFontSize: 12,
},
axisY:[{
title: “Temp”,
lineColor: “#C24642”,
tickColor: “#C24642”,
labelFontColor: “#C24642”,
titleFontColor: “#C24642”,
labelFontSize: 16,
suffix: “c”,
minimum: -15,
maximum: 50,
},
{
title: “Hum”,
lineColor: “#369EAD”,
tickColor: “#369EAD”,
labelFontColor: “#369EAD”,
titleFontColor: “#369EAD”,
labelFontSize: 16,
suffix: “%”,
minimum: 40,
maximum: 100,
},
],
axisY2: [{
title: “Pres”,
lineColor: “#7F6084”,
tickColor: “#7F6084”,
labelFontColor: “#7F6084”,
titleFontColor: “#7F6084”,
labelFontSize: 16,
suffix: “Hpa”,
minimum: 990,
maximum: 1100,
},
],
data: [{
toolTipContent: “{z} c”,
type: “spline”,
axisYIndex: 0,
name: “Temp”,
color: “#C24642”,
showInLegend: true,
dataPoints: dataPoints
},
{
toolTipContent: “{p} %”,
type: “spline”,
axisYIndex: 0,
name: “Hum”,
color: “#369EAD”,
showInLegend: true,
dataPoints: dataPoints
},
{
toolTipContent: “{y} bar”,
type: “spline”,
name: “Pres”,
color: “#7F6084”,
axisYType: “secondary”,
axisYIndex: 2,
showInLegend: true,
dataPoints: dataPoints
},
]
});
$.get(“../data.csv”, getDataPointsFromCSV);
chart.render();
//CSV Format
function getDataPointsFromCSV(csv) {
var points;
var csvLines = csv.split(/[\r?\n|\r|\n]+/);
for (var i = 1; i < csvLines.length; i++) {
if (csvLines[i].length > 0) {
points = csvLines[i].split(“;”);
dataPoints.push({
label: points[0],
z: parseFloat(points[1]),
p: parseFloat(points[3]),
y: parseFloat(points[2]),
});
}
}
chart.render();
}
}
</script>
</head>
<body>
<div id=”chartContainer” style=”height: 450px; width: 100%;”></div>
<script src=”jquery.min.js”></script>
<script src=”canvasjs.min.js”></script>
</body>
</html>
.
