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>
</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}}
