If you are working for analytics project, you need a rich chart system to display big dataresults. 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.
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>
<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",
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’));
{
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",
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>
<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"
},
………….
………….
]
{
"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 viewetc..
var options = {
title : "Word Population Density",
is3D: true, //Pie Charts
colors : [‘#54C492′,’#f96302’ ], //Bar of Pie Charts
animation:{
duration: 3000,
easing: ‘out’,
},
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
};
title : "Word Population Density",
is3D: true, //Pie Charts
colors : [‘#54C492′,’#f96302’ ], //Bar of Pie Charts
animation:{
duration: 3000,
easing: ‘out’,
},
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");
}
});
}
{
$.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");
}
});
}