Home › Forums › Feature Requests & Feedback › Simplify plotting with CanvasJS even further

Simplify plotting with CanvasJS even further

Viewing 4 posts - 1 through 4 (of 4 total)
  • March 14, 2019 at 3:13 pm #24647

    mr.marc

    I have two files in a folder on my desktop. One is called HTML.html and the other is called plots.js which in the future will contain all the CanvasJS JavaScript functions for plotting. This is the code each of these files contain today:

    HTML.html 

    <!DOCTYPE html>
<html>
<head>
<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
<script type="text/javascript" src="plots.js"></script>
<script>
window.onload = function(){var data = [{type: "line", dataPoints: 
                               [
				{ x: 1, y: 450 },
				{ x: 2, y: 414 },
				{ x: 3, y: 520 },
				{ x: 4, y: 460 },
				{ x: 5, y: 450 }
			       ]
		}];
		LineChart(data);
	}
</script>
</head>
<body>

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

</body>
</html>

    plots.js 

    function LineChart(chartData){
	var chart = new CanvasJS.Chart("chartContainer", {
		theme: "dark1", //"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: 1,
			maximum: 5.1, 
			interval: 1,
			gridThickness: 0.5
		},
		data: chartData
	});
	chart.render();
}

    When I click on HTML.html the canvasJS line chart is successfully created and opened in the webbrowser however I dont like all the ad hoc specific canvasJS code in the html file. I want the code in the html file to be as minimal and lean and mean as possible because I am used to high order programming languages where intent is enough to run code.

    Preferably I want the HTML.html file to look something like this: 

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

<script>
var data = { 450, 414, 520, 460, 450 } ; 
LineChart(data);
</script>

</head>
<body>

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

</body>
</html>

    The basic idea is that plots.js contains all the different types of CanvasJS high order JavaScript plotting functions that can be called with one single command from a HTML file with the data passed into the JavaScript function as a parameter. To keep it simple I think it is easier that users manually edit the plots.js file if they want to change plotting options instead of passing in plotting options as JavaScript function parameters because of the huge amount of CanvasJS plotting options.

    Note also that I have changed how the data enters the CanvasJS LineChart javascript function. For a basic Line Chart in CanvasJS I dont think the user want to be bothered with specifying x-values like this: [ { x: 1, y: 450 }, { x: 2, y: 414 etc etc }]. A high order CanvasJS LineChart java script function should understand by itself that a data array like this { 450, 414 } means [ { x: 1, y: 450 }, { x: 2, y: 414 }]. I want to keep things as simple as possible.

    Now to my question: Can this be done with canvasJS?

    • This topic was modified 5 years, 8 months ago by mr.marc. Reason: fixed mistake
    March 14, 2019 at 5:38 pm #24651

    Indranil

    @mr-marc,

    You can achieve the above requirement by parsing the dataPoints to the format accepted by CanvasJS before passing it to the chart options.

    Please take a look at this Sample Project.

    ___________
    Indranil Deo,
    Team CanvasJS

    March 14, 2019 at 8:00 pm #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.

    March 19, 2019 at 10:44 pm #24690

    Indranil

    @mr-marc,

    It seems to be working fine. Kindly share the sample project reproducing the issue over Google-Drive or Onedrive so that we can run it locally at out end, understand the scenario better and help you out.

    ___________
    Indranil Deo,
    Team CanvasJS

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

You must be logged in to reply to this topic.