Forum Replies Created

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • in reply to: Chart layered over following div #26819

    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"
            }
        ]
    }
    in reply to: Chart layered over following div #26818

    I have a test build deployed to a public server at work
    To replicate the symptoms

    • Open the page here
    • Click JSON ChartJS
    • This is Level 0. Total Event Types for Organisation. Click a segment of the doughnut chart
    • This is level 1. Drivers vs Count of Event Type. Click a segment of the bar chart
    • This is level 2. Driver and all Incidents of Event Type. The chart gives an idea of when the events occured/are clustered. The table lists out more details, with a link to Level 3 (not implemented yet)
    in reply to: Chart layered over following div #26817

    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>&nbsp;</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?

    in reply to: Drilldown with Ajax and MVC #26579

    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

    in reply to: Drilldown with Ajax and MVC #26562

    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();
            }
Viewing 5 posts - 1 through 5 (of 5 total)