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.