Как улучшить производительность загрузки данных, если в каждом столбце данных есть визуализированная диаграмма?

Question

У меня есть таблица данных, представленная с диаграммой в каждом столбце, таблица данных, сгенерированная из данных ответов ajax, имеет более 1000 записей. Визуализация диаграммы внутри столбцов приводит к проблемам с производительностью. Как улучшить производительность?

Вот код, который я использую:

Ajax:

var resData = [];
$.ajax({
    'type': "POST",
    'url': "CoxModel/processTypes/execution",
    'data': dataList,
    'beforeSend': function() {
        $(".graphloadertraining").show();
    },
    'success': function(data) {
        response = $.parseJSON(data);
        response = response.data
        $.each(response, function(index, value) {
                var jsonObject = JSON.stringify(response);
                var count = JSON.parse(jsonObject).length;
                resData.push(value);
            })
        variableData(resData);
        // return data;
    }
});

график генерирует:

function variableData(data) {
    $(".graphloader").hide();

    var newAry = {};
    var newAryy = [];

    i = 0;
    $.each(data, function(index, value) {
        var pd = value.PROCESSDATE;
        var pt = value.PROCESS_TYPE;
        var mn = value.MODELNAME;
        var vn = value.VARIABLENAME;
        var vc = value.VARIABLECONTRIBUTION;

        if (!newAry[pt]) {
            newAry[pt] = {};
        }
        if (!newAry[pt][mn]) {
            newAry[pt][mn] = {};
        }
        if (!newAry[pt][mn][vn]) {
            newAry[pt][mn][vn] = {};
        }

        if (!newAry[pt][mn][vn]['pd']) {
            newAry[pt][mn][vn]['pd'] = [];
        }

        if (!newAry[pt][mn][vn]['vc']) {
            newAry[pt][mn][vn]['vc'] = [];
        }

        newAry[pt][mn][vn]['pd'].push(pd);
        newAry[pt][mn][vn]['vc'].push(vc);

        i++;
    });

    if ($.fn.DataTable.isDataTable("#cox-model-modelgraph-variable")) {
        $('#cox-model-modelgraph-variable').DataTable().clear().destroy();
    }

    tableWithChart = $('#cox-model-modelgraph-variable tbody');
    tableBodyContent = '';

    $.each(newAry, function(pType, pTypeValue) {
        $.each(pTypeValue, function(mName, mNameValue) {
            $.each(mNameValue, function(vName, vNameValue) {
                tableBodyContent += '<tr><td>' + pType + '</td>';
                tableBodyContent += '<td>' + mName + '</td>';
                tableBodyContent += '<td>' + vName + '</td>';
                tableBodyContent += '<td><div  id="model-graph-' + pType + '-' + mName + '-' + vName + '" data-value="' + vNameValue.pd + '|' + vNameValue.vc + '"></div></td>';
                tableBodyContent += '</tr>';
            });

        });
    });

    tableWithChart.html(tableBodyContent);

    $(".chartContainer").empty();
    $("#cox-model-modelgraph-variable").dataTable({
        pageLength: 50,
        deferRender: true,
        processing: true,
        "columns": [{
            "title": "PROCESS TYPE"
        }, {
            "title": "MODEL NAME"
        }, {
            "title": "VARIABLE NAME"
        }, {
            "sortable": false,
            "render": function(data, type, row, meta) {
                dataId = $(data).attr('id');
                dataValue = $(data).data('value');
                return $("<div></div>", {
                    "id": dataId
                }).append(modelGraphVariableChart(dataId, dataValue)).prop("outerHTML");
            }
        }]
    });
    $(".graphloader").hide();
    $("#cox-model-modelgraph-variable tbody").removeClass('tr-loading');
}

function modelGraphVariableChart(chartContainer, chartValue) {
    chartValue = chartValue.split('|');

    for (i in chartValue) {
        chartValue[i] = chartValue[i].split(',');
        for (j in chartValue[i]) {
            if (chartValue[i][j] == '') chartValue[i][j] = 0;
            else if (parseFloat(chartValue[i][j]) == chartValue[i][j]) {
                chartValue[i][j] = parseFloat(chartValue[i][j]);
            } else {
                chartValue[i][j] = chartValue[i][j];
            }
        }
    }

    newchart[chartContainer] = Highcharts.chart(chartContainer, {
        chart: {
            type: 'spline',
            height: 100,
            scrollablePlotArea: {
                minWidth: 300,
                maxWidth: 300,
                scrollPositionX: 1
            }
        },
        title: {
            text: null
        },
        subtitle: {
            text: null
        },

        xAxis: {
            categories: chartValue[0]
        },

        yAxis: {
            labels: false,
            title: {
                text: null
            },
            endOnTick: false,
            minorGridLineWidth: 0,
            gridLineWidth: 1,
            alternateGridColor: null,
        },

        tooltip: {
            valueSuffix: null
        },

        credits: {
            enabled: false
        },
        legend: {
            enabled: false
        },
        series: [{
                name: 'VC',
                data: chartValue[1]
            }]
    });

    return newchart;
}

Мой стол выглядит так: