Post: one minute teaches you to use the graph and bar chart in the google Chart

Post: one minute to teach you how to use the graph and bar chart in the google Chart. original address: pie. The following is a repost: one minute teaches you to use the graph and column chart in the google Chart.

Address: http://2sitebbs.com/thread-671-1-1.html


Undoubtedly, Google's Chart api is very good,
A very stable and flexible chart solution.

The following is a simple example,
It aims to help friends who need to use a google Chart, especially its LineChart and ColChart to quickly integrate them.

The detailed steps for quickly integrating a graph or bar chart of a google chart are as follows:

1. Step 1: introduce google's javascript api file to your webpage;
Add the following code to the html code of the webpage:
Script
Copy code
Note:
This file must be introduced before calling the js code of google charts.

2. Step 2: Introduce the graph and bar chart js to encapsulate the function code on your webpage;
Directly introduce external js files:
Script
Copy code

Or add the following simple encapsulation function to your js code:
/**
* Functions for chart
* -- Parameter description --
* SId: id of the tag used to display the google icon
* SType: Chart type, curve chart or column chart; optional values: col and line
* STitle: Chart title
* OData: Chart data, which is a two-dimensional array. The first element is the title of the x axis and y axis. the format is as follows: [['X axis data title ', 'Y axis data title'], ['xvalue 1', 'yvalue 1'],...]
* Max: maximum value of Y axis height
*/
Function showChart (sId, sType, sTitle, oData, max ){
Google. load ("visualization", "1", {packages: ["corechart"]});
Google. setOnLoadCallback (function (){
Var data = google. visualization. arrayToDataTable (oData );

Var options = {
Title: sTitle,
Width: 720,
Height: 200,
ChartArea: {left: 30, width: '000000', top: 25, height: '000000 '},
TitleTextStyle: {color: '#666', fontSize: '14px '},
CurveType: "function ",
VAxis: {maxValue: max}
};

If (sType = 'line '){
Var chart = new google. visualization. LineChart (document. getElementById (sId ));
} Else if (sType = 'col '){
Var chart = new google. visualization. ColumnChart (document. getElementById (sId ));
}
Chart. draw (data, options );
});
}
Copy code

3. Step 3: use php as an example to assemble chart data;
Sample code:
// Set the data title of the x and y axes for the chart.
$ ODataCity = array ('city', 'average price/100 '));
// $ Citys is an array of city data saved from the database. it contains the cityName and price fields.
Foreach ($ citys as $ key => $ val ){
$ ODataCity [] = array ($ val ['cityname'], $ val ['price']);
}
Copy code

4. Step 4: output the data to the js code and call the showChart () function to display the chart;
Sample code:
// Prepare parameters
$ SData = json_encode ($ oDataCity );
$ ChartType = 'col ';
$ ChartTitle = 'rankings of popular second-hand car brands in major cities nationwide ';
$ MaxXValue = 100;

// Output the js code for calling the display chart function
Echo < Script
(Function (){
Var sId = 'gchart ',
SType = '{$ chartType }',
STitle = '{$ chartTitle }';