Search in This Blog

Google chart api 3d

Google chart api 3d


Here is the simple example of Google 3d chart. just use listed below code.
I have everything explained in commented.



Google chart api 3d
















<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>


Previous
Next Post »