You must be logged in to post your query.
Home › Forums › Chart Support › Chart layered over following div
Tagged: chartjs css
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.
@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
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?
I have a test build deployed to a public server at work To replicate the symptoms
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" } ] }
Setting height of the chart-container <div id="chartContainer" style="height: 360px"></div> should work fine in your case.
<div id="chartContainer" style="height: 360px"></div>
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.
You must be logged in to reply to this topic. Login/Register