Use Highcharts in combination with PHP and Mysql to generate a pie chart

Www.helloweba.comview-blog-159.html this article will be combined with the actual, use PHP to read the data in the Mysql DATA table, and the obtained data according to the requirements of the output to the front-end JS, and then through the configuration call Highcharts chart library to generate a pie chart. 1. For better explanation, create a chart_pie table in the Mysql database in the instance.

Http://www.helloweba.com/view-blog-159.html this article will be combined with the actual, use PHP to read the data in the Mysql DATA table, and the obtained data according to the requirements of the output to the front-end JS, and then through the configuration call Highcharts chart library to generate a pie chart. 1. For better explanation, create a chart_pie table in the Mysql database in the instance.

Http://www.helloweba.com/view-blog-159.html

In this article, we will use PHP to read data from the Mysql DATA table, output the obtained data to the front-end JS as required, and then call the Highcharts chart library through configuration to generate a pie chart.

1. Preparation

For better understanding, a chart_pie table is created in the Mysql database in the instance to indicate the access volume of each search engine. The table contains three fields: id, title, and pv, id is an auto-incrementing integer and primary key. title indicates the name of the search engine, and pv indicates the access volume. Related data has been preset in the chart_pie table ,:

2. PHP

In the pie. php file, write the following code:

 
Include_once ('connect. php'); // connect to the database
$ Res = mysql_query ("select * from chart_pie ");
While ($ row = mysql_fetch_array ($ res )){
$ Arr [] = array (
$ Row ['title'], intval ($ row ['pv'])
);
}
$ Data = json_encode ($ arr );

In the code, use the native PHP method to query mysq data, save the query result set to an array $ arr, and convert the array for frontend js calls.

3. Javascript

By configuring Highcharts, you can generate a beautiful pie chart. For details, see the code and comments. If you do not know what Highcharts is, please refer to this site (helloweba.com

 
Var chart;
$ (Function (){
Chart = new Highcharts. Chart ({
Chart :{
RenderTo: 'chart _ pie ', // the pie chart is associated with the html element id value.
DefaultSeriesType: 'pie', // The default chart type is pie chart.
PlotBackgroundColor: '# ffc', // you can specify the background color of the chart area.
PlotShadow: true // sets the shadow.
},
Title :{
Text: 'search engine statistical analytics '// chart title
},
Credits :{
Text: 'helloweba. com'
},
Tooltip :{
Formatter: function () {// format the prompt message when the mouse slides to the image prompt box
Return''+ This. point. name +': '+
TwoDecimal (this. percentage) + '% ';
}
},
PlotOptions :{
Pie :{
AllowPointSelect: true, // select allowed. Click the selected slice area to separate the selected slice areas.
Cursor: 'pointer ', // it turns into a hand shape when the mouse points to a sector (click it)
// ShowInLegend: true, // if you want to display the legend, you can set this item to true
DataLabels :{
Enabled: true,
Color: '# 000000', // data display color
ConnectorColor: '#999', // set the connection line color of the data domain sector
Style :{
FontSize: '12px '// data display size
},
Formatter: function () {// format data
Return''+ This. point. name +': '+
TwoDecimal (this. percentage) + '% ';
}
}
}
},
Series: [{// data column
Name: 'search engine ',
Data:
  // The core data column is the data read by php and parsed into JSON
}]
});
});

In the above Code, the core data comes from the json data converted by php in pie. php: $ data. The format of the converted JSON data is as follows:

 
[["\u767e\u5ea6",1239],["google",998],["\u641c\u641c",342],["\u5fc5\u5e94",421], 
["\u641c\u72d7",259],["\u5176\u4ed6",83]]  

Don't worry, Highcharts will automatically parse the JSON data and generate a percentage of data.

In fact, the pie chart generated by Highcharts can also set the default initial selected slice, that is, the default selected slice is separated from the whole circle to highlight it. The default data format is as follows:

 
[{"name":"\u767e\u5ea6","y":1239,"sliced":true,"selected":true},["google",998], 
["\u641c\u641c",342],["\u5fc5\u5e94",421],["\u641c\u72d7",259],["\u5176\u4ed6",83]]  

Note: {"name": "\ u767e \ u5ea6", "y": 1239, "sliced": true, "selected": true }, how can I get this string in PHP? This requires modifying part of the php code in pie. php:

 
While ($ row = mysql_fetch_array ($ res )){
If ($ row ['id'] = 1 ){
$ Arr1 [] = array (
"Name" => $ row ['title'],
"Y" => intval ($ row ['pv']),
"Sliced" => true, // default Separation
"Selected" => true // selected by default
);
} Else {
$ Arr [] = array (
$ Row ['title'], intval ($ row ['pv'])
);
}
}
// Merge Arrays
$ Arrs = array_merge ($ arr1, $ arr );
$ Data = json_encode ($ arrs );

When the id is 1 in the result set of loop traversal, we set this item to the selected slice area by default to build an array $ arr1; otherwise, we will build another array $ arr, merge the two arrays and convert the merged arrays into json data for Highcharts to call.

In addition, if you want to display the percentage of formatted data, you can use this. percentage. Highcharts will automatically convert the integer to the percentage. If you want to display the data volume, use this. y directly.

Usage percentage:

 
Formatter: function () {// format data
Return''+ This. point. name +': '+ TwoDecimal (this. percentage) +' % ';
}

Use actual data:

 
Formatter: function () {// format data
Return''+ This. point. name +': '+ This. y;
}