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://cdn.canvasjs.com/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!!!
regards, Marco
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.