Reply To: Drilldown with Ajax and MVC

[hecatonchireslm]

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