Hi,
I have a chart that is developed using canvas js. I have used AJAX method for passing the values and the values are passed successfully… But the problem is that the Chart is not showing in the page… I have an array of values that are to passed into the data points, But I don’t know the correct format… The pieces of the sample code is given below… Any help will be appreciated…
$(function() {
$("[id*=rbtnZone]").click(function() {
var row = $(this).closest('tr');
var branchId = $(row).find('[id*=hfBranchId]').val();
var rbtlSales = $("#<%= rbtlSales.ClientID%>");
var selectedValue = rbtlSales.find("input:checked").val();
$.ajax({
url: '<%=ResolveUrl("Corporate/Sales.aspx/GetZoneData") %>',
data: "{'rbtlSales':'" + selectedValue + "'}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function(data) {
var labels = [];
var datas = [];
var dpoints = [];
var lpoints = [];
$.each(data.d, function(i, item) {
var l = item.split('-')[0];
var d = item.split('-')[1];
var dd = d | 0;
labels.push(l);
datas.push(dd);
var lblmsg = "Total Sales : Rs. " + eval(datas.join('+'));
document.getElementById('<%=lblTotal.ClientID %>').innerHTML = lblmsg;
});
dpoints.push(datas);
alert(dpoints);
lpoints.push(labels);
var jlpoints = JSON.stringify(lpoints);
alert(jlpoints);
var dp = [];
for (var item in jlpoints) {
dp.push(jlpoints);
}
alert(dp);
var chart = new CanvasJS.Chart("chartContainer", {
title: {
text: lblmsg
},
animationEnabled: true,
axisX: {
intervel: 1000,
gridThickness: 0,
labelFontSize: 10,
labelFontStyle: "normal",
labelFontWeight: "normal"
},
axisY2: {
interlacedColor: "rgba(1,77,101,.2)",
gridColor: "rgba(1,77,101,.1)"
},
data: [
{
type: "bar",
name: "ZoneSalesData",
showLegend: true,
axisYType: "primary",
color: "#014D65",
dataPoints: dp
}
]
});
}
});
chart.render();
});
});
.
