Tuesday, 24 December 2013

Pie charts using JQuery

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
   
</head>
<body>
    <div id="piechart_3d" style="width: 900px; height: 500px;">
    <script type="text/javascript">      
         google.load("visualization", "1", {packages:["corechart"]});      
         google.setOnLoadCallback(drawChart);      
         function drawChart() {
         var Consumed = 5400;
         var PlannedAvailable = 200;
         var Unplanned = 400;      
         var data = google.visualization.arrayToDataTable([    
         ['Hours', 'Hours per Day'],          
         ['Consumed',      Consumed],          
         ['Planned Available',  PlannedAvailable],          
         ['Unplanned', Unplanned]        
         ]);        
         var options = {          
         title: 'Project Hours',          
         is3D: true,        
         };        
         var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));        
         chart.draw(data, options);      
         }    
    </script>
    </div>
</body>
</html>