https://www.aspsnippets.com/Articles/Using-HTML5-Canvas-charts-in-ASPNet.aspx
The above chart is there in HTML Canvas.
Can i do the same chart in google chart with parameter
The same i want to have with parameter.
I tried the below method .. It shows undefined on page load... Let me know what i did wrong ... Let me know how to do so ...
Once again thanks for quick reply ...
<%@ 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>
</head>
<body>
<form id="form1" runat="server">
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jsapi.js" type="text/javascript"></script>
<asp:DropDownList ID="DrpMonth" runat="server" >
<asp:ListItem Text = "January" Value = "January" Selected="True"></asp:ListItem>
<asp:ListItem Text = "March" Value = "March"></asp:ListItem>
<asp:ListItem Text = "April" Value = "April"></asp:ListItem>
<asp:ListItem Text = "June" Value = "June"></asp:ListItem>
<asp:ListItem Text = "November" Value = "November"></asp:ListItem>
</asp:DropDownList>
<script type="text/javascript">
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
var options = {
title: 'Chart',
is3D: false
};
var Month = $('#<%=DrpMonth.ClientID %>').val();
$.ajax({
type: "POST",
url: "Default.aspx/GetChartData",
data: "{Month: '" + $("[id*=DrpMonth]").val() + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (r) {
var data = google.visualization.arrayToDataTable(r.d);
var chart = new google.visualization.PieChart($("#chart")[0]);
chart.draw(data, options);
},
failure: function (r) {
alert(r.d);
},
error: function (r) {
alert(r.d);
}
});
}
</script>
<div id="chart" style="width: 900px; height: 500px;">
</div>
</form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Web.Services;
using System.Configuration;
using System.Data.SqlClient;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public static List<object> GetChartData(string Month)
{
string query = "SELECT DATENAME(MONTH,Date) as [MonthName], sum(isnull(Qty,0)) as OrderQty FROM [TestDB].[dbo].[Order] where DATENAME(MONTH,Date)=@Month ";
query += " GROUP BY DATENAME(MONTH, Date)";
string constr = ConfigurationManager.ConnectionStrings["Con"].ConnectionString;
List<object> chartData = new List<object>();
chartData.Add(new object[]
{
"MonthName", "OrderQty"
});
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand(query))
{
cmd.CommandType = CommandType.Text;
cmd.Connection = con;
con.Open();
using (SqlDataReader sdr = cmd.ExecuteReader())
{
while (sdr.Read())
{
chartData.Add(new object[]
{
sdr["MonthName"], sdr["OrderQty"]
});
}
}
con.Close();
return chartData;
}
}
}
}
