Home › Forums › Chart Support › Multiple Chart with Data from csv-file › Reply To: Multiple Chart with Data from csv-file
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