PHP + mysql + Highcharts generate pie chart _ jquery

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.

Mysql

First, create a chart _ pie table as the statistical data.

-- TABLE structure 'chart _ pie '-- create table if not exists 'chart _ pie' ('id' int (11) not null AUTO_INCREMENT, 'title' varchar (30) not null, 'pv' int (10) not null, primary key ('id') ENGINE = MyISAM default charset = utf8 AUTO_INCREMENT = 7; -- data in the table to be stored 'chart _ pie '-- insert into 'chart _ pie' ('id', 'title', 'pv') VALUES (1, 'Baidu ', 1239), (2, 'Google ', 998), (3, 'search', 342), (4, 'bing', 421), (5, 'sogou ', 259), (6, 'others', 83 );

PHP

In pie. php, We need to generate data for the front-end call:

$ Query = mysql_query ("select * from chart_pie"); while ($ row = mysql_fetch_array ($ query) {$ arr [] = array ($ row ['title'], intval ($ row ['pv']);} $ data = json_encode ($ arr); jQuery $ (function () {$ ('# highcharts '). highcharts ({chart: {renderTo: 'chart _ pie ', // The id value of the html element associated with the pie chart defaserseriestype: 'pie', // The default chart type is plutbackgroundcolor: '# ffc', // set the chart area background color plotShadow: true // set the shadow}, title: {text: 'search engine statistical analytics' // chart title}, credits: {text: 'jb51. net '}, tooltip: {formatter: function () {// format the prompt message "return" when the mouse slides to the image prompt box''+ This. point. name +': '+ TwoDecimal (this. percentage) + '%' ;}}, plotOptions: {pie: {allowPointSelect: true, // you can click the selected slice area to separate the cursor: 'pointer ', // when the mouse points to a sector area, it changes to a hand shape (clickable) // showInLegend: true, // if you want to display the legend, you can set this item to true dataLabels: {enabled: true, // set the data label to be visible, that is, the color of the data corresponding to each slice area is '# 000000', // the color of the data display connectorColor:' #000000 ', // set the Color style: {fontSize: '12px 'for the connection line in the sector of the data field. // The data display size}, formatter: function () {// format the data return''+ This. point. name +': '+ TwoDecimal (this. percentage) +' % '; // return''+ This. point. name +': '+ This. y ;}}}, series: [{// data column name: 'search engine ', data: data // The core data column is the data read by php and parsed into JSON}]});

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.
The percent code is as follows:

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

The actual data is as follows:

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

Finally, we need to keep two decimal places and paste the code below:

Function twoDecimal (x) {// retain 2 decimal places var f_x = parseFloat (x); if (isNaN (f_x) {alert ('wrong parameter '); return false;} var f_x = Math. round (x * 100)/100; var s_x = f_x.toString (); var pos_decimal = s_x.indexOf ('. '); if (pos_decimal <0) {pos_decimal = s_x.length; s_x + = '. ';} while (s_x.length <= pos_decimal + 2) {s_x + = '0';} return s_x ;}

The bar chart, pie chart, and graph are all the same.

The above is all the content of this article. I hope you will like it.