Creating charts in ASP.NET using Google Chart Tools

In this article I will explain how to create charts in ASP.NET using Google Chart Tools

Download Source Code

Introduction

In this article let’s see how to create charts in ASP.NET using Google Chart Tools. Here we will see what are the various types of charts we can create using Google Chart.

Google Chart Tools

Google provides Google Chart Tools that we can use to create interactive charts in a website. It provides JavaScript classes to built charts. It renders charts using SVG components in the browsers. Following types of charts is available in Google Chart Tools

Type of Charts

  • Pie Chart
  • Column Chart
  • Bar Chart
  • Line Chart
  • Area Chart
  • Geo Chart
  • Scatter Chart
  • Gauge
  • Table
  • Treemap
  • Combo Chart
  • Candlestick Chart

Example

Let us create a simple Pie Chart in ASP.NET using Google Chart Tools

Step 1:

Create a new ASP.NET Web Application

 New Project_2013-01-24_22-20-48

Step 2:

Add a div element in the HTML source of Default.aspx page that will be containing our Pie chart and give it an ID

<div id="chart_container"></div>

Step 3:

Add following JavaScript code in the Head section of Default.aspx page (Put it in Master page’s Head section if you are using a Master page)

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<script type="text/javascript">
     google.load('visualization', '1.0', { 'packages': ['corechart'] });
     google.setOnLoadCallback(drawChart);

     function drawChart() {
          // Create the data table.
          var data = new google.visualization.DataTable();
          data.addColumn('string', 'Mobile OS');
          data.addColumn('number', 'Market Share');
          data.addRows([
               ['iOS', 60.13],
               ['Android', 24.6],
               ['Java ME', 10.18],
               ['BlackBerry', 1.59],
               ['Symbian', 1.53],
               ['Windows Phone', 1.05],
               ['Others', 0.92]
          ]);

          // Set chart options
          var options = { 'title': 'Market shares of mobile OS',
               'width': 400,
               'height': 300
          };

          // Instantiate and draw our chart, passing in some options.
          var chart = new google.visualization.PieChart(document.getElementById(' chart_container'));
          chart.draw(data, options);
}
</script>

Here we have used two script tags. First script tag loads Google JSAPI. Second tag is used to draw the chart.

In the second script tag, google.load function is used to load the visualization library that contains classes and functions to draw the chart. After this google.setOnLoadCallback function calls drawCharts function when all libraries are loaded.

In drawCharts function first a DataTable is created using google.visualization.DataTable and then two columns are added to the DataTable with string and number data type to represent ‘OS name’ and ‘Percentage of shares’ respectively.

Then rows are added to the DataTable with ‘OS name’ and ‘Percentage of shares’ values. Each row represents a slice in the Pie Chart.

After creating DataTable, options of chart like title, width and height are set. Then google.visualization.PieChart class is used to create the PieChart. Id of the container div is passed to it to draw chart on it. At last chart is drawn using draw method.

Output:

Google Chart Tool - PieChart

Leave a Reply

Your email address will not be published. Required fields are marked *