• Draw Charts with Google Visualization API

    Google Visualization API is a JavaScript library displays methods to load and control the visualization. It’s useful to display nice charts in your web sites.

    To load Google Visualization AJAX API.

    View Code JAVASCRIPT
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    
    <script type='text/javascript' src='http://www.google.com/jsapi'></script>
     
    <script type="text/javascript">
     
          // Load the Visualization API and the pie-chart package.
          google.load('visualization', '1', {'packages':['piechart', 'imagepiechart', 'barchart','imageBarChart','linechart']});
     
          // Set a callback to run when the API is loaded.
          google.setOnLoadCallback(drawChart);
     
          // Callback that creates and populates a data table, 
          // instantiates the pie chart, passes in the data and
          // draws it.
          function drawChart() {
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'list');
            data.addColumn('number', 'Pesentage');
            data.addRows(5);
            data.setValue(0, 0, 'jQuery');
            data.setValue(0, 1, 11);
            data.setValue(1, 0, 'Java');
            data.setValue(1, 1, 5);
            data.setValue(2, 0, 'PHP');
            data.setValue(2, 1,6);
            data.setValue(3, 0, 'Web Design');
            data.setValue(3, 1, 2);
            data.setValue(4, 0, 'Database');
            data.setValue(4, 1, 7);
     
     
            var chart = new google.visualization.ImagePieChart(document.getElementById('chart'));
            chart.draw(data, {width: 400, height: 240, is3D: true, title: ' Tutorials 3D Chart'});
     
            var chart = new google.visualization.PieChart(document.getElementById('2'));
            chart.draw(data, {width: 400, height: 240, is3D: true, title: ' Tutorials 3D Chart'});
     
            var chart = new google.visualization.BarChart(document.getElementById('3'));
            chart.draw(data, {width: 400, height: 240, is3D: true, title: 'Tutorials Pesentage'});
     
            var chart = new google.visualization.ImageBarChart(document.getElementById('4'));
            chart.draw(data, {width: 400, height: 240, min: 0});
     
            var chart = new google.visualization.LineChart(document.getElementById('5'));
            chart.draw(data, {width: 400, height: 240, legend: 'bottom', title: 'Tutorials'});
          }
     
        </script>

    HTML Code :-

    1
    2
    3
    4
    5
    6
    7
    
     <div>
        <div id='2' style="float:left"></div>
        <div id='chart' style="float:left"></div>
        <div id='3' style="float:left"></div>
        <div id='4' style="float:left"></div>
        <div id='5' style="float:left"></div>
       </div>

Comments on this post

Leave a Reply

  • Security Code :


    + two = 11