CODEWITHSUNDEEP
jquerygoogle-visualizationscatter-plotlinechart
Mahbub
Mahbub

Reputation: 339

Draw a line to show the average distribution in google scatter plot

I am using google corechart to combine scatter and line chart. I want to draw a line like the below picture to my scatter chart. enter image description here

My Json data format is like this,

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

I can see the scatterplot but not the line average distribution as line chart. I don't know where I am doing wrong. Here is my code for the visualization

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

The final output looks like this. Here, I want to draw line as average realtimeinterval distribution. enter image description here

Upvotes: 2

Views: 967

Answers (1)

WhiteHat
WhiteHat

Reputation: 61275

you can use the group() method to calculate the average... 

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

then in the data view, use the value from the calculation above... 

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

the main issue you had was here, after you build the view with the average,
you have to use the view to draw the chart... 

chart.draw(view, options);

see following working snippet... 

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>

EDIT

to add lines for min and max,
you can add additional calculations to the group() method... 

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

then we need to add additional columns to the data view... 

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

and don't forget to update the series option... 

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

see following working snippet... 

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>

Upvotes: 3

Related Questions