Google Line Chart - Multi-series Tooltip from CSV

Question

I am new to javascript so I apologize in advance if I am just overlooking something very basic!

I am using Google Charts to create a multi-series line chart that I am plotting from a csv file. It works well however the tooltip still only shows the x-axis and one y value.

I read through the documentation and saw examples of exactly what I need, however the column role is being set after adding the column data using addColumn, not from a csv file.

This is my first time posting so please let me know if you need more information!

Here is my current code that works to display the multi-series line chart:

    function NewChart() {
   $.get("test.csv", function(csvString) {
      // transform the CSV string into a 2-dimensional array
      var arrayData = $.csv.toArrays(csvString, {onParseValue: 
   $.csv.hooks.castToScalar});

      // this new DataTable object holds all the data
      var data = new google.visualization.arrayToDataTable(arrayData);

        var view = new google.visualization.DataView(data);
        view.setColumns([
            {
                sourceColumn: 0,
                type: 'datetime',
                calc: function(table, row) {
                    var value = table.getValue(row, 0);
                    return moment(value).toDate();
                }
            },2,3,4

]);

      var newChart1 = new google.visualization.ChartWrapper({
         chartType: 'LineChart',
         containerId: 'chartContainer1',
         dataTable: view,
         options:{

            title: 'New Chart',
        explorer: { 
            actions: ["dragToZoom", "rightClickToReset"],
            maxZoomIn: 0.2,
            maxZoomOut: 1.0,
            zoomDelta: 10,
            axis: "horizontal",
            keepInBounds: true
                },
            titleTextStyle : {color: 'grey', fontSize: 20},
                legend: { position: 'bottom'},
                hAxis: {
                    format: 'yyyy-MM-d',
                    gridlines: {count: 3},
                    slantedTextAngle: 85
                },
                    vAxis: {
                    title: 'Utilization %',
                    minValue: 0,
                    maxValue: 100,
                },
                chartArea: {
                    left: 50,
                    right: 15,
                    width: '100%'
                },
                animation: {

                    duration: 2000,
                    easing: 'out',
                    startup: true

                },
         }
      });
      newChart1.draw();
   });
}

Here is an example of my csv file:

Date,CPU Utilization,NETWORK(rxkB/s),NETWORK(txkB/s),NETWORK Total
2018-10-22 16:10:01,3.37,38.04,149.33,187.37
2018-10-22 16:20:01,3.8,37.82,6.87,44.69
2018-10-22 16:30:01,3.28,38.47,7.04,45.51
2018-10-22 16:40:01,3.35,40.04,7.19,47.23
2018-10-22 16:50:01,3.46,39.55,7.11,46.66

Answer 1

rather than creating a custom tooltip,
try the following config option.

focusTarget: 'category'

when set, the tooltip will display the values from all the series for the row.
This is useful for comparing values of different series.

see following working snippet...

google.charts.load('current', {
  packages:['controls', 'corechart']
}).then(function () {
  //$.get("test.csv", function(csvString) {
    // transform the CSV string into a 2-dimensional array
    var csvString = 'Date,CPU Utilization,NETWORK(rxkB/s),NETWORK(txkB/s),NETWORK Total\n2018-10-22 16:10:01,3.37,38.04,149.33,187.37\n2018-10-22 16:20:01,3.8,37.82,6.87,44.69\n2018-10-22 16:30:01,3.28,38.47,7.04,45.51\n2018-10-22 16:40:01,3.35,40.04,7.19,47.23\n2018-10-22 16:50:01,3.46,39.55,7.11,46.66';
    var arrayData = $.csv.toArrays(csvString, {onParseValue: $.csv.hooks.castToScalar});

    // this new DataTable object holds all the data
    var data = google.visualization.arrayToDataTable(arrayData);

    var view = new google.visualization.DataView(data);
    view.setColumns([{
      sourceColumn: 0,
      type: 'datetime',
      calc: function(table, row) {
        var value = table.getValue(row, 0);
        //return moment(value).toDate();
        return new Date(value);
      }
    }, 2, 3, 4]);

    var newChart1 = new google.visualization.ChartWrapper({
      chartType: 'LineChart',
      containerId: 'chartContainer1',
      dataTable: view.toDataTable(),
      options: {
        focusTarget: 'category',
        title: 'New Chart',
        explorer: {
          actions: ['dragToZoom', 'rightClickToReset'],
          maxZoomIn: 0.2,
          maxZoomOut: 1.0,
          zoomDelta: 10,
          axis: 'horizontal',
          keepInBounds: true
        },
        titleTextStyle: {color: 'grey', fontSize: 20},
        legend: {position: 'bottom'},
        hAxis: {
          format: 'yyyy-MM-d',
          gridlines: {count: 3},
          slantedTextAngle: 85
        },
        vAxis: {
          title: 'Utilization %',
          minValue: 0,
          maxValue: 100,
        },
        chartArea: {
          left: 50,
          right: 15,
          width: '100%'
        },
        animation: {
          duration: 2000,
          easing: 'out',
          startup: true
        },
       }
    });
    newChart1.draw();
  //});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/0.71/jquery.csv-0.71.min.js"></script>
<div id="chartContainer1"></div>