Using highcharts library

In this article, we will see how to use highcharts library.

But first of all, what's highcharts ?
Highcharts is a charting library written in pure JavaScript, offering an easy way of adding interactive charts to your web site or web application.
We are therefore going to present as nicely as possible the results of a survey carried out with my family concerning what they drank for breakfast  .

First, we will create the 'breakfast' table which will represent the name of each drink and the number of people drinking that drink.
Then we will create an API function to fetch the information from our 'breakfast' table.
And we will end up integrating our front end using the famous 'highcharts' library.

Create a new table 'breakfast' :



Create an API function :

Create a new function of type 'Visual select'  and select 'GET' Method:


Let's try our API :
Perfect, now let's do the front end and for this example, we will use the pie chart as a template. (https://www.highcharts.com/demo/pie-semi-circle)

Wow, a lot of job, let's explain our code a bit but really don't hesitate to ask us questions
In our html, we create a div giving it the id 'wheelBreakfast'.
We import the library : https://code.highcharts.com/highcharts.js
We call our API function and we change the format of our data in order to integrate them into highchart (ArrBreakfast).
We use the highcharts library: Highcharts.chart (wheelBreakfast).

You can find a lot of information regarding options, and design on their support

Let's check the result :
Wow, a beautiful chart which displays the results of our API function.