Highcharts instance tutorial 2: generate a pie chart based on php and mysql.

Source: Internet
Author: User

Highcharts instance tutorial 2: generate a pie chart based on php and mysql.

Last time, we analyzed the example of generating a line chart using highcharts combined with php and mysql. This time, we used the technology cto website search engine traffic as an example to generate a pie chart using highcharts.
A pie chart is usually used when we need to intuitively display the proportion of each part. For example, we need to calculate the traffic ratio of various search engines.
Step 1: Create a database to save the pv of each search engine
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 get data and convert it to the data format that highcharts can render. highcharts can parse data in json format, for example: [['Baidu ', 120], ['Google ', 86];
Include_once ('connect. php ');
$ Res = mysql_query ("select * from pie ");
While ($ row = mysql_fetch_array ($ res )){
// This indicates the data to be highlighted by default, and we can leave it empty.
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 );
Note that intval must be added to convert numbers, otherwise highcharts will not recognize them;




This article from the technical CTO: http://www.jscto.net, reprint please indicate the source.


Use highcharts in combination with js and mysql to generate a bar chart

Let me tell you your thoughts. You have to explore for the rest, increase your experience, and increase your posture ~~~
After php reads data, the organization data is in json format and called by the client. The format is as follows:
Category: ["School of Management", '... "]
Data: [[136,215], [147,196],...]
The client first calls Highcharts. chart to construct a chart and sets the basic type to a horizontal group stacked chart.
Js loads data through ajax, and sets the data to the category and series of the icon;
Chart. redraw.

Take a look at all the samples of highcharts first. If that is more suitable for you, copy it directly and find a way to modify the data.

 
How to add a click event to a pie chart by using Highcharts to generate a pie chart, such as clicking a slice in the pie chart to jump to a link

A sample is written.
Jsfiddle.net/uep3T/3/
Replace alert in the plotoption with the jump statement.

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: info-contact@alibabacloud.com 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.