There are 2 JavaScript source files included in the downloaded zip file.
Download CanvasJS StockChart Library from here. Extract the downloaded file and put the content in the same folder as the html file.
You can refer / include CanvasJS StockChart library to HTML file using src attribute in the <script> tag.
We recommend you to include compressed version for production environment, while you can continue to use uncompressed in development machine.
<head> <script type="text/javascript" src="canvasjs.stock.min.js"></script> </head>
Create an HTML file in the same directory as library and copy the following code into it.
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://cdn.canvasjs.com/canvasjs.stock.min.js"></script>
<script type="text/javascript">
window.onload = function () {
var stockChart = new CanvasJS.StockChart("stockChartContainer",{
title:{
text:"CanvasJS StockChart"
},
charts: [{
data: [{
type: "spline",
dataPoints: dataPoints
}]
}]
});
stockChart.render();
}
var limit = 365; //increase number of dataPoints by increasing this
var x = new Date(2019, 00, 00), y = 1000;
var dataPoints = [];
for (var i = 0; i < limit; i += 1) {
dataPoints.push({ x: x, y: y });
x = new Date(x.setDate(x.getDate()+1))
y += Math.round((Math.random() * 10 - 5));
}
</script>
</head>
<body>
<div id="stockChartContainer" style="height: 400px; width: 100%;"></div>
</body>
</html>
Install CanvasJS StockCharts Package from NPM package manager.
npm install @canvasjs/stockcharts
As CanvasJS StockCharts package is installed, it can be imported using different module formats like AMD, CommonJS, etc.
import CanvasJS from '@canvasjs/stockcharts';
Define a div (stockchart-container) where stockchart has to be rendered.
<div id="stockChartContainer"></div>
Create stockchart by passing the container-id of the div that you created in the previous step and stockchart-options. Once the stockchart is created, render the stockchart by calling stockChart.render();
//Create StockChart
var dataPoints = [];
var stockChart = new CanvasJS.StockChart("stockChartContainer",{
title:{
text:"CanvasJS StockChart"
},
charts: [{
data: [{
type: "spline",
dataPoints: dataPoints
}]
}]
});
var limit = 365; //increase number of dataPoints by increasing this
var x = new Date(2019, 00, 00), y = 1000;
for (var i = 0; i < limit; i += 1) {
dataPoints.push({ x: x, y: y });
x = new Date(x.setDate(x.getDate()+1))
y += Math.round((Math.random() * 10 - 5));
}
// Render StockChart
stockChart.render();
Save the file and open it in browser. A Basic Stock Chart should render on your browser.
You can easily integrate CanvasJS StockCharts with server side technologies like ASP.NET MVC, PHP, Spring MVC, JSP and frameworks like React, Angular, Vue.js, etc.
If you can’t see the StockChart being rendered, please check browser console (Shortcut – Ctrl + Shift + J) for any error.
If you need further help feel free to post on our support forum at https://canvasjs.com/forums/
Server Side Technologies |
Front End Technologies |
Contact |
|
|---|---|---|---|
| ASP.NET MVC Charts | JavaScript Charts | FAQs | |
| PHP Charts | jQuery Charts | Sales Enquiries | |
| Spring MVC Charts | React Charts | Support Forum | |
| JSP Charts | Angular Charts | Careers | |
| JavaScript StockCharts | |||
Privacy Policy © fenopix