Google Charts, I believe, is one of the most beautiful & easiest tool to create Charts and Graphs. Previously we have discussed How to create Charts and Graphs in Java using JFreeChart , but I must admit that when you have scope to use Google Charts, you must go for it!
Google Charts provides you a support for charts completely over internet. You don't have to use any jar or anything in your project. It can be done completely on the client side. And, most importantly, it looks beautiful. :). But, yes, if you are creating an application which will run offline, then JFreeChart comes into use.
In this post, we will discuss about creating Column Chart & Stacked Column Chart using Google Charts.
Column Chart & Stacked Column Chart
Let's say we need to create a Column graph with 3 parameters:1. on X axis: years (from 2000-2013)
2. on Y axis: numbers of employees in the organization at the end of the year(in Green Bar) &
number of employees who left the company(in Blue bar)
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
// Load the Visualization API and the piechart package.
google.load('visualization', '1.0', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Total Number of Employees');
data.addColumn('number', 'Employees left Company');
data.addRows([
['2000', 30, 2],
['2001', 70, 12],
['2002', 150, 23],
['2003', 183, 56],
['2004', 404, 56],
['2005', 452, 67],
['2006', 497, 66],
['2007', 514, 63],
['2008', 454, 180],
['2009', 450, 76],
['2010', 498, 89],
['2011', 600, 67],
['2012', 648, 68],
['2013', 780, 90]
]);
// Set chart options
var options = {title:'Employee per year Graph'
,titleTextStyle: {color: '#007DB0', fontSize: 14},
width:900,
height:300,
vAxis:{title:'Employees', titleTextStyle: {color: '#007DB0', fontSize: 12}},
hAxis:{title:'Year End Figures', titleTextStyle: {color: '#007DB0', fontSize: 12}},
bar: {groupWidth: '70%'},
chartArea: { backgroundColor: { fill: '#F0F8FC', opacity: 100 }},
colors: ['#87A34D', '#4471A5'],
fontSize:10,
legend: { position: 'right', textStyle: { color: '#007DB0', fontSize: 12}},
};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div1'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div1"></div>
</body>
</html>
The variable "options" is used for formatting the charts.
And, that's it. You will get a column chart your web page. Here is the sample output for that:
So, it is as easy as anything... !!!
I am giving here an example dataset, required options for formatting & the result chart below for Stacked Column Chart. You can refer to those & easily create your very own customized charts.
a. Dataset would be same as normal Column Chart.
b. Use this as options. Note, I have added one more property: isStacked: true
var options = {title:'Employee per year Graph'
,titleTextStyle: {color: '#007DB0', fontSize: 14},
width:900,
height:300,
vAxis:{title:'Employees', titleTextStyle: {color: '#007DB0', fontSize: 12}},
hAxis:{title:'Year End Figures', titleTextStyle: {color: '#007DB0', fontSize: 12}},
bar: {groupWidth: '70%'},
chartArea: { backgroundColor: { fill: '#F0F8FC', opacity: 100 }},
colors: ['#87A34D', '#4471A5'],
fontSize:10,
legend: { position: 'right', textStyle: { color: '#007DB0', fontSize: 12}},
isStacked: true
};
Result for Stacked Column Chart:
For more information about the Google Charts, or for playing with Google charts, you can go this link : https://code.google.com/apis/ajax/playground/?type=visualization#area_chart .
Google has created a wonderful platform for learning Google Charts.
Courtesy: Google Charts website
Happy Learning !
No comments :
Post a Comment