Hi friends,
Today i am sharing how you create a multi chart with Google API in single page. The code is defined below:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Google Charts Tutorial</title>
<style type="text/css">
#eventsExample {
position: relative;
}
#details0, #details1, #details2, #details3 {
visibility:hidden;
background: #FFFF7F;
border: solid 1px;
width: 350px;
padding: 5px;
font-size:smaller;
position:absolute;
top: 250px;
}
</style>
<!-- load Google AJAX API -->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
//load the Google Visualization API and the chart
google.load('visualization', '1', {'packages':['columnchart','piechart']});
//set callback
google.setOnLoadCallback (createChart);
//callback function
function createChart() {
//create data table object
var dataTable = new google.visualization.DataTable();
//create data table object
var dataTableMulticolumn = new google.visualization.DataTable();
//define columns for first example
dataTable.addColumn('string','Quarters 2010');
dataTable.addColumn('number', 'Earnings1');
//define columns for second example
dataTableMulticolumn.addColumn('string','Quarters');
dataTableMulticolumn.addColumn('number', 'Earnings 2009');
dataTableMulticolumn.addColumn('number', 'Earnings 2008');
dataTableMulticolumn.addColumn('number', 'Earnings 2007');
//define rows of data for first example
dataTable.addRows([['Q1',308], ['Q2',257],['Q3',375],['Q4', 123]]);
//define rows of data for secondf example
dataTableMulticolumn.addRows([['Q1',308,417,500], ['Q2',257,300,420],['Q3',375,350,235],['Q4', 123,100,387]]);
//instantiate our chart objects
var chart = new google.visualization.ColumnChart (document.getElementById('Chart'));
var secondChart = new google.visualization.PieChart (document.getElementById('Chart2'));
//instantiate our multicolumn chart
var multiColumnChart = new google.visualization.ColumnChart (document.getElementById('Chart3'));
//instantiate a new chart to use as dataView Example
var pieChartWithView = new google.visualization.PieChart (document.getElementById('Chart4'));
//instantiate our Event example chart
var eventsChart = new google.visualization.ColumnChart (document.getElementById('Chart5'));
//create a view of the multicolumn data table
var view = new google.visualization.DataView(dataTableMulticolumn);
//filter it to get only first two columns
view.setColumns([0, 1]);
//define options for visualization
var options = {width: 400, height: 240, is3D: true, title: 'Company Earnings'};
//draw our chart charts
chart.draw(dataTable, options);
secondChart.draw(dataTable, options);
multiColumnChart.draw(dataTableMulticolumn, options);
pieChartWithView.draw(view, options);
eventsChart.draw(dataTable, options);
//register callbacks
google.visualization.events.addListener(eventsChart, 'onmouseover', showDetails);
google.visualization.events.addListener(eventsChart, 'onmouseout', hideDetails);
}
function showDetails(e) {
switch (e['row']) {
case 0: document.getElementById('details0').style.visibility='visible';
break;
case 1: document.getElementById('details1').style.visibility='visible';
break;
case 2: document.getElementById('details2').style.visibility='visible';
break;
case 3: document.getElementById('details3').style.visibility='visible';
break;
}
}
function hideDetails(e) {
switch (e['row']) {
case 0: document.getElementById('details0').style.visibility='hidden';
break;
case 1: document.getElementById('details1').style.visibility='hidden';
break;
case 2: document.getElementById('details2').style.visibility='hidden';
break;
case 3: document.getElementById('details3').style.visibility='hidden';
break;
}
}
</script>
</head>
<body>
<h1>Visualizing our Data as a Column Chart</h1>
<!--Div for our chart -->
<div id="Chart"></div>
<div id="Chart2"></div>
<h1>More Bars for our Bar Chart and DataView Example</h1>
<div id="Chart3"></div>
<div id="Chart4"></div>
<h1>Introducing Events</h1>
<div id="eventsExample">
<div id="Chart5"></div>
<!--Divs for our messages -->
<div id="details0">These are the details for Q1...</div>
<div id="details1">Here you have the numbers for Q2...</div>
<div id="details2">Explanations for the third quarter...</div>
<div id="details3">Q4 was as expected...</div>
</div>
</body>
</html>
I hope it will help you allotToday i am sharing how you create a multi chart with Google API in single page. The code is defined below:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Google Charts Tutorial</title>
<style type="text/css">
#eventsExample {
position: relative;
}
#details0, #details1, #details2, #details3 {
visibility:hidden;
background: #FFFF7F;
border: solid 1px;
width: 350px;
padding: 5px;
font-size:smaller;
position:absolute;
top: 250px;
}
</style>
<!-- load Google AJAX API -->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
//load the Google Visualization API and the chart
google.load('visualization', '1', {'packages':['columnchart','piechart']});
//set callback
google.setOnLoadCallback (createChart);
//callback function
function createChart() {
//create data table object
var dataTable = new google.visualization.DataTable();
//create data table object
var dataTableMulticolumn = new google.visualization.DataTable();
//define columns for first example
dataTable.addColumn('string','Quarters 2010');
dataTable.addColumn('number', 'Earnings1');
//define columns for second example
dataTableMulticolumn.addColumn('string','Quarters');
dataTableMulticolumn.addColumn('number', 'Earnings 2009');
dataTableMulticolumn.addColumn('number', 'Earnings 2008');
dataTableMulticolumn.addColumn('number', 'Earnings 2007');
//define rows of data for first example
dataTable.addRows([['Q1',308], ['Q2',257],['Q3',375],['Q4', 123]]);
//define rows of data for secondf example
dataTableMulticolumn.addRows([['Q1',308,417,500], ['Q2',257,300,420],['Q3',375,350,235],['Q4', 123,100,387]]);
//instantiate our chart objects
var chart = new google.visualization.ColumnChart (document.getElementById('Chart'));
var secondChart = new google.visualization.PieChart (document.getElementById('Chart2'));
//instantiate our multicolumn chart
var multiColumnChart = new google.visualization.ColumnChart (document.getElementById('Chart3'));
//instantiate a new chart to use as dataView Example
var pieChartWithView = new google.visualization.PieChart (document.getElementById('Chart4'));
//instantiate our Event example chart
var eventsChart = new google.visualization.ColumnChart (document.getElementById('Chart5'));
//create a view of the multicolumn data table
var view = new google.visualization.DataView(dataTableMulticolumn);
//filter it to get only first two columns
view.setColumns([0, 1]);
//define options for visualization
var options = {width: 400, height: 240, is3D: true, title: 'Company Earnings'};
//draw our chart charts
chart.draw(dataTable, options);
secondChart.draw(dataTable, options);
multiColumnChart.draw(dataTableMulticolumn, options);
pieChartWithView.draw(view, options);
eventsChart.draw(dataTable, options);
//register callbacks
google.visualization.events.addListener(eventsChart, 'onmouseover', showDetails);
google.visualization.events.addListener(eventsChart, 'onmouseout', hideDetails);
}
function showDetails(e) {
switch (e['row']) {
case 0: document.getElementById('details0').style.visibility='visible';
break;
case 1: document.getElementById('details1').style.visibility='visible';
break;
case 2: document.getElementById('details2').style.visibility='visible';
break;
case 3: document.getElementById('details3').style.visibility='visible';
break;
}
}
function hideDetails(e) {
switch (e['row']) {
case 0: document.getElementById('details0').style.visibility='hidden';
break;
case 1: document.getElementById('details1').style.visibility='hidden';
break;
case 2: document.getElementById('details2').style.visibility='hidden';
break;
case 3: document.getElementById('details3').style.visibility='hidden';
break;
}
}
</script>
</head>
<body>
<h1>Visualizing our Data as a Column Chart</h1>
<!--Div for our chart -->
<div id="Chart"></div>
<div id="Chart2"></div>
<h1>More Bars for our Bar Chart and DataView Example</h1>
<div id="Chart3"></div>
<div id="Chart4"></div>
<h1>Introducing Events</h1>
<div id="eventsExample">
<div id="Chart5"></div>
<!--Divs for our messages -->
<div id="details0">These are the details for Q1...</div>
<div id="details1">Here you have the numbers for Q2...</div>
<div id="details2">Explanations for the third quarter...</div>
<div id="details3">Q4 was as expected...</div>
</div>
</body>
</html>
Regards
Rashid Imran Bilgrami
CEO
Best visualization
http://www.bestvisualization.com
Comments
Post a Comment
Thanks for the Comments , Your review will display soon