Last updated January 2, 2013. Created by srutheesh on October 10, 2012.
Log in to edit this page.
We have one view module named GVS module for Google Datavisualization, but there is some limitations for creating graphs as we disired. The implementation of Google Datavisualization is very simple and we can directly implement by using tpl or custum module .
The steps for creating Google Datavisualizations are follows .
Steps 1 :
Call the JSAPI.
<script type="text/javascript" src="https://www.google.com/jsapi"></script>We call this in page.tpl.php or in the custum module
Steps 2 :
Load the visualization .
google.load("visualization", "1", {packages:["corechart"]});Supported graphs : Line , Pie , Area , Col um , Bar , Combo
google.load("visualization", "1", {packages:["table"]});Supported Graphs : Table
google.load('visualization', '1', {'packages':['motionchart']});Supported Graphs : Motion Chart
Steps 3 :
Set all datas to jason array , by using this values google draw graphs .
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460]
]);This values we can create using views or by using DB query .
Steps 4 :
Setting up th option variable .This has lot of optional variables , but we might specify the width and height of the graph to display .
var options = {
title: 'Graph Title',
hAxis: {title: 'Year', titleTextStyle: {color: 'red'}},
width: 600,
height: 500,
};Steps 5 :
Define graph type to display , This is the final steps for creating the data visualization . We can define multiple graph type for one jason array datas .
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options); var chart = new google.visualization.MotionChart(document.getElementById("MOTIONs"));
chart.draw(datas, options);
var chart = new google.visualization.ComboChart(document.getElementById("COMPOs"));
chart.draw(datas, compooptions);
var chart = new google.visualization.LineChart(document.getElementById("LINEs"));
chart.draw(datas, options);
var chart = new google.visualization.BarChart(document.getElementById("BARs"));
chart.draw(datas, options);
var chart = new google.visualization.ColumnChart(document.getElementById("COLUMNs"));
chart.draw(datas, options);
var chart = new google.visualization.AreaChart(document.getElementById("AREAs"));
chart.draw(datas, options);
var chart = new google.visualization.PieChart(document.getElementById("PIEs"));
chart.draw(datas, options);<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);
var options = {
title: 'Company Performance'
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 900px; height: 500px;"></div>
</body>
</html>| Attachment | Size |
|---|---|
| Line Chart | 19.47 KB |
| Bar Chart | 8.18 KB |
| Area Chart.pn | 20.87 KB |
