SharePoint Charts with HighCharts

HighCharts for SharePoint

Overview

• HighCharts is an interactive JavaScript based Charts.
• It is configured with JSON based data
• HighCharts can be used to populate charts based on SharePoint list data.
• It can be dynamically updated
• It can also link multiple lists and provide a drill down chart.

Configuring for SharePoint

• Refer Jquery and other libraries to read and manipulate SharePoint data.
• Refer HighCharts.js. Additionally Drilldown.js or Treeview.js or any other related HighCharts libraries may be required based on the type of chart. Details are available in the HighCharts website based on each chart type.
• Generally HighChart variable as series array. It has data variable which holds chart JSON data.
• Read and load SharePoint list data.
• Build the data string in the chart format.
• Convert the data to JSON object and initialize HighChart.
• List data can be reloaded with setTimeout function for constant reload.

Reference : https://www.highcharts.com/