Highcharts instance tutorial 2: generate a pie chart based on php and mysql.

Highcharts instance tutorial 2: generate a pie chart based on php and mysql.

Last time, we analyzed the example of generating a line chart using highcharts combined with php and mysql. This time, we used the technology cto website search engine traffic as an example to generate a pie chart using highcharts.
A pie chart is usually used when we need to intuitively display the proportion of each part. For example, we need to calculate the traffic ratio of various search engines.
Step 1: Create a database to save the pv of each search engine
Create table 'pie '(
'Id' int (10) not null AUTO_INCREMENT,
'Title' varchar (30) not null,
'Pv' int (10) not null,
Primary key ('id ')
) ENGINE = MyISAM AUTO_INCREMENT = 7 default charset = utf8;

Step 2: Write php code to get data and convert it to the data format that highcharts can render. highcharts can parse data in json format, for example: [['Baidu ', 120], ['Google ', 86];
Include_once ('connect. php ');
$ Res = mysql_query ("select * from pie ");
While ($ row = mysql_fetch_array ($ res )){
// This indicates the data to be highlighted by default, and we can leave it empty.
If ($ row ['id'] = 1 ){
$ Arr1 [] = array (
"Name" => $ row ['title'],
"Y" => intval ($ row ['pv']),
"Sliced" => true,
"Selected" => true
);
} Else {
$ Arr [] = array (
$ Row ['title'], intval ($ row ['pv'])
);
}
}
// Merge Arrays
$ Arrs = array_merge ($ arr1, $ arr );
$ Data = json_encode ($ arrs );
Note that intval must be added to convert numbers, otherwise highcharts will not recognize them;




This article from the technical CTO: http://www.jscto.net, reprint please indicate the source.

Use highcharts in combination with js and mysql to generate a bar chart

Let me tell you your thoughts. You have to explore for the rest, increase your experience, and increase your posture ~~~
After php reads data, the organization data is in json format and called by the client. The format is as follows:
Category: ["School of Management", '... "]
Data: [[136,215], [147,196],...]
The client first calls Highcharts. chart to construct a chart and sets the basic type to a horizontal group stacked chart.
Js loads data through ajax, and sets the data to the category and series of the icon;
Chart. redraw.

Take a look at all the samples of highcharts first. If that is more suitable for you, copy it directly and find a way to modify the data.

 
How to add a click event to a pie chart by using Highcharts to generate a pie chart, such as clicking a slice in the pie chart to jump to a link

A sample is written.
Jsfiddle.net/uep3T/3/
Replace alert in the plotoption with the jump statement.