Post
Ask Question

Create Pie Chart Using jQuery

Introduction

This article explains how to create Charts in your application using Google Charts.

Google provides a very simple and useful library that can help the developers to create various type of charts in very short time and in an efficient manner.

Step 1

First of all you need to add the library of charts, for this just add this single line script in the head section of your code:

  1. <head runat="server">  
  2.     <title></title>  
  3.     <script type="text/javascript" src="https://www.google.com/jsapi"></script>  
  4. </head> 

Step 2

After this you need to add a div in the body section of your application.

  1. <body>  
  2.     <form id="form1" runat="server">  
  3.         <div id="charts" style="width: 600px; height: 300px;"></div>  
  4.     </form>  
  5. </body> 

Step 3

Now I am creating Pie Chart for the Sale of Bikes in a Year, for this you just need to add this code:

  1. <script type="text/javascript">  
  2.     google.load("visualization", "1", { packages: ["corechart"] });  
  3.     google.setOnLoadCallback(drawBikePieChart);  
  4.     function drawBikePieChart() {  
  5.         var data = google.visualization.arrayToDataTable([  
  6.           ['Bike Name', 'Sale Per Year'],  
  7.           ['Pulsar 220', 20000],  
  8.           ['Karizma', 15000],  
  9.           ['CBR', 23000],  
  10.           ['R15', 12000],  
  11.           ['FZ', 8000]  
  12.         ]);  
  13.   
  14.         var options = {  
  15.             title: 'Bikes Sale Per Year'  
  16.         };  
  17.   
  18.         var bikeChart = new google.visualization.PieChart(document.getElementById('bikecharts'));  
  19.         bikeChart.draw(data, options);  
  20.     }  
  21. </script> 

Here a function is created named "brawBikePieChart()", this function is called from the page load event. In this function an Array of data is created that will be displayed in the Pie Chart.

At the end a draw() function is called that is necessary to create the chart.

Output

On running the application you will get output like this:

piechart


Similar Articles