Home › Forums › Chart Support › Drilldown with Ajax and MVC › Reply To: Drilldown with Ajax and MVC
I had a friend help me through a few rough bits. Currently getting the console error You cannot combine “column” with pie chart which is interesting as I’m not referencing either. I’m trying to load a doughnut.
var param = {
orgCode: "HVO",
processDate: new Date("2019-08-26"),
eventType: "",
driverId: ""
}
// which layer is being displayed. 0 is the start. increases as drilled down
var currentLayer = 0; //0 is default starting layer
// container passed to charts
var dataPoints = [];
var chart = new CanvasJS.Chart("chartContainer", {
title: {
text: "Rendering Chart with dataPoints from External JSON"
},
data: [{
type: "doughnut",
dataPoints: dataPoints,
}]
});
// array holding options for each layers charts
var chartOptions = [
{
click: layer0ClickHandler,
cursor: "pointer",
title: {
text: "Events breakdown by Event Type"
},
data: [
{
type: "doughnut",
dataPoints: []
}
]
},
{
click: layer0ClickHandler,
cursor: "pointer",
title: {
text: "Event Type grouped by Driver"
},
data: [
{
type: "doughnut",
dataPoints: []
}
]
}
,
{
click: layer0ClickHandler,
cursor: "pointer",
title: {
text: "Event Type by Driver"
},
data: [
{
type: "doughnut",
dataPoints: []
}
]
}
];
// array holding the AJAX options when a layer is clicked
var ajaxOptions = [
{
url: "JsonChartJs/GetLayer0",
data: {
layer: 0,
processDate: encodeURIComponent(formatDateInput(param.processDate)),
orgCode: encodeURIComponent(param.orgCode)
},
callback : layer0CallbackHandler
},
{
url: "JsonChartJs/GetLayer1",
data: {
layer: 1,
processDate: encodeURIComponent(formatDateInput(param.processDate)),
orgCode: encodeURIComponent(param.orgCode),
eventType: encodeURIComponent(param.eventType)
},
callback : layer1CallbackHandler
},
{
url: "JsonChartJs/GetLayer2",
data: {
layer: 2,
processDate: encodeURIComponent(formatDateInput(param.processDate)),
orgCode: encodeURIComponent(param.orgCode),
eventType: encodeURIComponent(param.eventType),
driverId: encodeURIComponent(param.driverId)
},
callback : layer2CallbackHandler
}
];
//AJAX call based on current layer. Returns to designated callback handler (in options)
function doAjax(layerIndex) {
console.log("Ajax Url: " + ajaxOptions[layerIndex].url);
$.ajax({
type: "GET",
cache: false,
dataType: "json",
url: ajaxOptions[layerIndex].url,
data: ajaxOptions[layerIndex].data,
success: function (serverResponse) {
//once a successful response has been received,
//no HTTP error or timeout reached,
//run the callback for this request
ajaxOptions[layerIndex].callback(serverResponse);
},
complete : function () {
//note that the "done" callback will fire
//before the "always" callback
console.log("Ajax call complete");
}
});
}
// Callback handlers. Currently all the same. Will differentiate
// as layers devlop and data requirements change
function layer0CallbackHandler(data) {
console.log("func layer0CallbackHandler");
//console.table(data);
currentLayer = 0;
dataPoints.length = 0;
$.each(data, function (key, value) {
dataPoints.push({ label: value["name"], y: parseInt(value["y"]), color: value["color"] });
});
chartOptions[currentLayer].data.push(dataPoints);
chart.options = chartOptions[currentLayer];
//$("#chartContainer").CanvasJS.Chart(chartOptions[currentLayer]);
chart.render();
}