Google Charts with Jquery Ajax
Wall Script
Follow Me:
Monday, April 27, 2015

Google Charts with Jquery Ajax

If you are working for analytics project, you need a rich chart system to display big data results. Google is providing us a powerful chart tools that you can implement charts very simple, this tutorial will explain you how to implement Google charts with Jquery ajax JSON data. Try out there are many free interactive charts and data tools, take a quick look at this live demo.

Audio Recording with Custom Audio Player using Jquery and HTML5


Download Script     Live Demo

JavaScript
Here you can replace API url, this demo is working with sample world population density.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" ></script>
<script src="ajaxGetPost.js" ></script>
<script src="https://www.google.com/jsapi"></script>
<script>
$(document).ready(function ()
{
url='world-population-density.json'; // API URL
ajax_data('GET',url, function(data)
{
charts(data,"ColumnChart"); // Column Charts
charts(data,"PieChart"); // Pie Charts
charts(data,"BarChart"); // Bar Charts
charts(data,"GeoChart"); // Geo Charts
});
});
</script>

Google Charts
Here data object is referees to ajax JSON result.
function charts(data,ChartType)
{
var c=ChartType;
var jsonData=data;
google.load("visualization", "1", {packages:["corechart"], callback: drawVisualization});
function drawVisualization()
{
var data = new google.visualization.DataTable();
data.addColumn('string', 'Country');
data.addColumn('number', 'Population Density');
$.each(jsonData, function(i,jsonData)
{
var value=jsonData.value;
var name=jsonData.name;
data.addRows([ [name, value]]);
});

var options = {
title : "Word Population Density",
animation:{
duration: 3000,
easing: 'out',
startup: true
},
colorAxis: {colors: ['#54C492', '#cc0000']},
datalessRegionColor: '#dedede',
defaultColor: '#dedede'
};

var chart;
if(c=="ColumnChart") // Column Charts
chart=new google.visualization.ColumnChart(document.getElementById('chart_div'));
else if(c=="PieChart") // Pie Charts
chart=new google.visualization.PieChart(document.getElementById('piechart_div'));
else if(c=="BarChart") // Bar Charts
chart=new google.visualization.BarChart(document.getElementById('bar_div'));
else if(c=="GeoChart") // Geo Charts
chart=new google.visualization.GeoChart(document.getElementById('regions_div'));

chart.draw(data, options);
}
}

HTML Code
Charts will display based on DIV id.
<div id="chart_div"></div>
<div id="regions_div" ></div>
<div id="piechart_div" ></div>
<div id="bar_div" ></div>

JSON
World population density sample JSON data.
[
{
"code": "GB",
"value": 257,
"name": "United Kingdom"
},
{
"code": "US",
"value": 34,
"name": "United States"
},
{
"code": "IN",
"value": 394,
"name": "India"
},
{
"code": "CN",
"value": 143,
"name": "China"
},
{
"code": "BR",
"value": 23,
"name": "Brazil"
},
{
"code": "WA",
"value": 152,
"name": "Qatar"
},
.............
.............
]

Chart Options
There any my options for charts, you can customize the chart colors, titles and 3D view etc..
var options = {
title : "Word Population Density",
is3D: true, //Pie Charts
colors : ['#54C492','#f96302' ], //Bar of Pie Charts
animation:{
duration: 3000,
easing: 'out',
startup: true
},
vAxis: {title: "Vertical Axis Title"}, //Bar of Pie Charts
hAxis: {title: "Horizontal Axis Title "}, //Bar of Pie Charts
colorAxis: {colors: ['#54C492', '#cc0000']}, //Geo Charts
datalessRegionColor: '#dedede', //Geo Charts
defaultColor: '#dedede' //Geo Charts
};

ajax_data.js
Jquery ajax method for common use.
function ajax_data(type, url, success)
{
$.ajax({
type:type,
url:url,
dataType:"json",
cache:false,
timeout:20000,
beforeSend :function(data) { },
success:function(data){
success.call(this, data);
},
error:function(data){
alert("Error In Connecting");
}
});
}
Was this article helpful?
Thanks! Your feedback helps us to improve 9lessons.info


20 comments:

  1. Nice tutorial, but you have some limited examples. One more request can you provide beginner tutorial of d3js. data visualization is a very important part in modern web, where we need custom charts or map etc.

    ReplyDelete
  2. Hi Srinivas,
    Thanks for the post ,i want more examples on charts

    i given suggetion to you ,please post articles step by step how to do?

    ReplyDelete
  3. Hi Srinivas,
    This is a nice tutorial. I want to the google analytic results in this world map. Means the visitors location according to there visits just like in google analytics. Is there any way to show such type of chart and world map?

    ReplyDelete
  4. Hey Srinivas,

    Why Kashmir & Arunachal pradesh is marked with lines?

    ReplyDelete
    Replies
    1. They are disputed boundaries as result of 1969, 1971, 1972 war between Indo-Pak & Indo-China.

      Delete
  5. Another fruitful post from you :) I think it's very helpful for the developers. Informative!

    ReplyDelete
  6. Hi,

    Thanks You provide a lot of information to me

    ReplyDelete
  7. Hello Srinivas Bro,

    Really nice Google Charts Please explain in details for next post bro

    ReplyDelete
  8. Thanks a lot, your website is beneficial for all.

    ReplyDelete
  9. Helped me a lot since google developers site has not.
    I modified the script a little bit, loading the data from a mysql database.
    In my case not for Geo Charts though.
    Thank you. Animation works very nicely.

    ReplyDelete
  10. Nice post. worth of every single sec it consume.

    ReplyDelete
  11. you are awesome work regarding jquery. i have used this code and it works good.

    ReplyDelete
  12. can you post any examples on multiple column chart with json values

    ReplyDelete
  13. Thanks for sharing Valuable Information with us. I have applied it works good.

    ReplyDelete
  14. Suman
    I have used this code at my website to live chat. It working great. Thanks for writ best information.

    ReplyDelete

Make in India