jQuery

Using jQuery Google Charts (JGCharts) with ASP.NET application

I had been looking for a light weight charting library that I could use with my ASP.NET application for a while now. There are a number of charting libraries with jQuery but I found the jQuery wrapper for Google Charts by Massimiliano Balestrieri to be efficient and simple to use.

In this tutorial I will show you how to integrate jQuery Google Charts 1.0 with your ASP.NET application.

Income and Expense Chart

Let us start by downloading the libraries required for this to work. We need two JavaScript files to be downloaded:

  1. jQuery 1.3.2 Minified Version
  2. jgcharts Library

Next is to create or open an existing ASP.NET web page that will display the chart, and include these libraries in the HEAD section of the page.

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

<head runat="server">

    <title>jQuery Google Chart Demo</title>

    <script src="jquery-1.3.2.min.js" type="text/javascript"></script>

    <script src="jgcharts.pack.js" type="text/javascript"></script>

</head>

<body>

    <form id="dform" runat="server">

    <div></div>

    </form>

</body>

</html>

 

Within the BODY tags of this page, Let us create two DIV’s, one to display the chart (bar_chart) and another one to display the data (bar_chart_data). A Hidden field is also defined that will hold the JavaScript Array of the GridView data. This will be used by the Charting Library on the client side to display the Bar Chart.

<body>

    <form id="dform" runat="server">

        <h4>Income and Expense Overview</h4>

        <div id="bar_chart"></div>

        <div id="bar_chart_data">

            <asp:HiddenField ID="hidChartData" runat="server" />

            <asp:GridView ID="grvIncomeExp" runat="server">

                <Columns>

                    <asp:BoundField DataField="Month" HeaderText="Month" DataFormatString="{0:c}" />

                    <asp:BoundField DataField="Income" HeaderText="Income" DataFormatString="{0:c}" />

                    <asp:BoundField DataField="Expense" HeaderText="Expense" DataFormatString="{0:c}" />

                </Columns>

            </asp:GridView>

        </div>

    </form>

</body>

 

Within the HEAD tag of this page, you will need to create a jQuery call to initiate the Charting api’s and create graph based on data available in “hidChartData” hidden field.

<head runat="server">

    <title>jQuery Google Chart Demo</title>

    <script src="JQuery/jquery-1.3.2.min.js" type="text/javascript"></script>

    <script src="JQuery/jgcharts.pack.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function()

        {

            var api = new jGCharts.Api();

            var opt = 

            { 

                data : eval($("[id$='hidChartData']").val()),   

                axis_labels : ['01','02','03','04','05','06','07','08','09','10','11','12'],

                legend : ['Income', 'Expense'],

                size : '600x335',

                bar_width : 15

            };

            jQuery('<img>').attr('src', api.make(opt)).appendTo("#bar_chart"); 

        });

    </script>

</head>

f you now look at the page in the browser – you should see a blank bar chart without any data in it. This is because we have not bound the data to the Hidden Field (hidChartData) and the GridView.

Bar Chart without Data

Lets now look add a Page_Load function in the code behind. This event handler will bind data to the GridView and assign the value to the HiddenField with a JavaScript array of data.

protected void Page_Load(object sender, EventArgs e)

{

        DataTable dTable = GetSampleData();

        grvIncomeExp.DataSource = dTable;

        grvIncomeExp.DataBind();

 

        ArrayList chartData = new ArrayList();

        foreach (DataRow dr in dTable.Rows)

        {

            chartData.Add(String.Format("[{0}, {1}]", dr[1], dr[2].ToString().Replace("-", "")));

        }

 

        //Convert .NET Array to JS Array

        string ReturnValue = String.Empty;

        for (int i = 0; i < chartData.Count; i++)

        {

            ReturnValue += chartData[i];

            if (i != chartData.Count - 1)

                ReturnValue += ",";

        }

 

        //Data is returned in the following format: 

        //[[1000, 3003.55],[1000, 72.65],[1000, 760.89],[1000, 354.55],[1000, 180.52],[1000, 408.54],[0, 0],[0, 0],[0, 0],[0, 0],[0, 0],[0, 0]]

 

        hidChartData.Value = String.Format("[{0}]", ReturnValue);

}

This will create the chart displayed in the first Image. NOTE: I have removed all CSS styles to make the code more readable.