Here is the simple example of Google 3d chart. just use listed below code.
I have everything explained in commented.
<html>
<head>
<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<script type="text/javascript">
// Load Google Visualization API with piechart package.
google.load('visualization', '1', {'packages':['piechart', 'imagepiechart', 'barchart','imageBarChart','linechart']});
// load API.
google.setOnLoadCallback(initChart);
// Populates datas and draw it.
function initChart() {
var dTable = new google.visualization.DataTable();
// Add two columns
dTable.addColumn('string', 'Names');
dTable.addColumn('number', 'Percentage');
//Add fie rows
dTable.addRows(5);
//set the 5 values
dTable.setValue(0, 0, 'Java');
dTable.setValue(0, 1, 50);
dTable.setValue(1, 0, 'ASP.Net');
dTable.setValue(1, 1, 30);
dTable.setValue(2, 0, 'PHP');
dTable.setValue(2, 1,10);
dTable.setValue(3, 0, 'ASP');
dTable.setValue(3, 1, 7);
dTable.setValue(4, 0, 'Java Applet');
dTable.setValue(4, 1, 3);
//draw it
var pChart = new google.visualization.PieChart(document.getElementById('programmingLanguages3DChart'));
pChart.draw(dTable, {width: 400, height: 240, is3D: true, title: 'Programming Languages 3D Chart'});
}
</script>
</head>
<body>
<div id='programmingLanguages3DChart' ></div>
</body>
</html>
I have everything explained in commented.
 |
| Google 3D Chart. |
<html>
<head>
<script type='text/javascript' src='http://www.google.com/jsapi'></script>
<script type="text/javascript">
// Load Google Visualization API with piechart package.
google.load('visualization', '1', {'packages':['piechart', 'imagepiechart', 'barchart','imageBarChart','linechart']});
// load API.
google.setOnLoadCallback(initChart);
// Populates datas and draw it.
function initChart() {
var dTable = new google.visualization.DataTable();
// Add two columns
dTable.addColumn('string', 'Names');
dTable.addColumn('number', 'Percentage');
//Add fie rows
dTable.addRows(5);
//set the 5 values
dTable.setValue(0, 0, 'Java');
dTable.setValue(0, 1, 50);
dTable.setValue(1, 0, 'ASP.Net');
dTable.setValue(1, 1, 30);
dTable.setValue(2, 0, 'PHP');
dTable.setValue(2, 1,10);
dTable.setValue(3, 0, 'ASP');
dTable.setValue(3, 1, 7);
dTable.setValue(4, 0, 'Java Applet');
dTable.setValue(4, 1, 3);
//draw it
var pChart = new google.visualization.PieChart(document.getElementById('programmingLanguages3DChart'));
pChart.draw(dTable, {width: 400, height: 240, is3D: true, title: 'Programming Languages 3D Chart'});
}
</script>
</head>
<body>
<div id='programmingLanguages3DChart' ></div>
</body>
</html>
No comments:
Post a Comment