Reprint: One minute teaches you to use graphs and histograms in Google charts

Reprint: One minute teaches you to use graphs and histograms in Google charts

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


No doubt Google's charting API is awesome,
and a very stable and flexible charting solution.

Here's a simple example,
Designed to help quickly integrate friends who need to use Google charts, especially its graphs (Linechart) and histograms (Colchart).

The detailed steps to quickly integrate a graph or histogram of Google charts are as follows:

1, the first step: The Google's JavaScript API file into your Web page;
Add the following code to the HTML code of the Web page:

Copy Code
Attention:
This file needs to be introduced in front of your JS code that calls Google charts.

2, the second step: the introduction of graphs and histogram JS package function code to your Web page;
Direct introduction of external JS files:

Copy Code

Or add the following simple encapsulation function to your JS code:
/**
* Functions for chart
*--Parameter Description--
* SId: ID name of the tag used to display Google icons
* Stype: Type of chart, graph or histogram; selectable values: col and line
* Stitle: Title of chart
* OData: Chart data, is a two-dimensional array, the first element is the x-axis and the y-axis of the title, the format of: [[' X-axis data title ', ' Y-axis data title '], [' XValue 1 ', ' Yvalue 1 '], ...]
* Maximum value of max: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: ' 98% ', top:25, Height: ' 75% '},
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, the third step: take PHP as an example, assemble the chart data;
Example code:
Set the x-axis and y-axis data titles for the chart
$oDataCity = Array (' City ', ' average price/million ');
$citys is a DB query that holds multiple city data, which contains CityName and price two fields
foreach ($citys as $key = = $val) {
$oDataCity [] = Array ($val [' CityName '], $val [' Price ']);
}
Copy Code

4, Fourth step: The data output to the JS code, call Showchart () function to display the chart;
Example code:
Prepare parameters
$sData = Json_encode ($oDataCity);
$chartType = ' col ';
$chartTitle = ' top brands of used cars in major cities nationwide ';
$maxXValue = 100;

The output call displays the JS code of the chart function
Echo << <>