PHP + mysql + Highcharts generate pie chart _ jquery

Source: Internet
Author: User
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.


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 );


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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.