Draw Charts with Google Visualization API.
Wall Script
Follow Me:
Thursday, May 07, 2009

Draw Charts with Google Visualization API.

Google Visualization API is a Javascript library displays methods to load and control the visualization. It's useful to display nice charts in your web sites.

To load Google Visualization AJAX API.
<script type='text/javascript' src='http://www.google.com/jsapi'></script>


Download Script     Live Demo

Take a look at live demo.

JavaScript Code
<script type="text/javascript">

google.load('visualization', '1', {'packages':['piechart']});

google.setOnLoadCallback(drawChart);

function drawChart() {

var data = new google.visualization.DataTable();
data.addColumn('string', 'list');
data.addColumn('number', 'Tutorials Pesentage');
data.addRows(5);
data.setValue(0, 0, 'jQuery');
data.setValue(0, 1, 11);
data.setValue(1, 0, 'Java');
data.setValue(1, 1, 5);
data.setValue(2, 0, 'PHP');
data.setValue(2, 1,6);
data.setValue(3, 0, 'Web Design');
data.setValue(3, 1, 2);
data.setValue(4, 0, 'Database');
data.setValue(4, 1, 7);

var chart = new google.visualization.PieChart(document.
getElementById('9lessonschart'));

chart.draw(data, {width: 400, height: 240, is3D:
true, title: '9lessons Tutorials 3D Chart'});
}
</script>

<div id="9lessonschart"> </div>

Take a look at above code 3D. If you want plane chart just change into 2D


Blue Chart
Google package name imagepiechart to use to display chart below style.

google.load('visualization', '1', {'packages':[ 'imagepiechart']});

var chart = new google.visualization.ImagePieChart(document.
getElementById('bluechart'));
<div id="bluechart"> </div>



Load multiple packages.
google.load('visualization', '1', {'packages':['piechart', 'imagepiechart', 'barchart']});
Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


16 comments:

  1. Hey thanks for sharing...
    http://www.bpojobsathome.com

    ReplyDelete
  2. Great article! Thanks for taking the time to explain Google Visualization API

    ReplyDelete
  3. Thanks very much! how do I use it offline?

    ReplyDelete
  4. Very nice..thanks. Can you help me with another article which shows reading an csv file and drawing an chart using google visualization please..thanks in advance

    ReplyDelete
  5. Hi Srinivas,

    Are they also suitable for blogs at blogspot.com?

    ReplyDelete
  6. Thanks.. its very nice
    tu can help me in this example
    ajax + jquery + mysql. = danamic chart help me

    ReplyDelete
  7. Nice post . just loving ur posts plzz post somethings to hep us learn use APIs (Google, Blogger, Youtube etc)

    ReplyDelete
  8. can we use it offline ?

    ReplyDelete
  9. Thanks. Any ideas why it's soooo slow in IE??

    ReplyDelete
  10. Thanks, HTML with javascript it s working fine but how to use with xul & javascript.please help me...
    thanks in advance

    ReplyDelete
  11. Sir can you please show to us how to use it with php, make the values dynamic. thanks.

    ReplyDelete
  12. how to link mysql
    using php into google visualization api

    ReplyDelete
  13. Please tell me How I can load the data From
    MySQL in PHP & use the Google Visualization API to draw chart Dynamically.

    ReplyDelete
  14. to use this Dynamically try this

    $i = 1;
    $userinfo = mysql_query("SELECT * FROM users");
    while($order = mysql_fetch_array($orders)) {
    $username = $userinfo[username];
    $sales = $userinfo[sales];

    $arr[$i] = array("username" => $username, "sales" => $sales );
    }

    // now all the usernames are stored in the array to output this to the chart do this.

    data.setValue(0, 0, $arr[1][username]);
    data.setValue(0, 1, $arr[1][sales]);

    hope this will help you

    ReplyDelete

Make in India