Tagged: Charts

Google Chart in ASP.NET Application – Quick & Easy (Part 2)

In one of my previous posts, I’ve explained how to easily integrate Google charts with ASP.NET application. Here is one more example related to that subject, having some (for me) very cool data filtering features.
Note: For the sake of simplicity, I’ve removed jQuery and AJAX code, so all the processing and chart drawing happens on page load.

Here is C# code:

using System;
using System.Collections.Generic;
using System.Web.Services;
using System.Web.Script.Serialization;

public partial class Default2 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            List<DataItem> dataList = new List<DataItem>();

            dataList.Add(new DataItem("Column 1", 100, "Male", 25));
            dataList.Add(new DataItem("Column 2", 150, "Male", 37));
            dataList.Add(new DataItem("Column 3", 250, "Female", 25));
            dataList.Add(new DataItem("Column 4", 400, "Female", 35));
            dataList.Add(new DataItem("Column 5", 450, "Male", 35));
            dataList.Add(new DataItem("Column 6", 460, "Female", 26));
            dataList.Add(new DataItem("Column 7", 470, "Female", 30));
            dataList.Add(new DataItem("Column 8", 500, "Male", 31));
            dataList.Add(new DataItem("Column 9", 550, "Male", 30));
            dataList.Add(new DataItem("Column 10", 600, "Female", 33));

            JavaScriptSerializer jss = new JavaScriptSerializer();
                        
            ClientScript.RegisterStartupScript(this.GetType(), "TestInitPageScript",
                string.Format("<script type=\"text/javascript\">drawVisualization({0},'{1}','{2}','{3}');</script>",
                jss.Serialize(dataList),
                "Text Example",
                "Name,Value,Gender,Age",
                "--Choose--"));
        }
    }   
}

public class DataItem
{
    #region Internal Members

    private string _ColumnName = "";
    private double _Value1 = 0;
    private string _Value2 = null;
    private int _Value3 = 0;     

    #endregion

    #region Public Properties

    public string ColumnName
    {
        get { return _ColumnName; }
        set { _ColumnName = value; }
    }
    public double Value1
    {
        get { return _Value1; }
        set { _Value1 = value; }
    }
    public string Value2
    {
        get { return _Value2; }
        set { _Value2 = value; }
    }
    public int Value3
    {
        get { return _Value3; }
        set { _Value3 = value; }
    }

    #endregion

    #region Constructors

    public DataItem(string columnName, double value1, string value2, int value3)
    {
        _ColumnName = columnName;
        _Value1 = value1;
        _Value2 = value2;
        _Value3 = value3;
    }

    #endregion
}

ColumnName is the name of a specific item, for example person’s name, or name of the product our company makes. Values(Value1, Value2, Value3) closely represent the item, e.g. person’s age, salary, number of products sold etc. In a project I’m currently working on, I use Google chart to show which products are popular among different age/sex groups.

On page load, the data is compiled into JSON string using JavaScriptSerializer(line 29), and then the script is registered using ClientScript.RegisterStartupScript. This way, the script will be executed when loaded on client. Some additional information is also provided, including chart title(line 30), data column names(line 31), neutral value text in the category dropdown list(line 32).

ASPX & javaScript:


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Google Charts Example</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="//www.google.com/jsapi"></script>
    <script type="text/javascript">
        google.load('visualization', '1.1', { packages: ['controls'] });
    </script>
    <script type="text/javascript">  

        function drawVisualization(dataValues, chartTitle, columnNames, categoryCaption) {
            if (dataValues.length < 1)
                return;

            var data = new google.visualization.DataTable();
            data.addColumn('string', columnNames.split(',')[0]);
            data.addColumn('number', columnNames.split(',')[1]);
            data.addColumn('string', columnNames.split(',')[2]);
            data.addColumn('number', columnNames.split(',')[3]);

            for (var i = 0; i < dataValues.length; i++) {
                data.addRow([dataValues[i].ColumnName, dataValues[i].Value1, dataValues[i].Value2, dataValues[i].Value3]);
            }

            // Define a category picker control for the Gender column
            var categoryPicker = new google.visualization.ControlWrapper({
                'controlType': 'CategoryFilter',
                'containerId': 'CategoryPickerContainer',
                'options': {
                    'filterColumnLabel': columnNames.split(',')[2],
                    'ui': {
                        'labelStacking': 'horizontal',
                        'allowTyping': false,
                        'allowMultiple': false,
                        'caption': categoryCaption,
                        'label': columnNames.split(',')[2]
                    }
                }
            });

            // Define a Pie chart
            var pie = new google.visualization.ChartWrapper({
                'chartType': 'PieChart',
                'containerId': 'PieChartContainer',
                'options': {
                    'width': 600,
                    'height': 350,
                    'legend': 'right',
                    'title': chartTitle,
                    'chartArea': { 'left': 50, 'top': 15, 'right': 0, 'bottom': 0 },
                    'pieSliceText': 'label',
                    'tooltip': { 'text': 'percentage' }
                },
                'view': { 'columns': [0, 1] }
            });

            // Define a table
            var table = new google.visualization.ChartWrapper({
                'chartType': 'Table',
                'containerId': 'TableContainer',
                'options': {
                    'width': '300px'
                }
            });

            // Define a slider control for the Age column.
            var slider = new google.visualization.ControlWrapper({
                'controlType': 'NumberRangeFilter',
                'containerId': 'SliderContainer',
                'options': {
                    'filterColumnLabel': columnNames.split(',')[3],
                    'ui': { 'labelStacking': 'horizontal' }
                }
            });

            new google.visualization.Dashboard(document.getElementById('PieChartExample')).bind([categoryPicker,slider], [pie, table]).draw(data);
        }
        
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div id="PieChartExample">
            <table>
                <tr style='vertical-align: top'>
                    <td>
                        <div id="CategoryPickerContainer"></div>
                        <div id="SliderContainer"></div>
                    </td>
                </tr>
                <tr>
                    <td >
                        <div style="float: left;" id="PieChartContainer"></div>            
                        <div style="float: left;" id="TableContainer"></div>    
                    </td>
                </tr>
            </table>
        </div>
    </form>
</body>
</html>

Notice that controls package is used here, instead of corechart, that was used in previous example.
drawVisualization is the function where all the magic happens. :)
Two classes are important in this example: ControlWrapper and ChartWrapper. ControlWrapper is a wrapper around a JSON representation of a configured control instance – in this case, the “filtering” controls: CategoryFilter (for choosing sex) and NumberRangeFilter (slider, for defining age range).
Finally, new instance od Dashboard class is created, and its bind method invoked.
(I strongly recommend experimenting in Code Playground, it’s very useful!)

As a result, we get something like this:

GoogleChartsExample

When an item is selected in gender drop down list, or the age range is changed, both pie chart and table values are filtered. It all happens on client and it’s very fast. Also, the design is lite and very Google-like, so users really like it!

Google Charts, ASP.NET, jQuery, AJAX – Quick & Easy

What to do when there is a requirement in your application to make a graphical representation of some statistical data? Well, there are a lot of controls you can use, depending on your needs.

In this post, I’ll show you how to quickly and easily introduce Google charts to your ASP.NET application, getting something like this as a result:

GoogleCharts

Also, I’ll be using jQuery and AJAX for fetching data, although they are not necessary, of course.

First of all, let’s define the data we want to show in the chart. This is really basic example, so my class looks something like this:

public class Data
{
    public string ColumnName = "";
    public int Value = 0;

    public Data(string columnName, int value)
    {
        ColumnName = columnName;
        Value = value;
    }
}

This is really all we need to display the chart: data caption and value.

Next, here is the method for getting the data from the server:

[WebMethod]
public static List<Data> GetData()
{
    List<Data> dataList = new List<Data>();

    dataList.Add(new Data("Column 1", 100));
    dataList.Add(new Data("Column 2", 200));
    dataList.Add(new Data("Column 3", 300));
    dataList.Add(new Data("Column 4", 400));

    return dataList;       
}

This is a web method, since I’ll make AJAX call from the client to get JSON object containing data to be displayed. Bear in mind that there is no need for serializing to JSON string – just make the method return the object, or in this case – list of objects.

As for the client script, let’s take a look at the AJAX method for fetching the data from the server:

  
$(document).ready(function() {
    $.ajax({
        type: 'POST',
        dataType: 'json',
        contentType: 'application/json',
        url: 'Default.aspx/GetData',
        data: '{}',
        success:
            function(response) {
                drawVisualization(response.d);
            }
        });
    })
})

Nothing new here – just defining which server method to invoke and what to do when the data is received.

We need to define where the chart will be drawn:

  
<div id="visualization" style="width: 600px; height: 400px;"></div>

To display the Google chart, we must load three libraries: the Google JSAPI API, the Google Visualization library and the library for the chart itself.

First of all, Google JSAPI API:

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

Next, load the Google Visualization and chart libraries:

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

Note:
- ‘visualization’ – loads the google.visualization library, which defines all the core utility classes and functions.
- ’1′ – visualization version to load (’1′ is current production version).
- { packages: ['corechart'] } – here we can define the list of all Google chart libraries needed. The ‘corechart’ library contains most basic charts, including pie chart, which we use in this example.

Finally, here is the function that will actually draw the chart:

  
function drawVisualization(dataValues) {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Column Name');
    data.addColumn('number', 'Column Value');

    for (var i = 0; i < dataValues.length; i++) {
        data.addRow([dataValues[i].ColumnName, dataValues[i].Value]);
    }

    new google.visualization.PieChart(document.getElementById('visualization')).
        draw(data, { title: "Google Charts Example" });          
}

The code is self-explanatory: the DataTable is initialized, the columns are added to it, and then the data is entered. Finally, new PieChart is initialized and its draw method is invoked.

The whole example:
cs:

 
using System;
using System.Collections.Generic;
using System.Web.Services;

public partial class _Default : System.Web.UI.Page 
{
    protected void Page_Load(object sender, EventArgs e)
    {
        
    }

    [WebMethod]
    public static List<Data> GetData()
    {
        List<Data> dataList = new List<Data>();

        dataList.Add(new Data("Column 1", 100));
        dataList.Add(new Data("Column 2", 200));
        dataList.Add(new Data("Column 3", 300));
        dataList.Add(new Data("Column 4", 400));

        return dataList;       
    }
}

public class Data
{
    public string ColumnName = "";
    public int Value = 0;

    public Data(string columnName, int value)
    {
        ColumnName = columnName;
        Value = value;
    }
}

aspx:

 
<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="//www.google.com/jsapi"></script>
    <script type="text/javascript">
        google.load('visualization', '1', { packages: ['corechart'] });
    </script>
    <script type="text/javascript">
        $(document).ready(function() {
            $.ajax({
                type: 'POST',
                dataType: 'json',
                contentType: 'application/json',
                url: 'Default.aspx/GetData',
                data: '{}',
                success:
                    function(response) {
                        drawVisualization(response.d);
                    }

            });
        })

        function drawVisualization(dataValues) {
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Column Name');
            data.addColumn('number', 'Column Value');

            for (var i = 0; i < dataValues.length; i++) {
                data.addRow([dataValues[i].ColumnName, dataValues[i].Value]);
            }

            new google.visualization.PieChart(document.getElementById('visualization')).
                draw(data, { title: "Google Charts Example" });          
        }

        
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div id="visualization" style="width: 600px; height: 400px;"></div>
    </form>
</body>
</html>

Google charts are easy to implement and highly customizable. I will be writing more about different types of charts and how to customize them, in my future posts.