Нарисуйте линию, чтобы показать среднее распределение в графике рассеяния Google

Question

Я использую базовую диаграмму Google, чтобы объединить точечные и линейные диаграммы. Я хочу нарисовать линию, как на картинке ниже, к моей диаграмме рассеяния.

Мой формат данных Json такой,

{realtimeinterval: "5410", startingtime: "09:21:42"}

Я могу видеть график рассеяния, но не линейное среднее распределение в виде линейного графика. Я не знаю, где я делаю неправильно. Вот мой код для визуализации

google.charts.load('current', {packages: ['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
                $.ajax({
                    url: 'mydata',
                    type: 'GET',
                    success: function (result) {
                        var visdata = new google.visualization.DataTable();
                        visdata.addColumn('timeofday', 'Starting Time');
                        visdata.addColumn('number', 'Time Interval [minutes]');
                        var chart = new google.visualization.ComboChart(document.getElementById('chart_material'));
                        var options = {
                            width: 700,
                            height: 500,
                            chart: {
                                title: 'Time Interval'
                            },
                            hAxis: {title: 'Starting Time [hh:mm:ss]'},
                            vAxis: {title: 'Time Interval [minutes]'},
                            seriesType: 'scatter',
                                series: {
                                  1: {
                                    type: 'line'
                                  }
                                }
                        };
                        var jsonData = $.parseJSON(result);
                        var jsonmyData = jsonData['my_data'];
                        for (var i = 0; i < jsonmyData.length; i++) {
                            var timeInterval = jsonmyData[i].realtimeinterval;
                            var mins;
                            mins = Math.floor(((timeInterval / 60)), 0);
                            var clickTime = jsonmyData[i].startingtime.split(':');
                            visdata.addRow([
                                [parseInt(clickTime[0]), parseInt(clickTime[1]), parseInt(clickTime[2])],
                                parseInt(mins)
                            ]);
                        }
                        var view = new google.visualization.DataView(visdata);
                        view.setColumns([0, 1, {
                            label: 'Average = avg',
                            type: 'number',
                            calc: function (dt, row) {
                                return dt.getValue(row, 0)
                            }
                        }]);
                        chart.draw(visdata, options);                        },
                    error: function (xhr, status, error) {
                        console.log(error);
                    }
                });
            }

Окончательный результат выглядит следующим образом. Здесь я хочу нарисовать линию как среднее распределение интервалов в реальном времени.

Answer 1

Вы можете использовать метод group() для расчета среднего ...

// calculate average
var dataMean = google.visualization.data.group(
    visdata,
    [{column: 0, type: 'string', modifier: function () {return '';}}],
    [{column: 1, type: 'number', aggregation: google.visualization.data.avg}]
);
var sampleMean = dataMean.getValue(0, 1);

затем в представлении данных используйте значение из расчета выше ...

var view = new google.visualization.DataView(visdata);
view.setColumns([0, 1, {
    label: 'Average = avg',
    type: 'number',
    calc: function (dt, row) {
        return sampleMean;
    }
}]);

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

chart.draw(view, options);

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

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
    var visdata = new google.visualization.DataTable();
    visdata.addColumn('timeofday', 'Starting Time');
    visdata.addColumn('number', 'Time Interval [minutes]');
    var chart = new google.visualization.ComboChart(document.getElementById('chart_material'));
    var options = {
        width: 700,
        height: 500,
        chart: {
            title: 'Time Interval'
        },
        hAxis: {title: 'Starting Time [hh:mm:ss]'},
        vAxis: {title: 'Time Interval [minutes]'},
        seriesType: 'scatter',
            series: {
              1: {
                type: 'line'
              }
            }
    };
    var jsonData = {my_data: [{realtimeinterval: "5410", startingtime: "09:21:42"}, {realtimeinterval: "5510", startingtime: "10:21:42"}, {realtimeinterval: "5610", startingtime: "11:21:42"}]};
    var jsonmyData = jsonData['my_data'];
    for (var i = 0; i < jsonmyData.length; i++) {
        var timeInterval = jsonmyData[i].realtimeinterval;
        var mins;
        mins = Math.floor(((timeInterval / 60)), 0);
        var clickTime = jsonmyData[i].startingtime.split(':');
        visdata.addRow([
            [parseInt(clickTime[0]), parseInt(clickTime[1]), parseInt(clickTime[2])],
            parseInt(mins)
        ]);
    }

    // calculate average
    var dataMean = google.visualization.data.group(
        visdata,
        [{column: 0, type: 'string', modifier: function () {return '';}}],
        [{column: 1, type: 'number', aggregation: google.visualization.data.avg}]
    );
    var sampleMean = dataMean.getValue(0, 1);

    var view = new google.visualization.DataView(visdata);
    view.setColumns([0, 1, {
        label: 'Average = avg',
        type: 'number',
        calc: function (dt, row) {
            return sampleMean;
        }
    }]);
    chart.draw(view, options);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_material"></div>

---

РЕДАКТИРОВАТЬ

чтобы добавить строки для min и max,
Вы можете добавить дополнительные вычисления к методу group() ...

// calculate average, max, & min
var dataMean = google.visualization.data.group(
    visdata,
    [{column: 0, type: 'string', modifier: function () {return '';}}],
    [
        {column: 1, type: 'number', aggregation: google.visualization.data.avg},
        {column: 1, type: 'number', aggregation: google.visualization.data.max},
        {column: 1, type: 'number', aggregation: google.visualization.data.min}
    ]
);
var sampleMean = dataMean.getValue(0, 1);
var sampleMax = dataMean.getValue(0, 2);
var sampleMin = dataMean.getValue(0, 3);

тогда нам нужно добавить дополнительные столбцы в представление данных ...

var view = new google.visualization.DataView(visdata);
view.setColumns([0, 1, {
    label: 'Average = avg',
    type: 'number',
    calc: function (dt, row) {
        return sampleMean;
    }
}, {
    label: 'Maximum = max',
    type: 'number',
    calc: function (dt, row) {
        return sampleMax;
    }
}, {
    label: 'Minimum = min',
    type: 'number',
    calc: function (dt, row) {
        return sampleMin;
    }
}]);

и не забудьте обновить параметр series ...

    series: {
      1: {  // average
        type: 'line'
      },
      2: {  // max
        type: 'line'
      },
      3: {  // min
        type: 'line'
      }
    }

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

google.charts.load('current', {
  packages: ['corechart']
}).then(function () {
    var visdata = new google.visualization.DataTable();
    visdata.addColumn('timeofday', 'Starting Time');
    visdata.addColumn('number', 'Time Interval [minutes]');
    var chart = new google.visualization.ComboChart(document.getElementById('chart_material'));
    var options = {
        width: 700,
        height: 500,
        chart: {
            title: 'Time Interval'
        },
        hAxis: {title: 'Starting Time [hh:mm:ss]'},
        vAxis: {title: 'Time Interval [minutes]'},
        seriesType: 'scatter',
        series: {
          1: {  // average
            type: 'line'
          },
          2: {  // max
            type: 'line'
          },
          3: {  // min
            type: 'line'
          }
        }
    };
    var jsonData = {my_data: [{realtimeinterval: "5410", startingtime: "09:21:42"}, {realtimeinterval: "5510", startingtime: "10:21:42"}, {realtimeinterval: "5610", startingtime: "11:21:42"}]};
    var jsonmyData = jsonData['my_data'];
    for (var i = 0; i < jsonmyData.length; i++) {
        var timeInterval = jsonmyData[i].realtimeinterval;
        var mins;
        mins = Math.floor(((timeInterval / 60)), 0);
        var clickTime = jsonmyData[i].startingtime.split(':');
        visdata.addRow([
            [parseInt(clickTime[0]), parseInt(clickTime[1]), parseInt(clickTime[2])],
            parseInt(mins)
        ]);
    }

    // calculate average, max, & min
    var dataMean = google.visualization.data.group(
        visdata,
        [{column: 0, type: 'string', modifier: function () {return '';}}],
        [
            {column: 1, type: 'number', aggregation: google.visualization.data.avg},
            {column: 1, type: 'number', aggregation: google.visualization.data.max},
            {column: 1, type: 'number', aggregation: google.visualization.data.min}
        ]
    );
    var sampleMean = dataMean.getValue(0, 1);
    var sampleMax = dataMean.getValue(0, 2);
    var sampleMin = dataMean.getValue(0, 3);

    var view = new google.visualization.DataView(visdata);
    view.setColumns([0, 1, {
        label: 'Average = avg',
        type: 'number',
        calc: function (dt, row) {
            return sampleMean;
        }
    }, {
        label: 'Maximum = max',
        type: 'number',
        calc: function (dt, row) {
            return sampleMax;
        }
    }, {
        label: 'Minimum = min',
        type: 'number',
        calc: function (dt, row) {
            return sampleMin;
        }
    }]);
    chart.draw(view, options);
});

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_material"></div>