Home › forums › Chart Support › Multiple Chart with Data from csv-file
Dear all, I’ve taken the code on this webpage for a candle and line chart and modified it to include a time-series from a CSV-file only for the candle stick chart. This is my code which unfortunately does not work:
<!DOCTYPE HTML> <html> <head> <script> window.onload = function () { var thedataPoints = []; var chart = new CanvasJS.Chart("chartContainer", { animationEnabled: true, theme: "light2", // "light1", "light2", "dark1", "dark2" exportEnabled: true, title:{ text: "EURUSD - 2018" }, subtitles: [{ text: "All Prices are in USD" }], axisX: { valueFormatString: "MMM" }, axisY: { includeZero:false, prefix: "$", title: "Price" }, axisY2: { prefix: "$", suffix: "bn", title: "Revenue & Income", tickLength: 0 }, toolTip: { shared: true }, legend: { reversed: true, cursor: "pointer", itemclick: toggleDataSeries }, data: [{ type: "candlestick", showInLegend: true, name: "Stock Price", yValueFormatString: "$#,##0.00", xValueFormatString: "MMMM", dataPoints: thedataPoints }, { type: "line", showInLegend: true, name: "Net Income", axisYType: "secondary", yValueFormatString: "$#,##0.00bn", xValueFormatString: "MMMM", dataPoints: [ { x: new Date(2016, 2), y: 1.510 }, { x: new Date(2016, 5), y: 2.055 }, { x: new Date(2016, 8), y: 2.379 }, { x: new Date(2016, 11), y: 3.568 } ] }, { type: "line", showInLegend: true, name: "Total Revenue", axisYType: "secondary", yValueFormatString: "$#,##0.00bn", xValueFormatString: "MMMM", dataPoints: [ { x: new Date(2016, 2), y: 5.382 }, { x: new Date(2016, 5), y: 6.436 }, { x: new Date(2016, 8), y: 7.011 }, { x: new Date(2016, 11), y: 8.809 } ] }] }); $.get("EURUSD1440.csv", getDataPointsFromCSV); function getDataPointsFromCSV(csv) { var csvLines = points = []; csvLines = csv.split(/[\r?\n|\r|\n]+/); 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]) ] }); } } chart.render(); } chart.render(); function toggleDataSeries(e) { if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) { e.dataSeries.visible = false; } else { e.dataSeries.visible = true; } e.chart.render(); } } </script> </head> <body> <div id="chartContainer" style="height: 370px; width: 100%;"></div> <script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script> </body> </html>
The error is definately in row 79: $.get("EURUSD1440.csv", getDataPointsFromCSV); where I call the bespoke function. I have put in the csv file in the correct format but the error I get in my debugger is that $ is no tlinked to anything.
$.get("EURUSD1440.csv", getDataPointsFromCSV);
I am relatively new to javaScript. Can you give me a hint where I can read about this error? thank you and thank you very much for your help!
regards, Marco
Marco,
AS you are using $.get(), which is jQuery method, adding jquery to your code should work fine. Please take a look at this tutorial on getting started with jQuery.
— Vishwas R Team CanvasJS
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://canvasjs.com/assets/script/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.
It seems to be working fine across all browsers. Please check the screenshot below.
Can you kindly share OS & Browser you are using and its version so that we can look into it and help you out?
Hi Vishwas, thank you very much. The code actually worked. am Not sure what the problem was with the browser. I am having another error now which is: i would like to create a multiple chart with a candlestick chart with two scatter graphs. the code is this:
<!DOCTYPE HTML> <html> <head> <script> window.onload = function () { var regex_dot = /\./g; var regex_comma = /\,/g; var dataPoints = []; var SHPoints = []; var SLPoints = []; //alert("Order1"); var chart = new CanvasJS.Chart("chartContainer", { animationEnabled: true, zoomEnabled: true, theme: "light2", // "light1", "light2", "dark1", "dark2" exportEnabled: true, title: { text: "EURUSD in 2018" }, subtitles: [{ text: "Chart" }], axisX: { interval:1, valueFormatString: "DD-MM-YYYY" }, 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: dataPoints }, { type: "scatter", showInLegend: true, name: "Swing Highs", //yValueFormatString: "0.0000", dataPoints: SHPoints }, { type: "scatter", showInLegend: true, name: "Swing Lows", //yValueFormatString: "0.0000", dataPoints: SLPoints }] }); //alert("Order2"); $.get("OUTPUT.csv", getDataPointsFromCSV); function getDataPointsFromCSV(csv) { var csvLines = points = []; csvLines = csv.split(/[\r?\n|\r|\n]+/); // /\r?\n|\r/); for (var i = 1; i < csvLines.length; i++) { if (csvLines[i].length > 0) { points = csvLines[i].split(";"); dataPoints.push({ x: new Date( parseInt(points[0].split("-")[0]), parseInt(points[0].split("-")[1]), parseInt(points[0].split("-")[2]) ), y: [ parseFloat(points[2].replace(regex_comma,'.')), parseFloat(points[3].replace(regex_comma,'.')), parseFloat(points[4].replace(regex_comma,'.')), parseFloat(points[5].replace(regex_comma,'.')) ] }); if (points[9].length > 1){ SHPoints.push({ x: new Date( parseInt(points[0].split("-")[0]), parseInt(points[0].split("-")[1]), parseInt(points[0].split("-")[2]) ), y: [ parseFloat(points[9].replace(regex_comma,'.'))+0.1 ] }); } alert(parseFloat(points[10].replace(regex_comma,'.'))); if (points[10].length > 1){ SLPoints.push({ x: new Date( parseInt(points[0].split("-")[0]), parseInt(points[0].split("-")[1]), parseInt(points[0].split("-")[2]) ), y: [ parseFloat(points[10].replace(regex_comma,'.'))-0.1 ] }); } } } chart.render(); } } </script> </head> <body> <div id="chartContainer" style="height: 600px; width: 150%;"></div> <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script> <script src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script> </body> </html>
The problem I am having is that the scatter graphs don’t seem to take in the datapoints that I am pushing in. Where is my error? thank you very much for your help!!!
Can you kindly create jsfiddle along with sample data, so that we can look into the issue and help you out?
You must be logged in to reply to this topic.