Home › Forums › Chart Support › Multiple Chart with Data from csv-file › Reply To: Multiple Chart with Data from csv-file
Hi Vishwas R, thank you very much. I managed to incorporat the line and candlestick chart. Unfortunatley it won’t work for my data.
<!DOCTYPE HTML> <html> <head> <script> window.onload = function () { var thedataPoints = []; var chart = new CanvasJS.Chart("chartContainer", { animationEnabled: false, theme: "light2", // "light1", "light2", "dark1", "dark2" exportEnabled: true, title: { text: "EURUSD in 2018" }, subtitles: [{ text: "Weekly Chart" }], axisX: { interval: 1, valueFormatString: "DD-MM" }, axisY: { includeZero: false, title: "Price" }, toolTip: { content: "Date: {x}<br /><strong>Price:</strong><br />Open: {y[0]}, Close: {y[3]}<br />High: {y[1]}, Low: {y[2]}" }, data: [{ type: "candlestick", showInLegend: true, name: "EURUSD", //yValueFormatString: "0.0000", dataPoints: thedataPoints }, /*{ type: "line", showInLegend: true, name: "The test", //yValueFormatString: "0.0000", dataPoints: [ {x: new Date(2018,1,7), y: 0.6}, ] }*/ ] }); $.get("EURUSD1440.csv", getDataPointsFromCSV); function getDataPointsFromCSV(csv) { var csvLines = points = []; csvLines = csv.split(/\r?\n|\r/); for (var i = 0; i < csvLines.length; i++) { if (csvLines[i].length > 0) { points = csvLines[i].split(","); thedataPoints.push({ x: new Date( parseInt(points[0].split("-")[0]), parseInt(points[0].split("-")[1]), parseInt(points[0].split("-")[2]) ), y: [ parseFloat(points[1]), parseFloat(points[2]), parseFloat(points[3]), parseFloat(points[4]) ] }); } } //alert(thedataPoints.length); chart.render(); } } </script> </head> <body> <div id="chartContainer" style="height: 370px; width: 100%;"></div> <script src="https://cdn.canvasjs.com/canvasjs.min.js"></script> <script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script> </body> </html>
and my data looks like this: 2018-01-04,0.53690,0.53690,0.53690,0.53690 2018-01-05,0.53660,0.53660,0.53660,0.53660 2018-01-06,0.53650,0.53650,0.53650,0.53650 2018-01-07,0.53680,0.53680,0.53680,0.53680 2018-01-08,0.53710,0.53710,0.53710,0.53710 2018-01-11,0.53710,0.53710,0.53710,0.53710 2018-01-12,0.53710,0.53710,0.53710,0.53710 2018-01-13,0.53730,0.53730,0.53730,0.53730 2018-01-14,0.53720,0.53720,0.53720,0.53720 2018-01-15,0.53760,0.53760,0.53760,0.53760 2018-01-18,0.53790,0.53790,0.53790,0.53790 2018-01-19,0.53770,0.53770,0.53770,0.53770 2018-01-20,0.53810,0.53810,0.53810,0.53810
am I missing something there? The chart is created, the candlestickchart is NOT displayed. If i change the data and use it from the netflix example on this site, my code does work.