Forum Replies Created by mr.marc

Viewing 1 post (of 1 total)
  • March 14, 2019 at 8:00 pm in reply to: Simplify plotting with CanvasJS even further #24653

    mr.marc

    Thank you for your very good code. Two question:

    There are 5 observations and the first observation should be index 1 and not zero on the x-axis in your plot. How to solve this? I think it is a JavaScript nuisance to assume that the first value in an array has index zero. Plot

    So the x-axis should be from 1 to 5 because we have 5 observations.

    Secondly, why do these two HTML and JavaScript files not work?. The two files are in the same folder on my desktop.

    Index.html 

    <!DOCTYPE html>
<html>
<head>
<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
<script type="text/javascript" src="renderchart.js"></script>

<script>

window.onload = plot() ; 

</script>

</head>
<body>
<div id="chartContainer" style="width: 100%; height: 400px">
</body>
</html>

    renderchart.js 

    function renderChart(extDps){
	var dps = [];
	for(var i = 0; i < extDps.length; i++) {
		dps.push({y: extDps[i]});
	}
	var chart = new CanvasJS.Chart("chartContainer", {
		theme: "light2", //"light1", "dark1", "dark2"
		title: { 
			text: "Price chart for crypto currency: ", 
			fontSize: 22,
			fontFamily: "arial",
			fontWeight: "lighter",				
			horizontalAlign: "left"
		},
		axisY: { 
			includeZero: false,			
			gridThickness: 0.5
		},
		axisX: {
			// minimum: 0,
			// maximum: 5.1, 
			interval: 1,
			gridThickness: 0.5
		},
		data: [{
			type: "line",
			dataPoints: dps
		}]
	});
	chart.render();
}

function plot()
{
var dataPoints = [450,414,520,460,450];
renderChart(dataPoints);
}

    For consistency I prefer two keep all JavaScript functions in a .js file and all HTML in a .html file.

Viewing 1 post (of 1 total)