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

Multiple attribute passing in querySelectorAll

Multiple attribute passing in querySelectorAll     Here I am demonstrating code to how to pass multiple attributes in querySelectorAll. <...

Ads Inside Post

Powered by Blogger.

Arsip