Reply To: Chart layered over following div

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