Google Charts Multi-series tooltip from csv file

[Michael Henninger]

Hello,

I have seen numerous answers online about how to add a tooltip containing each series in a multi-series line chart however they are adding the data manually and setting their role after the column is added.

I am getting my data from a csv file.  I am new to javascript so I may just be missing some simple code but if anyone has an example of defining the tooltip role for a chart generated from a csv file it would be much appreciated!

Here is my code so far.  

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 a an example of my csv file format:

I would like to only plot Date, NETWORK(rxkB/s), NETWORK(txkB/s) and the NETWORK Total columns with a tooltip containing the date and each y value.

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

[Michael Henninger]

In case someone is looking for the same answer this has been resolved by using focusTarget: 'category' under the options for the chart.

https://stackoverflow.com/questions/52952500/google-line-chart-multi-series-tooltip-from-csv