Membuat Table Charts Google Menggunakan Jquery

27 Oct 2015 19:10 • Post By

Jika Anda bekerja untuk proyek analisis, Anda memerlukan sistem grafik yang kaya untuk menampilkan hasil data yang besar. Google menyediakan kita alat grafik yang kuat yang dapat Anda menerapkan grafik yang sangat sederhana, tutorial ini akan menjelaskan kepada Anda bagaimana menerapkan grafik Google dengan Jquery data yang ajax JSON. Mencoba ada banyak grafik interaktif gratis dan alat data, mengambil cepat melihat live demo ini.


Membuat Table Charts Google Menggunakan Jquery

JavaScript

Disini anda dapat mengganti url API, demo ini bekerja dengan kepadatan penduduk dunia yang sangat simple.



$(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
});
});

Charts Google

Berikut adalah data objek  untuk ajax JSON dari hasil.
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);
}
}

Kode HTML

Charts akan di tampilkan berdasarkan DIV id

JSON

Untuk melihat data kepadatan penduduk dunia yang di ambil dari sampel JSON.
[
{
"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"
},
.............
.............
]

Grafik Pilihan

Ada banyak pilihan pada grafik dan anda dapat menyesuaikan grafik warna, judul dan tampilan 3D dll..
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

Metode ajax jquery untuk penggunaan secara umum.
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");
}
});
}


Download   Demo


Jangan lupa Subscribe ya !!

Membuat Table Charts Google Menggunakan Jquery | Tutorialku.Net | 4.5