Multiple Chart with Data from csv-file

This topic has 5 replies, 2 voices, and was last updated 2 years, 1 month ago by Vishwas R.

Viewing 6 posts - 1 through 6 (of 6 total)

Author

Posts

April 26, 2018 at 5:44 pm #20470

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.

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

April 26, 2018 at 6:14 pm #20471

Vishwas R

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

April 27, 2018 at 4:28 pm #20482

MAtahualpa55

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.

April 27, 2018 at 5:49 pm #20485

Vishwas R

Marco,

It seems to be working fine across all browsers. Please check the screenshot below.
CanvasJS Candlestick chart from CSV

Can you kindly share OS & Browser you are using and its version so that we can look into it and help you out?

—
Vishwas R
Team CanvasJS

May 3, 2018 at 4:20 pm #20575

MAtahualpa55

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!!!

regards,
Marco

May 4, 2018 at 9:52 am #20590

Vishwas R

Marco,

Can you kindly create jsfiddle along with sample data, so that we can look into the issue and help you out?

—
Vishwas R
Team CanvasJS

Author

Posts

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

Front End Technology Samples

Server Side Technology Samples

FORUMS