Easily Add StockCharts to your Dashboards using CanvasJS

[vishwasr]

Data visualization has now risen to ubiquity in the realms of Business Intelligence and data journalism. All those infographics you see? Data visualization in action. Charts are usually used to analyze trends and patterns in data sets. Let's say you have been recording the sales figures in Excel for the past three years. Using charts, you can easily tell which year had the most sales and which year had the least. You can also draw charts to compare set targets against actual achievements.

While charts are used for analysis, few advanced features are required for stock data analysis – generally called as StockChart. This article briefs about how to create StockChart & customize it to match it with website theme.

How to Create StockChart?

• Download CanvasJS StockChart from their website.
• Include canvasjs.stock.min.js in your dashboard.
• Create StockChart, add dataPoints & render it.

var dataPoints = [];
var stockChartOptions = {
  charts: [{
    data: [{
      type: "spline",
      dataPoints: dataPoints
    }]
  }]
};
var stockChart = new CanvasJS.StockChart("stockChartContainer", stockChartOptions);
 
//Reading data from JSON
$.getJSON("https://api.npoint.io/5ac670dd66db71dffa1f", function(data) {  
  for(var i = 0; i < data.length; i++){
    dataPoints.push({x: new Date(data[i].date), y: Number(data[i].close)});
  }
  stockChart.render();
});
 

Checkout live example @ StackBlitz.

Customizing StockChart
CanvasJS provides options to change the colors of data, title, labels and all other elements along with customizing font properties like font-family, font-size, font-color, font-weight. These customization options help in making StockChart match with dashboard font and color properties. Refer to the documentation for complete list of customization options available.

You can further have multiple charts (charts – as termed by the library which developers generally call as panels or panes) and synchronizes tooltip & crosshair across them automatically. Checkout this page for demo.