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 On Monday, October 22, 2018 at 2:54:08 PM UTC-4, Michael Henninger wrote: > > 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 > > > > > > > -- You received this message because you are subscribed to the Google Groups "Google Visualization API" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at https://groups.google.com/group/google-visualization-api. To view this discussion on the web visit https://groups.google.com/d/msgid/google-visualization-api/5dcec50b-00f2-41ff-925a-35181a2d99fb%40googlegroups.com. For more options, visit https://groups.google.com/d/optout.
