When entering level2, example data would be like the following., The chartSubtitle needs work :/
data { "chartSubTitle": "Driving w/o Seatbelt's for Driver Brendon Baillie", "tableData": [ { "eventTypeDisplay": "Driving w/o Seatbelt", "eventTypeId": "SeatbeltDriving", "colour": "midnightblue", "value": 0, "driverId": "Brendon Baillie", "nodeId": 13505, "startTime": "2019-09-18T08:17:58", "endTime": "2019-09-18T08:24:55", "firstLogId": 1046507704, "lastLogId": 1046511960, "minSpeed": 13, "maxSpeed": 50, "avgSpeed": 30, "calcSummOdo": 3691, "unitName": "1490 LV2935 DD&B Cable Crew" }, { "eventTypeDisplay": "Driving w/o Seatbelt", "eventTypeId": "SeatbeltDriving", "colour": "midnightblue", "value": 0, "driverId": "Brendon Baillie", "nodeId": 13505, "startTime": "2019-09-18T08:50:40", "endTime": "2019-09-18T08:56:59", "firstLogId": 1046525787, "lastLogId": 1046529591, "minSpeed": 12, "maxSpeed": 52, "avgSpeed": 36, "calcSummOdo": 4162, "unitName": "1490 LV2935 DD&B Cable Crew" }, { "eventTypeDisplay": "Driving w/o Seatbelt", "eventTypeId": "SeatbeltDriving", "colour": "midnightblue", "value": 0, "driverId": "Brendon Baillie", "nodeId": 13505, "startTime": "2019-09-18T08:58:30", "endTime": "2019-09-18T08:59:56", "firstLogId": 1046530196, "lastLogId": 1046531001, "minSpeed": 13, "maxSpeed": 45, "avgSpeed": 27, "calcSummOdo": 695, "unitName": "1490 LV2935 DD&B Cable Crew" }, { "eventTypeDisplay": "Driving w/o Seatbelt", "eventTypeId": "SeatbeltDriving", "colour": "midnightblue", "value": 0, "driverId": "Brendon Baillie", "nodeId": 13505, "startTime": "2019-09-18T11:24:00", "endTime": "2019-09-18T11:24:30", "firstLogId": 1046609281, "lastLogId": 1046609555, "minSpeed": 16, "maxSpeed": 23, "avgSpeed": 18, "calcSummOdo": 140, "unitName": "1490 LV2935 DD&B Cable Crew" }, { "eventTypeDisplay": "Driving w/o Seatbelt", "eventTypeId": "SeatbeltDriving", "colour": "midnightblue", "value": 0, "driverId": "Brendon Baillie", "nodeId": 13505, "startTime": "2019-09-18T11:24:53", "endTime": "2019-09-18T11:28:34", "firstLogId": 1046609699, "lastLogId": 1046611942, "minSpeed": 12, "maxSpeed": 54, "avgSpeed": 41, "calcSummOdo": 3190, "unitName": "1490 LV2935 DD&B Cable Crew" }, { "eventTypeDisplay": "Driving w/o Seatbelt", "eventTypeId": "SeatbeltDriving", "colour": "midnightblue", "value": 0, "driverId": "Brendon Baillie", "nodeId": 13505, "startTime": "2019-09-18T11:30:30", "endTime": "2019-09-18T11:31:00", "firstLogId": 1046613011, "lastLogId": 1046613379, "minSpeed": 13, "maxSpeed": 22, "avgSpeed": 18, "calcSummOdo": 188, "unitName": "1490 LV2935 DD&B Cable Crew" }, { "eventTypeDisplay": "Driving w/o Seatbelt", "eventTypeId": "SeatbeltDriving", "colour": "midnightblue", "value": 0, "driverId": "Brendon Baillie", "nodeId": 13505, "startTime": "2019-09-18T11:42:43", "endTime": "2019-09-18T11:48:54", "firstLogId": 1046618479, "lastLogId": 1046621721, "minSpeed": 11, "maxSpeed": 54, "avgSpeed": 31, "calcSummOdo": 3478, "unitName": "1490 LV2935 DD&B Cable Crew" }, { "eventTypeDisplay": "Driving w/o Seatbelt", "eventTypeId": "SeatbeltDriving", "colour": "midnightblue", "value": 0, "driverId": "Brendon Baillie", "nodeId": 13505, "startTime": "2019-09-18T11:49:14", "endTime": "2019-09-18T11:50:08", "firstLogId": 1046627274, "lastLogId": 1046627473, "minSpeed": 0, "maxSpeed": 35, "avgSpeed": 14, "calcSummOdo": 462, "unitName": "1490 LV2935 DD&B Cable Crew" }, { "eventTypeDisplay": "Driving w/o Seatbelt", "eventTypeId": "SeatbeltDriving", "colour": "midnightblue", "value": 0, "driverId": "Brendon Baillie", "nodeId": 13505, "startTime": "2019-09-18T11:58:00", "endTime": "2019-09-18T12:00:00", "firstLogId": 1046627489, "lastLogId": 1046627777, "minSpeed": 0, "maxSpeed": 50, "avgSpeed": 21, "calcSummOdo": 890, "unitName": "1490 LV2935 DD&B Cable Crew" }, { "eventTypeDisplay": "Driving w/o Seatbelt", "eventTypeId": "SeatbeltDriving", "colour": "midnightblue", "value": 0, "driverId": "Brendon Baillie", "nodeId": 13505, "startTime": "2019-09-18T12:00:54", "endTime": "2019-09-18T12:07:41", "firstLogId": 1046627979, "lastLogId": 1046631650, "minSpeed": 13, "maxSpeed": 54, "avgSpeed": 34, "calcSummOdo": 3896, "unitName": "1490 LV2935 DD&B Cable Crew" }, { "eventTypeDisplay": "Driving w/o Seatbelt", "eventTypeId": "SeatbeltDriving", "colour": "midnightblue", "value": 0, "driverId": "Brendon Baillie", "nodeId": 13505, "startTime": "2019-09-18T15:55:03", "endTime": "2019-09-18T15:56:53", "firstLogId": 1046752136, "lastLogId": 1046753042, "minSpeed": 14, "maxSpeed": 54, "avgSpeed": 30, "calcSummOdo": 916, "unitName": "1490 LV2935 DD&B Cable Crew" }, { "eventTypeDisplay": "Driving w/o Seatbelt", "eventTypeId": "SeatbeltDriving", "colour": "midnightblue", "value": 0, "driverId": "Brendon Baillie", "nodeId": 13505, "startTime": "2019-09-18T16:03:30", "endTime": "2019-09-18T16:05:54", "firstLogId": 1046756474, "lastLogId": 1046757552, "minSpeed": 12, "maxSpeed": 50, "avgSpeed": 24, "calcSummOdo": 1000, "unitName": "1490 LV2935 DD&B Cable Crew" } ], "dataPoints": [ { "x": 1, "y": 50, "name": "SeatbeltDriving", "color": "midnightblue", "label": "08:17:58" }, { "x": 2, "y": 52, "name": "SeatbeltDriving", "color": "midnightblue", "label": "08:50:40" }, { "x": 3, "y": 45, "name": "SeatbeltDriving", "color": "midnightblue", "label": "08:58:30" }, { "x": 4, "y": 23, "name": "SeatbeltDriving", "color": "midnightblue", "label": "11:24:00" }, { "x": 5, "y": 54, "name": "SeatbeltDriving", "color": "midnightblue", "label": "11:24:53" }, { "x": 6, "y": 22, "name": "SeatbeltDriving", "color": "midnightblue", "label": "11:30:30" }, { "x": 7, "y": 54, "name": "SeatbeltDriving", "color": "midnightblue", "label": "11:42:43" }, { "x": 8, "y": 35, "name": "SeatbeltDriving", "color": "midnightblue", "label": "11:49:14" }, { "x": 9, "y": 50, "name": "SeatbeltDriving", "color": "midnightblue", "label": "11:58:00" }, { "x": 10, "y": 54, "name": "SeatbeltDriving", "color": "midnightblue", "label": "12:00:54" }, { "x": 11, "y": 54, "name": "SeatbeltDriving", "color": "midnightblue", "label": "15:55:03" }, { "x": 12, "y": 50, "name": "SeatbeltDriving", "color": "midnightblue", "label": "16:03:30" } ] }
I have a test build deployed to a public server at work To replicate the symptoms
I can certainly share the html page with the script sections. I cannot share the mvc and the matching database queries. I don’t have the skills to break that out for a Fiddle.
The html is simply a div for the chart and a div for the table
<div id="chartContainer"></div> <div id="tableContainer"></div>
The method that fills them receives data from an Ajax call (as do all the other ajax callback handlers)
function layer2CallbackHandler(data) { console.log("func start layer2CallbackHandler"); logObjectAsJson(data, "data"); chartOptions[layer.current].data[0].dataPoints = []; var i = 0; var x = 0; $.each(data.dataPoints, function (key, value) { i++; colorIndex = i % 5; chartOptions[layer.current].data[0].dataPoints.push({ label: value["label"], y: i, color: value["color"], name: value["name"] }); //colorPalette[colorIndex] }); chart = new CanvasJS.Chart("chartContainer", chartOptions[layer.current]); chart.options.subtitles[0].text = data.chartSubTitle; console.log("Chart Subtitle: " + chart.options.subtitles[0].text); chart.render(); $("#tableContainer").empty(); var table = '<table id="layer2table"></table>' $("#tableContainer").append(table); var odd_even = false; var i = 0; var response = data.tableData; var head = '<thead><tr>'; head += "<th>Event Type</td>"; head += "<th>Start Time</td>"; head += "<th>End Time</td>"; head += "<th>Unit Name</td>"; head += "<th>Max Speed</td>"; head += "<th> </td>"; head += '</thead></tr>'; console.log(head); $("#layer2table").append(head);//append header var tbody = '<tbody>'; var tr=[]; for (var i = 0; i < response.length; i++) { tr.push('<tr class="' + (i % 2 == 1 ? 'odd' : 'even') + '">'); tr.push('<td>' + response[i].eventTypeDisplay + '</td>'); tr.push('<td class="nowrap">' + response[i].startTime + '</td>'); tr.push('<td class="nowrap">' + response[i].endTime + '</td>'); tr.push('<td>' + response[i].unitName + '</td>'); tr.push('<td>' + response[i].maxSpeed + '</td>'); tr.push('<td><a href="EventDetails?fl=' + response[i].firstLogId + '&ll=' + response[i].lastLogId + '&n=' + response[i].nodeId + '">Details</a></td>'); tr.push('</tr>'); } tbody += tr.join(''); tbody += '</tbody>'; console.log(tbody); $("#layer2table").append(tbody);//append tbody //logObjectAsJson(chart, "chart"); console.log("func end layer2CallbackHandler"); }
The javascript works. The chart is filled, the table is created. What is the chart doing to overlay following html entities?
Following is my chart object just before chart.render() Logged with JSON.stringify(chart) `{ “options”: { “cursor”: “pointer”, “title”: { “text”: “Events breakdown by Event Type” }, “data”: [ { “type”: “doughnut”, “dataPoints”: [ [ { “label”: “Severe G-Force”, “y”: 2, “color”: “blueviolet” }, { “label”: “High G-Force”, “y”: 21, “color”: “darkmagenta” }, { “label”: “Driving w/o Seatbelt”, “y”: 38, “color”: “midnightblue” }, { “label”: “Speed Violation”, “y”: 171, “color”: “red” } ] ] } ] } }’
Chart renders as an empty box with the Chart Title (Events breakdown by Event Type) and a tiny canvas.js link in the bottom right
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(); }