Php+mysql+highcharts Generate pie chart _jquery

Mysql

First we build a chart_pie table as statistical data.

-- 
---table structure ' Chart_pie ' 
-- 
 
CREATE table IF not EXISTS ' Chart_pie ' ( 
 ' id ' int (one) not NULL auto_increment,
    ' title ' varchar NOT NULL, 
 ' PV ' int (a) not NULL, 
 PRIMARY KEY (' id ') 
engine=myisam DEFAULT Charset=ut F8 auto_increment=7; 
 
---The 
data in the Dump table ' Chart_pie '- 
- 
 
INSERT into ' chart_pie ' (' id ', ' title ', ' PV ') VALUES 
(1, ' Baidu ', 1239), c15/> (2, ' Google ', 998), 
(3, ' Search ', 342), 
(4, ' Bing ', 421), 
(5, ' Sogou ', 259), 
(6, ' other ', 83);

Php

In pie.php we want to generate data to 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 ',//pie chart associated HTML element ID value DEFA 
  Ultseriestype: ' Pie ',///default chart type is pie chart plotbackgroundcolor: ' #ffc ',//Set chart area background color plotshadow:true//Set Shadow}, Title: {text: ' Search engine statistical analysis '//Chart title}, credits: {text: ' Jb51.net '}, tooltip: {Formatter:functio  
   N () {///mouse sliding to the image prompt box formatted hint info return ' <b> ' + this.point.name + ' </b>: ' + twodecimal (this.percentage) + '% '; }, Plotoptions: {pie: {allowpointselect:true,//Allowed to select, click on the selected sector area can be separated to show the cursor: ' pointer ' 
     ,//When the mouse points to the pie area and becomes hand type (clickable)//showinlegend:true,//If you want to display the legend, set the key to True datalabels: {enabled:true, Set the data label visible, which shows the corresponding data color for each sector: ' #000000 ',//Data display color Connectorcolor: ' #999 ',//Set the color of the connector for the data field sector: {fontsize: ' 12px '//Data display size}, Formatter:function () {/ 
      /formatted Data return ' <b> ' + this.point.name + ' </b>: ' + twodecimal (this.percentage) + '% '; 
     Return ' <b> ' + this.point.name + ' </b>: ' + this.y; 
}}, Series: [{//Data column name: ' Search engine ', Data:data//Core data columns from PHP read data and parsed into JSON}]};
 });

In addition, format the data city, if you want to display percentages, you can use This.percentage,highcharts to automatically convert integers to percentages, and use THIS.Y if you want to display the amount of data.
The percent code is as follows:

Formatter:function () {//Formatted data return 
 ' <b> ' + this.point.name + ' </b>: ' + twodecimal (this.percentage) + ' %'; 
}

The actual data is this:

Formatter:function () {//Formatted data return 
 ' <b> ' + this.point.name + ' </b>: ' + this.y; 
}

Finally, we want to keep two decimal places, the code is posted:

function Twodecimal (x) {//Reserved 2 decimal 
 var f_x = parsefloat (x); 
 if (isNaN (f_x)) { 
  alert (' wrong parameter '); 
  return false; 
 } 
 var f_x = math.round (x *)/m; 
 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; 
}

Histogram, pie chart, graph and so on are the same.

The above mentioned is the entire content of this article, I hope you can enjoy.