Google Charts – visualize data on your website

Google charts provides a better way to visualize website data on your website. The chart gallery provides a very large number of ready to use chart types from simple line charts to hierarchical tree maps.

To integrate Google Charts you need to embed JavaScript in your webpage.

The process is very simple. Just load Google Chart libraries, list data on the chart, customize your chart options and finally create a object with the id you choose. At last, in your webpage, create a <div> with that id and display the Google Chart with your mentioned data.

Google Chart types:

• Pie Chart
• Line Chart
• Column Chart
• Area Chart
• Tree Map
• Controls and Dashboards

Example:

<script type=”text/javascript” src=”http://code.jquery.com/jquery-1.8.3.min.js”></script>

<script type=”text/javascript” src=”https://www.google.com/jsapi”></script>

<script type=”text/javascript”>

google.load(“visualization”, “1”, {packages:[“corechart”]}); google.setOnLoadCallback(drawChartPie); function drawChartPie() {

var row = $.parseJSON(‘{“0”:{“title”:”PHP”,”count”:”2″},”1″:{“title”:”JQUERY”,”count”:”4″},”2″:{“title”:”HTML”,”count”:”3″},”3″:{“title”:”CSS”,”count”:”2″},”total”:4}’);

var data = new google.visualization.DataTable();

data.addColumn(‘string’, ”);

data.addColumn(‘number’, ”);

data.addRows(row.total);

$.each(row, function(index, val) {

$.each(val, function(key, value) {

if(key == ‘title’) {

data.setValue(parseInt(index), 0, value +’ (‘+ row[index].count +’)’ );

}

if(key == ‘count’) {

data.setValue(parseInt(index), 1, parseInt(value));

}

});

});

var options = { title: ‘Google Chart’, colors: [‘#e0440e’, ‘#e6693e’, ‘#ec8f6e’, ‘#f3b49f’, ‘#f6c7b6’], is3D: false, height:500, width:500 };

var chart = new google.visualization.PieChart(document.getElementById(‘chart_div’)); chart.draw(data, options);

}

</script>

<div id=”chart_div” style=”width:50%;”></div>

Ready to create your first Google Chart? Visit the quickstart.