Skip to main content

How To Use Jquery Google Chart In asp.net

In this post i will show how to add Jquery Google Chart in asp.net. Click Here to download Jquery Google Chart Plugin
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Chart.aspx.cs" Inherits="Chart" %>

<!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>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>

    <link href="Style/style.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript">
        $(document).ready(function() {
            $("#btnCreate").click(function() {
                $("#bar_chart").html("");
                var api = new jGCharts.Api();
                var opt =
            {
                data: eval($("[id$='hdValue']").val()),
                axis_labels: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12'],
                legend: ['X', 'Y'],
                size: '600x335',
                type: $("[id$='ddlType']").val(),
                bg: $("[id$='ddlColor']").val(),
                bar_width: 15
            };
                jQuery('<img>').attr('src', api.make(opt)).appendTo("#bar_chart");
            });
        });
    </script>

    <style type="text/css">
        .style1
        {
            width: 100%;
        }
    </style>
</head>
<body>
    <form id="dform" runat="server">
    <div class="right">
        <h4>
            Demo Chart</h4>
        <div id="bar_chart">
        </div>
        <div id="bar_chart_data">
        </div>
    </div>
    <div class="left">
        <asp:HiddenField ID="hdValue" runat="server" />
        <asp:GridView ID="gvChart" runat="server" AutoGenerateColumns="false">
            <Columns>
                <asp:BoundField DataField="X" HeaderText="X" />
                <asp:BoundField DataField="Y" HeaderText="Y" />
            </Columns>
        </asp:GridView>
    </div>
    <table style="width: 50%; margin-top: 40%;">
        <tr>
            <td>
                Chart Type
            </td>
            <td>
                <asp:DropDownList ID="ddlType" runat="server">
                    <asp:ListItem Value="stripes">Stripes</asp:ListItem>
                    <asp:ListItem Value="p">Pie</asp:ListItem>
                    <asp:ListItem Value="p3">Pie3D</asp:ListItem>
                    <asp:ListItem Value="lc">Line</asp:ListItem>
                    <asp:ListItem Value="bhs">Stacked Bar</asp:ListItem>
                </asp:DropDownList>
            </td>
        </tr>
        <tr>
            <td>
                Background Color
            </td>
            <td>
                <asp:DropDownList ID="ddlColor" runat="server">
                    <asp:ListItem Text="Red" Value="FF0000"></asp:ListItem>
                    <asp:ListItem Text="Light Blue" Value="0000FF"></asp:ListItem>
                    <asp:ListItem Text="Light Purple" Value="FF0080"></asp:ListItem>
                    <asp:ListItem Text="Light Gray" Value="C0C0C0"></asp:ListItem>
                </asp:DropDownList>
            </td>
        </tr>
        <tr>
            <td>
                &nbsp;
            </td>
            <td>
                <input type="button" id="btnCreate" value="Create" />
            </td>
        </tr>
    </table>
    </form>
</body>
</html>
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;

public partial class Chart : System.Web.UI.Page
{
    private DataTable GetSampleData()
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("X");
        dt.Columns.Add("Y");
        dt.Rows.Add("1000", "3003.55");
        dt.Rows.Add("1000", "72.65");
        dt.Rows.Add("1000", "760.89");
        dt.Rows.Add("1000", "354.55");
        dt.Rows.Add("1000", "180.52");
        dt.Rows.Add("1000", "408.54");
        return dt;

    }
    protected void Page_Load(object sender, EventArgs e)
    {
        DataTable dt = GetSampleData();
        gvChart.DataSource = dt;
        gvChart.DataBind();

        ArrayList chartData = new ArrayList();
        foreach (DataRow dr in dt.Rows)
        {
            chartData.Add(String.Format("[{0}, {1}]", dr[0], dr[1].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: 
        //[[X, Y]

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

    }
}
{{download}}

Comments

Popular posts from this blog