Home forums Using CanvasJS Multiple Chart with Data from csv-file

This topic contains 5 replies, has 2 voices, and was last updated by  Vishwas R 2 months, 2 weeks ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #20470

    MAtahualpa55
    Member

    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

    #20471

    Vishwas R
    Keymaster

    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

    #20482

    MAtahualpa55
    Member

    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.

    #20485

    Vishwas R
    Keymaster

    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

    #20575

    MAtahualpa55
    Member

    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

    #20590

    Vishwas R
    Keymaster

    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

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

You must be logged in to reply to this topic.