I have chart and i need to load data into dynamically. when static daata given it will showing chart but when it loading data from database it doesnot showing.
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack) {
GetIncome();
}
}
[WebMethod]
[ScriptMethod]
public static List GetIncome()
{
Util getcon = new Util();
List chart = new List();
string useruniq = "150883940";
SqlConnection con = getcon.GetConnection();
string querystring ="select IncomeType,UserIncomeDetail_Amount from ft_UserIncomeDetail inner join Dim_IncomeType on ft_UserIncomeDetail.IncomeType_Id = Dim_IncomeType.IncomeType_id where MONTH(UserIncomeDetail_Date) = MONTH(GETDATE()) and ft_UserIncomeDetail.User_Uniq = '"+ useruniq + "'";
SqlCommand cmd = new SqlCommand(querystring, con);
cmd.CommandType = CommandType.Text;
SqlDataReader dr = cmd.ExecuteReader();
while (dr.Read())
{
chart.Add(new Chart
{
IncomeType = dr["IncomeType"].ToString(),
IncomeAmount = dr["UserIncomeDetail_Amount"].ToString()
});
}
//cmd.Parameters.Add("@Uuniq", SqlDbType.VarChar).Value = useruniq;
//SqlDataAdapter sda = new SqlDataAdapter(cmd);
//DataTable dt = new DataTable();
//sda.Fill(dt);
//System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
//List> rows = new List>();
//Dictionary row;
//foreach (DataRow dr in dt.Rows)
//{
// row = new Dictionary();
// foreach (DataColumn col in dt.Columns)
// {
// row.Add(col.ColumnName, dr[col]);
// // row.Add(col.ColumnName, dr[col]);
// }
// rows.Add(row);
//}
//con.Close();
//return serializer.Serialize(rows);
con.Close();
return chart;
}
$(document).ready(function () {
$.ajax({
type: 'POST',
contentType: 'application/json; charset=utf-8',
url: 'UserIncome1.aspx/GetIncome',
data: '{}',
dataType: 'json',
success: OnSuccess,
failure: function (response) {
alert(response.d);
}
});
});
function getRandomColor() {
var letters = '0123456789ABCDEF';
var color = '#';
for (var i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
function OnSuccess(response) {
// var table = $("#dvCustomers table").eq(0).clone(true);
var customers = response.d;
var arr = [];
var arr1 = [];
var inval = "";
var ic = "";
var inval1 = "";
$(customers).each(function () {
arr.push(this.IncomeType);
arr1.push(this.IncomeAmount);
inval+= '{value:';
inval+=this.IncomeAmount;
inval+=', name:';
inval+="'"+this.IncomeType+"'";
inval += '},';
inval1 += { value: this.IncomeAmount, name: this.IncomeType };
inval1 += ",";
ic+="'"+getRandomColor()+"',";
});
ic = ic.substring(0, ic.length - 1);
console.log(inval1);
if( $('#e_chart_3').length > 0 ){
var eChart_3 = echarts.init(document.getElementById('e_chart_3'));
var option3 = {
tooltip : {
trigger: 'item',
formatter: '{a}
{b} : {c} ({d}%)',
backgroundColor: 'rgba(33,33,33,1)',
borderRadius:0,
padding:10,
textStyle: {
color: '#fff',
fontStyle: 'normal',
fontWeight: 'normal',
fontFamily: 'Poppins, sans-serif',
fontSize: 12
}
},
legend: {
show:false
},
toolbox: {
show : false,
},
calculable : true,
itemStyle: {
normal: {
shadowBlur: 5,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
series : [
{
name:'Month Income',
type:'pie',
radius : '80%',
center : ['50%', '50%'],
roseType : 'radius',
color: [ic],
label: {
normal: {
fontFamily: 'Poppins, sans-serif',
fontSize: 12
}
},
data: [
inval
].sort(function (a, b) { return a.value - b.value; }),
},
],
animationType: 'scale',
animationEasing: 'elasticOut',
animationDelay: function (idx) {
return Math.random() * 1000;
}
};
eChart_3.setOption(option3);
eChart_3.resize();
}
console.log(inval);
console.log(ic);
eChart_3.setOption(option3);
eChart_3.resize();
}
but getting data from back end but when it putting data into js it's not getting