Line chart total by month on tooltip

Question

I am trying to total the value by month name on tooltip.

I have line chart with month name on axis but when i mouse over the points it is showing individual records on chart. i want to show total by Month.

var dateTicks = [];
    for (var m = 1; m <= 12; m++)
        dateTicks.push(new Date('2015-' + m + '-1'));

    var options = {
        hAxis: {
            format: 'MMMM',
            ticks: dateTicks
        }
    };

Here is here is jsfiddle

any idea.

score 0 · Answer 1 · answered Dec 11 '20 at 11:20

Here it goes the code, refactor it as you want:

google.load('visualization', '1', { packages: ['corechart', 'line'] });
google.setOnLoadCallback(drawCurveTypes);

   var datasetr = [
        [new Date('2015-01-01'), 40, 50],
        [new Date('2015-01-15'), 20, 80],
        [new Date('2015-01-16'), 21, 80],
        [new Date('2015-01-17'), 25, 80],
        [new Date('2015-01-21'), 20, 80],
        [new Date('2015-02-15'), 60, 30],
        [new Date('2015-03-01'), 40, 50],
        [new Date('2015-03-15'), 20, 80],
        [new Date('2015-04-01'), 20, 80],
        [new Date('2015-04-15'), 60, 30],
        [new Date('2015-05-01'), 40, 50],
        [new Date('2015-05-15'), 20, 80],
        [new Date('2015-06-01'), 20, 80],
        [new Date('2015-06-15'), 60, 30],
        [new Date('2015-07-01'), 40, 50],
        [new Date('2015-07-15'), 20, 80],
        [new Date('2015-08-01'), 20, 80],
        [new Date('2015-08-15'), 60, 30],
        [new Date('2015-09-01'), 40, 50],
        [new Date('2015-09-15'), 20, 80],
        [new Date('2015-10-01'), 20, 80],
        [new Date('2015-10-15'), 60, 30],
        [new Date('2015-11-01'), 40, 50],
        [new Date('2015-11-15'), 20, 80],
        [new Date('2015-12-01'), 20, 80],
        [new Date('2015-12-15'), 60, 30],
    ];
    var group = datasetr.reduce((r, a) => {
            r[a[0].getMonth()] = [...r[a[0].getMonth()] || [], a];
            return r;
        }, []);
    
    var finalDataset = [];
    var sumValues = group.map(item => {
        const sumValues1 = item.reduce((a, i) => {
        a += i[1];
        return a;
      }, 0);
      const sumValues2 = item.reduce((a, i) => {
        a += i[2];
        return a;
      }, 0);
      item.forEach(iloop => {
        finalDataset.push([iloop[0], sumValues1, sumValues2]);
      });
    });
    
    
    
function drawCurveTypes() {
    var data = new google.visualization.DataTable();
    data.addColumn('date', 'Day');
    data.addColumn('number', 'Value 1');
    data.addColumn('number', 'Value 2');
      data.addRows(finalDataset);

    var dateTicks = [];
    for (var m = 1; m <= 12; m++)
        dateTicks.push(new Date('2015-' + m + '-1'));

    var options = {
        hAxis: {
            format: 'MMMM',
            ticks: dateTicks
        }
    };

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
    }

still need line chart. your logic is displaying the line chart.. i dont want to chnage the chart — Gaurav Singla, Dec 11 '20 at 12:21
you need same line chart but total month when you mouseover the dots? — Amos Isaila, Dec 11 '20 at 12:24
you need to disable normal trigger and then fire your own, check this example, it does what you need: https://stackoverflow.com/questions/56964861/how-to-show-two-different-tooltips-in-google-chart — Amos Isaila, Dec 11 '20 at 12:50

Line chart total by month on tooltip

1 Answers1