For smart Primates & ROBOTS (oh and ALIENS ).

Blogroll

Friday, October 17, 2014

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>


Share:

0 comments:

Post a Comment

How to make center align child div

 How to make center align child div?   Suppose you have 2 Div tag. And want the make inner tag center <div id="d1">      ...

Ads Inside Post

Powered by Blogger.

Arsip