You must be logged in to post your query.
Home › Forums › Chart Support › import csv and display
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>
@paladyn,
Please take a look at this documentation page for step by step tutorial on rendering chart using data from CSV.
In case you are still facing the issue, please create a JSFiddle with an appropriate data source, reproducing the same so that we can look into the code, understand it better and help you out.
— Shashi Ranjan Team CanvasJS
You must be logged in to reply to this topic. Login/Register