In this article, we will see how to use highcharts library.
But first of all, what's highcharts ?
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
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.