Динамическое создание многосерийного линейного графика Google с различными сериями даты и времени - PullRequest
Новая
       13

Динамическое создание многосерийного линейного графика Google с различными сериями даты и времени

0 голосов
/ 03 февраля 2019

У меня есть неопределенное количество наборов данных в фиде JSON.Это означает, что я никогда не уверен, сколько вернется, это может быть 1, 12 или 30, это неизвестно.Серия состоит из даты и стоимости.Я хочу иметь возможность рисовать линейный график с несколькими наборами данных.Наборы данных также имеют разные даты и время, чтобы сделать вещи более сложными.На данный момент у меня есть следующий код, который, кажется, создает google.visualization.DataTable() несколько раз на лету. 

 success: function (d) {               
                var parsedData = $.parseJSON(d);
                $.each(parsedData, function (key, value) {                   
                    var dName = new google.visualization.DataTable(); 
                    dName.addColumn('date', 'Date');
                    dName.addColumn('number', 'Data');
                    var result = $.parseJSON(value);  
                    $.each(result, function (k, v) {                            
                        dName.addRow([new Date(v.ReadingDate), Number(v.ReadingValue)]);
                    });

                    console.log(dName);
                });   
            },....

Я проверил, что данные имеют массивы и значения в них через консоль.Я знаю, что мне нужно использовать метод google.visualization.data.join, но, поскольку у меня есть неизвестное количество наборов данных, я не слишком уверен, как создать соединение.

Мне удалось сделать это с фиксированным числом наборов данных, но я не уверен, как объединить данные, я не уверен, возможно ли это даже с помощью Google Charts, поскольку это кажется предписывающим.

Из моего исследования мне нужно иметь возможность манипулировать следующим, чтобы присоединиться к различным рядам данных: 

var joinedData = google.visualization.data.join(data1, data2, 'full', [[0, 0]], [1], [1]);

    var chart = new google.visualization.LineChart(document.querySelector('#chart_div'));
    chart.draw(joinedData, {
        height: 300,
        width: 600,
        interpolateNulls: true
    });

Вот небольшой пример фида 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"}]

Итак, я хочу иметь возможность рисовать многострочный график с неизвестным количеством наборов данных, которые имеют различное datetimes.

TIA

1 Ответ

0 голосов
/ 04 февраля 2019

хотя соединение будет работать, в этом случае оно не нужно.

Вы можете просто добавить новый столбец в таблицу данных для каждого нового фида json.

для применения значений используйте метод setValue, а не addRow.

см. Следующий рабочий фрагмент ... 

 var section = $('#LocationNameDdl :selected').val();
    var uid = '@guid';
    var from = $('#dateFrom').val();
    var to = $('#dateTo').val(); 

    $.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);
                var dName = new google.visualization.DataTable();
                dName.addColumn('date', 'Date');
                $.each(parsedData, function (key, value) {
                    var colIndex = dName.addColumn('number', 'Data' + key);
                    var result = $.parseJSON(value);                    
                    $.each(result, function (k, v) {
                        var 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");
        }
    });
...