Цикл JQuery замедляет работу Google Chart - PullRequest
Новая
       8

Цикл JQuery замедляет работу Google Chart

3 голосов
/ 06 марта 2019

У меня есть график Google, который обычно очень медленный (более 5 минут) и иногда просто зависает в зависимости от количества серий, которые мне нужно показать. Если у меня есть одна серия, это займет около 10 секунд, но если я добавлю, скажем, 20 серий, это займет еще несколько минут, и браузер умрет.

Каждая серия содержит около 8000 строк из JSON. Я проверил и протестировал код, и цикл в коде диаграммы убивает его.

Код моей диаграммы выглядит следующим образом: 

 function drawMultiLineChart() {    
        var section = $('#LocationNameDdl :selected').val();
        var uid = '@guid';
        var from = $('#dateFrom').val();
        var to = $('#dateTo').val();
        var parsedData = "";
        var dName = "";
        var colIndex = "";
        var result = "";
        var rowIndex = "";

        $.ajax({
            url: 'ProjectCharts/GetChartDataBySection',
            datatype: 'json',
            type: 'get',
            async: false,
            data: { section: section, uid: uid, from: from, to: to },
            contentType: 'application/json; charset=utf-8',
            success: function (d) {
                google.charts.load('current', {
                    packages: ['corechart']
                }).then(function () {
                    parsedData = $.parseJSON(d);
                    dName = new google.visualization.DataTable();
                    dName.addColumn('date', 'Date');
                    $.each(parsedData, function (key, value) {
                        colIndex = dName.addColumn('number', 'Serial: ' + key);
                        result = $.parseJSON(value);
                        $.each(result, function (k, v) {
                            rowIndex = dName.addRow();
                            dName.setValue(rowIndex, 0, new Date(v.ReadingDate));
                            dName.setValue(rowIndex, colIndex, Number(v.ReadingValue));
                        });
                    });

                    var options = multiLineChartOptions();
                    var chart = new google.visualization.LineChart(document.getElementById('chart'));
                    chart.draw(dName, options);
                });
            },
            error: function () {
                alert("Error");
            }
        });
    };

Я вызываю JSON из следующего кода, это нормально и работает очень быстро: 

 public async Task<JsonResult> GetJsonChartData(string serial, string uid, string from, string to)
        {
            var dateFrom = Convert.ToDateTime(from).ToString("yyyy-MM-dd HH:mm:ss");
            var dateTo = Convert.ToDateTime(to).ToString("yyyy-MM-dd HH:mm:ss");
            var g = new GetChartData(_configuration);
            List<ChartDataModel> items = await Task.Run(() => g.GetChartDataFromSqlServer(serial, uid, dateFrom, dateTo));           
            return  Json(JsonConvert.SerializeObject(items, Formatting.Indented));
        }

JSON: 

[{"LoggerId":"1000651443","ReadingDate":"2018-12-05 00:03:03, "ReadingValue":"12.6", "Tooltip":"Someinfo"},
{"LoggerId":"1000651447","ReadingDate":"2018-12-05 00:04:03, "ReadingValue":"12.7", "Tooltip":"Someinfo"}]

[{"LoggerId":"1000651444","ReadingDate":"2018-12-05 00:03:05, "ReadingValue":"12.9", "Tooltip":"Someinfo"},
 {"LoggerId":"1000651445","ReadingDate":"2018-12-05 00:03:07, "ReadingValue":"14.9", "Tooltip":"Someinfo"}]

[{"LoggerId":"1000651446","ReadingDate":"2018-12-05 00:03:17, "ReadingValue":"13.6", "Tooltip":"Someinfo"},
 {"LoggerId":"1000651446","ReadingDate":"2018-12-05 00:04:17, "ReadingValue":"43.6", "Tooltip":"Someinfo"}]

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

...