google line chart tool-tips with multiple column data

Question

I have a line chart that shows 2 lines: one represents a date range with values and the other line is the previous period(also dates) with the previous values.

I want to show the relevant date and the value in the tool-tips for each line.

the tool-tips will look like this:

this is what i have right now:

function drawChart(chartData, elemId, chartWidth, chartHeight, startDate, endDate) {
    var chartToDraw = new google.visualization.DataTable();
     chartToDraw.addColumn('date', 'Date');
     chartToDraw.addColumn('number', 'Value');
     chartToDraw.addColumn({
         type: 'string',
         role: 'tooltip',
         properties: {
             html: true
         },
         calc: function (dt, row) { //doesn't get called for some reason
            var date = dt.getValue(row, 2);
            var val = dt.getValue(row, 1);
            return '<div>' + date + ' </br><b>value:</b>' + val + '</div>';
         }
     });
     chartToDraw.addColumn('number', 'Previous value');
     chartToDraw.addColumn({
         type: 'string',
         role: 'tooltip',
         properties: {
             html: true
         },
         calc: function (dt, row) { //doesn't get called for some reason
             var date = dt.getValue(row, 4);
             var val = dt.getValue(row, 3);
             return '<div>' + date + ' </br><b>value:</b>' + val + '</div>';
            }
        });

        if (chartData['dataPoints'] != undefined) {
            var currentDataArr = [];
            for (var point in chartData['dataPoints']) {
                currentDataArr.push([
                    chartData['dataPoints'][point].date,
                    chartData['dataPoints'][point].value,
                    chartData['dataPoints'][point].date,
                    chartData['dataPoints'][point].prevValue,
                    chartData['dataPoints'][point].prevDate
                ]);
            }
        }
        chartToDraw.addRows(currentDataArr);



    var timeFormatter = new google.visualization.DateFormat({
        pattern: "MMM dd"
    });
    timeFormatter.format(chartToDraw, 0);
    timeFormatter.format(chartToDraw, 2);
    timeFormatter.format(chartToDraw, 4);

    var options = {
        legend: 'none',
        'width': chartWidth,
        'height': chartHeight,
        pointSize: 4,
        colors: ['#0289cb', '#01af8a'],
        tooltip: {
            isHtml: true
        },
        chartArea: {
            width: '80%'
        },
        hAxis: {
            slantedText: true,
            slantedTextAngle: 30,
            viewWindow: {
                min: startDate,
                max: endDate
            },
            gridlines: {
                count: -1,
                units: {
                    days: {format: ['MMM dd']},
                    hours: {format: ['HH:mm', 'ha']}
                }
            },
            minorGridlines: {
                units: {
                    hours: {format: ['hh:mm:ss a', 'ha']},
                    minutes: {format: ['HH:mm a Z', ':mm']}
                }
            }
        },
        vAxis: {
            viewWindow: {
                min: 0
            }
        }
    };

    var chart = new google.visualization.LineChart(document.getElementById(elemId));
    chart.draw(chartToDraw, options);
}

The problem is that all i see right now on the tool-tips is just the correct dates and i'm missing the value. I'm not sure why the calc functions arn't being called, if i change the tool-tip's type to string i just get a mismatch type error.

Here is what i've looked at so far:

Google Chart HTML Tooltip displays html text

Add tooltips to a Google Line Chart with multiple data series - with simplified test case and screenshot

but all the changes i did to resamble those answers failed. What am i doing wrong?

Answer 1

Calculated columns only work with the DataView Class
Not the DataTable Class...

To use, load your DataTable first, then create the DataView
Use setColumns to add your tooltips...

Drawing from the question, it might look something like this...

var chartToDraw = new google.visualization.DataTable();
chartToDraw.addColumn('date', 'Date');
chartToDraw.addColumn('number', 'Value');
chartToDraw.addColumn('number', 'Previous value');
chartToDraw.addColumn('date', 'Previous Date');

if (chartData['dataPoints'] != undefined) {
    var currentDataArr = [];
    for (var point in chartData['dataPoints']) {
        currentDataArr.push([
            chartData['dataPoints'][point].date,
            chartData['dataPoints'][point].value,
            chartData['dataPoints'][point].prevValue,
            chartData['dataPoints'][point].prevDate
        ]);
    }
}
chartToDraw.addRows(currentDataArr);

// create view over data, set columns
var dataView = new google.visualization.DataView(chartToDraw);
dataView.setColumns([0, 1,
  {
    type: 'string',
    role: 'tooltip',
    properties: {
      html: true
    },
    calc: function (dt, row) {
      var date = dt.getValue(row, 0);
      var val = dt.getValue(row, 1);
      return '<div>' + date + ' </br><b>value:</b>' + val + '</div>';
    }
  },
  2,
  {
    type: 'string',
    role: 'tooltip',
    properties: {
      html: true
    },
    calc: function (dt, row) {
      var date = dt.getValue(row, 3);
      var val = dt.getValue(row, 2);
      return '<div>' + date + ' </br><b>value:</b>' + val + '</div>';
    }
  }
]);