Home forums Feature Requests & Feedback Simplify plotting with CanvasJS even further

This topic contains 2 replies, has 2 voices, and was last updated by  mr.marc 4 days, 1 hour ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #24647

    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://canvasjs.com/assets/script/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://canvasjs.com/assets/script/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 4 days, 6 hours ago by  mr.marc. Reason: fixed mistake
    #24651

    @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

    #24653

    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://canvasjs.com/assets/script/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 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.