Forum Replies Created

Viewing 1 post (of 1 total)
  • Author
    Posts
  • in reply to: Simplify plotting with CanvasJS even further #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 1 post (of 1 total)