Dynamic creation of multi series Google line chart with differing datetime series

问题

I have an undetermined number of data sets in a JSON feed. This means that I am never sure how many are coming back, it could be 1, 12 or 30, it's an unknown. The series are made up of a date and a value. I want to be able to draw a line chart with the multiple datasets. The datasets have different dates and times as well, to make things more complicated. I have the following code so far, that seems to create the google.visualization.DataTable() multiple times on the fly.

 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);
                });   
            },....

I have checked that the data has arrays and values in it through the console. I am aware that I need to use the google.visualization.data.join method, but as I have an unknown number of data sets, I am not too sure how to create the join.

I have been able to do this with fixed numbers of datasets, but I am flummoxed as to how to join the data, I am not sure if it is even possible with Google Charts as it seems to be prescriptive.

From my research I need to be able to manipulate the following to join the different data series:

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
    });

Here is a small sample of the JSON feed:

[{"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"}]

In summary, I want to be able to draw a multi-line chart with an unknown number of datasets, which have differing datetimes.

TIA

回答1:

although a join would work, in this case, it isn't needed.

you can simply add a new column to the data table for each new json feed.

use the setValue method to apply the values, rather than addRow.

see following working snippet...

 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");
        }
    });

来源：https://stackoverflow.com/questions/54503147/dynamic-creation-of-multi-series-google-line-chart-with-differing-datetime-serie