Integrating Drupal 8 REST API with Highstock
Have a look at what exactly is Highstock?
Step 1: Create a custom module. In my case, I will be creating a module name Highstock.
Step 2: Create a highstock.info.yml file.
Step 3: Create highstock.libraries.yml file to add highstock library.
Step 4: Create Rest API Resource, which provides the input for the chart.
Highstock accept the input in the following format: It requires the array structure, within that add x-axis, y-axis data with comma separated. So while creating REST API we need to generate the output in the following format.
[ [1297987200000,204011724], [1298332800000,218135561], [1298419200000,167962942], [1298505600000,124974514], [1298592000000,95004483], [1298851200000,100768479] ]
Step 4.1: In Drupal 8, create HighstockChart.php file inside /src/Plugin/rest/resource.
Step 5: Create a highstock_chart.js file to integrate REST API output with a highstock library.
Highstock library provides various types of charts like single line series, line with marker and shadow, spline, step line, area spline etc. You can find the types of charts here https://www.highcharts.com/stock/demo.
In js, we have to call the API which gives you the JSON output. Based on type added for the chart output will be shown.
Step 6: Create a block HighstockChartBlock.php to show the chart.
Place the above block in any of your desired regions and it will display the chart like below:
Default JS provides the following properties:
Scrollbar at the bottom.
Right side menu icon will provide an option to Print chart, download chart in PNG, JPEG, SVG, and PDF format.
Mouse Hovering will give Marker with x-axis and y-axis highlighted.
Properties of Highstock Chart:
We can modify charts using those properties. I have referred to the above link and configured my charts as mentioned below:
We must add the above properties in highstock_chart.js of your custom module. After applying all properties chart will look similar to the below image.
This API is very handy when it comes to representing Complex Data structures to end users in the form of colorful charts. You should definitely pitch this one to the clients if they are still showing Data in traditional Tables, Excel sheet, etc. Hope now you can easily integrate Drupal 8 Rest API with Highstock. If you have any suggestions or queries please comment down let me try to answer.