How To Use Jquery Google Chart In

In this post i will show how to add Jquery Google Chart in 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" "">
<html xmlns="">
<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() {
                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");

    <style type="text/css">
            width: 100%;
    <form id="dform" runat="server">
    <div class="right">
            Demo Chart</h4>
        <div id="bar_chart">
        <div id="bar_chart_data">
    <div class="left">
        <asp:HiddenField ID="hdValue" runat="server" />
        <asp:GridView ID="gvChart" runat="server" AutoGenerateColumns="false">
                <asp:BoundField DataField="X" HeaderText="X" />
                <asp:BoundField DataField="Y" HeaderText="Y" />
    <table style="width: 50%; margin-top: 40%;">
                Chart Type
                <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>
                Background Color
                <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>
                <input type="button" id="btnCreate" value="Create" />
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.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;

        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);


No comments:

Post a Comment