Home forums Using CanvasJS Chart layered over following div

Tagged: 

This topic contains 5 replies, has 2 voices, and was last updated by  Shashi Ranjan 1 month ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #26779

    I have two questions

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

    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.

    #26795

    @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

    #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?

    #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)
    #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"
            }
        ]
    }
    #26841

    @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

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.