Creating Charts in ASP.NET Using Google Chart Tools

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

Introduction

In this article let's see how to create charts in ASP.NET using Google Chart Tools and what the various types of charts are that 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. The following types of charts are available in Google
Chart Tools.

Types of Charts

The following are the types of charts available:

• 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 chart in ASP.NET using Google Chart Tools.

Step 1

Create a new ASP.NET Web Application.



Step 2

Add a div element in the HTML source of Default.aspx page that will contain our Pie Chart and give it an ID, as in:

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

Step 3

Add the following JavaScript code in the Head section of Default.aspx page (put it in the 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. The first script tag loads the Google JSAPI. The second tag is used to draw the chart.

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

In the drawCharts function, first a DataTable is created using google.visualization.DataTable. Two columns are added to the DataTable as a string and a number data type to represent the OS name and share the percentage respectively.

Then rows are added to the DataTable with OS name and percentage of share values. Each row represents a slice in the Pie Chart.

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

Output