highcharts example tutorial 2: combine php and mysql to generate a pie chart, highcharts example tutorial_PHP tutorial

Highcharts Example Tutorial 2: Combining PHP and MySQL to generate a pie chart, highcharts Example Tutorial

Last time we analyzed an example of using HighCharts to combine PHP and MySQL to generate a line chart. This time We take the technical cto website search engine traffic as an example and use highcharts to generate a pie chart.
Pie charts are usually used when we need to visually display the proportion of each part. For example, we need to count the proportion of traffic from major search engines.
Step 1: Create a database to save the number of PVs for each search engine traffic
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 obtain data and convert it into a data format that highcharts can render. Highcharts can parse data in json format, such as: [ ['Baidu', 120], ['Google', 86] ];
include_once('connect.php');
$res = mysql_query("select * from pie");
while($row = mysql_fetch_array($res)){
//This indicates the data that needs to be highlighted by default, and we don’t need to write
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);
It is important to note that numbers must be converted to intval, otherwise highcharts will not recognize them;




This article comes from the technical CTO: http://www.jscto.net. Please indicate the source when reprinting.

Let me tell you the idea, and you have to explore the rest by yourself to gain experience and improve your posture~~~
After php reads the data, it organizes the data into json format, which is called by the client. The format is as follows:
category: ["School of Management",'....."]
data: [ [136,215], [147,196], .....]
Client, first call the Highcharts.chart construct Chart, set the basic shape to a horizontal grouped stacked chart
js loads data through ajax, and set the data to the category, series of the icon;
chart.redraw.

Details are yours First, take a look at all the samples of highcharts. Which one is more suitable for you? Just copy it and find a way to modify the data.

Write a sample
jsfiddle.net/uep3T/3/
Just replace the alert in plotoption with a jump statement