Chart layered over following div

[hecatonchireslm]

I have two questions

1) How do I restore normal div flow, so this chart doesn’t overflow the table below it

2) How do I get natural spacing along the X-axis? The chart is intended to show clustering events as they occur
eg: xxx…..xxx….x….xx….
not: x.x.x.x.x.x.x.

[Shashi Ranjan]

@hecatonchireslm,

Can you kindly create a JSFiddle reproducing the issue and share it with us so that we can look into the code, understand the scenario better and help you out?

—
Shashi Ranjan
Team CanvasJS

[hecatonchireslm]

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?

[hecatonchireslm]

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)

[hecatonchireslm]

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"
        }
    ]
}

[Shashi Ranjan]

@hecatonchireslm,

Setting height of the chart-container <div id="chartContainer" style="height: 360px"></div> should work fine in your case.

If you are still facing the issue, kindly share a sample project along with the sample data reproducing the issue over Google Drive / OneDrive so that we can look into code, understand the scenario better and help you out.

—
Shashi Ranjan
Team CanvasJS