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 google-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
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/6be9ed50-b658-46e4-a7c4-ccf95174d0f0%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.
