User1152553138 posted
I tried ... Chart is not displaying
<%@ 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="js/Chart.js" type="text/javascript"></script>
<script src="js/jquery-2.1.4.min.js" type="text/javascript"></script>
<select id="ddlyear">
<option>2010</option>
<option>2011</option>
<option>2012</option>
<option>2013</option>
<option>2014</option>
<option>2015</option>
</select>
<select id="ddlMonth">
<option value="1">Jan</option>
<option value="2">Feb</option>
<option value="3">Mar</option></select>
<button id="btnGeneratePieChart">Show</button>
<br/>
<script type="text/javascript">
$(document).ready(function () {
$("btnGeneratePieChart").on('click', function (e) {
e.preventDefault();
var gData = [];
gData[0] = $("#ddlyear").val();
// gData[1] = $("#ddlMonth").val();
var jsonData = JSON.stringify({
gData: gData
});
$.ajax({
type: "POST",
url: "Deafult.aspx/getTrafficSourceData",
data: jsonData,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess_,
error: OnErrorCall_
});
function OnSuccess_(response) {
var aData = response.d;
var arr = [];
$.each(aData, function (inx, val) {
var obj = {};
obj.color = val.color;
obj.value = val.value;
obj.label = val.label;
arr.push(obj);
});
var ctx = $("#myChart").get(0).getContext("2d");
var myPieChart = new Chart(ctx).Pie(arr);
}
function OnErrorCall_(response) { }
e.preventDefault();
});
});
</script>
<canvas id="myChart" width="200" height="200"></canvas>
</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.Text;
using System.Web.Services;
using System.Data.SqlClient;
using System.Configuration;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
public class trafficSourceData
{
public string label { get; set; }
public string value { get; set; }
public string color { get; set; }
public string hightlight { get; set; }
}
[WebMethod]
public List<trafficSourceData> getTrafficSourceData(List<string> gData)
{
List<trafficSourceData> t = new List<trafficSourceData>();
string[] arrColor = new string[] { "#231F20", "#FFC200", "#F44937", "#16F27E", "#FC9775", "#5A69A6" };
string conn = ConfigurationManager.ConnectionStrings["ConString"].ConnectionString;
using (SqlConnection cn = new SqlConnection(conn))
{
string myQuery = "select * from traffic_data where YEAR =@year ";
SqlCommand cmd = new SqlCommand();
cmd.CommandText = myQuery;
cmd.CommandType = CommandType.Text;
cmd.Parameters.AddWithValue("@year", gData[0]);
//cmd.Parameters.AddWithValue("@month", gData[1]);
cmd.Connection = cn;
cn.Open();
SqlDataReader dr = cmd.ExecuteReader();
if (dr.HasRows)
{
int counter = 0;
while (dr.Read())
{
trafficSourceData tsData = new trafficSourceData();
tsData.value = dr["visit_count"].ToString();
tsData.label = dr["traffic_source"].ToString();
tsData.color = arrColor[counter];
t.Add(tsData);
counter++;
}
}
}
return t;
}
}
