Showing posts with label Chart. Show all posts

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.

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([ [namevalue]]);
});

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");
}
});
}

Top jQuery Chart Plugins for Developers

15 Top jQuery Chart Plugins for Developers

Graphics in programs like Photoshop can be created both statistically and dynamically. Creating graphics using statistical methods is a bit difficult when compared to dynamical methods. Here are the few jQuery chart plugins that will help you generate charts or tables:

1. Dynatable.js

Dynatable is a interactive table plugin that uses HTML5, jSON and jQuery.
best-jquery-chart-plugins

2. Chartist.js

With this jQuery plugin developers can generate customizable responsive charts.
best-jquery-chart-plugins

3. HighchartTable

Using this jQuery chart plugin developers can automatically convert HTML tables (which contain data) into graphs. HighchartTable jQuery plugin is simple to use, as no extra efforts are required.
best-jquery-chart-plugins

4. Bootgrid

jQuery Bootgrid is sleek and intuitive. It is a control designed for bootstrap.
best-jquery-chart-plugins

5. Pizza Pie Chart

Using this jQuery chart plugin developers can create pie charts representing pizza, which is different and attractive.
best-jquery-chart-plugins

6. jqTimeline

This jQuery Timeline plugin is a simple plugin which displays a set of dates or events in a timeline.

7. Scatterplot.js

Using this jQuery chart plugin develperrs can create scatter plot charts.
best-jquery-chart-plugins

8. jsPlumb

This jQuery plugin provides a path for web developers to connect elements visually on their web pages.
best-jquery-chart-plugins

9. ReStable

ReStable is a lightweight jQuery chart plugin (1 Kb). This plugin makes tables responsive by collapsing them in the ul lists.
best-jquery-chart-plugins

10. Peity

It is a simple jQuery plugin that converts the content or data into simple donut, pie, line and bar chart. This jQuery chart plugin is supported by almost every browser.

11. jqPlot

jqPlot is a versatile charting and plotting plugin that provides beautiful bar, line, pie and other charts.
best-jquery-chart-plugins

12. JavaScript InfoVis Toolkit

With this plugin, Interactive Data Visualizations can be created for the web.
best-jquery-chart-plugins

13. Sheetrock

This jQuery plugin is used for displaying, querying and retrieving data from Google Spreadsheets.

14. jChartFX

With this jQuery plugin developers can create commercial dashboards and business intelligence applications.
best-jquery-chart-plugins

15. Chart.js

This jQuery chart plugin provides web developers and designers with clean, simple and engaging charts.