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(); }