Google Chart API perfect way to visualize data in your web site
JavaScript classes. Many Chat Types. Easily Customizable. Highly Interactive with events. Charts are rendered using HTML5/SVG technology to provide cross-browser compatibility (including VML for older IE versions) and cross platform portability to iPhones, iPads and Android. No plugins are needed.
Perfect right?
You should identify there are two types of charts are provided by google.
1. http://code.google.com/apis/chart/
Google chart tools are powerful, simple to use, and free. Try out our rich gallery of interactive charts and data tools.
2. http://code.google.com/apis/chart/image/
The Google Chart API lets you dynamically generate charts with a URL string. You can embed these charts on your web page, or download the image for local or offline use.
Its not hard to build up a chart using google. Its easy. Google documentation gives you enough details to customize your chart.
Sample example
Have fun make you chart
JavaScript classes. Many Chat Types. Easily Customizable. Highly Interactive with events. Charts are rendered using HTML5/SVG technology to provide cross-browser compatibility (including VML for older IE versions) and cross platform portability to iPhones, iPads and Android. No plugins are needed.
Perfect right?
You should identify there are two types of charts are provided by google.
1. http://code.google.com/apis/chart/
Google chart tools are powerful, simple to use, and free. Try out our rich gallery of interactive charts and data tools.
2. http://code.google.com/apis/chart/image/
The Google Chart API lets you dynamically generate charts with a URL string. You can embed these charts on your web page, or download the image for local or offline use.
Its not hard to build up a chart using google. Its easy. Google documentation gives you enough details to customize your chart.
Sample example
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);
// Set chart options
var options = {'title':'How Much Pizza I Ate Last Night',
'width':400,
'height':300};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="chart_div"></div>
</body>
</html>
Have fun make you chart
Comments
Post a Comment