I'm trying to show a custom tooltip on mouve over the bars, it show always the default tooltip. I'm just trying to show a simple html code in the tooltip, so I can modify it after What am I missing? thanks
google.charts.load('current', {
'packages': ['timeline'],
'language': 'fr'
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('timeline');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({
type: 'string',
id: 'Code'
});
dataTable.addColumn({
type: 'string',
id: 'Color'
});
dataTable.addColumn({
type: 'string',
role: 'tooltip',
'p': {
'html': true
}
});
dataTable.addColumn({
type: 'string',
id: 'Libelle'
});
dataTable.addColumn({
type: 'date',
id: 'Start'
});
dataTable.addColumn({
type: 'date',
id: 'End'
});
var objects = [];
objects.push({
code: "PRV1001",
color: "Color1",
zz: "<div><strong>2010</strong></div>",
id: "PRV1001",
dateStart: new Date(2016, 3, 1),
dateFinnish: new Date(2016, 3, 15)
});
objects.push({
code: "PRV1002",
color: "Color2",
zz: "<div><strong>2010</strong></div>",
id: "PRV1002",
dateStart: new Date(2016, 3, 4),
dateFinnish: new Date(2016, 3, 9)
});
objects.push({
code: "PRV1003",
color: "Color3",
zz: "<div><strong>2010</strong></div>",
id: "PRV1003",
dateStart: new Date(2016, 3, 3),
dateFinnish: new Date(2016, 3, 12)
});
var rows = [];
for (var i = 0; i < objects.length; i++) {
rows.push([objects[i].code, objects[i].color, objects[i].zz, objects[i].id, objects[i].dateStart, objects[i].dateFinnish]);
}
console.log(rows);
dataTable.addRows(rows);
/****************Colors*************************/
var colors = [];
var colorMap = {
// should contain a map of category -> color for every category
Color1: '#e63b6f',
Color2: '#19c362',
Color3: '#592df7'
}
for (var i = 0; i < dataTable.getNumberOfRows(); i++) {
colors.push(colorMap[dataTable.getValue(i, 1)]);
}
var options = {
colors: colors,
focusTarget: 'category',
tooltip: {
//trigger: 'none'
isHtml: true
}
};
google.visualization.events.addListener(chart, 'select', function() {
selection = chart.getSelection();
if (selection.length > 0) {
console.log(dataTable.getValue(selection[0].row, 0));
}
});
// use a DataView to hide the category column from the Timeline
var view = new google.visualization.DataView(dataTable);
view.setColumns([0, 2, 3, 4, 5]);
chart.draw(view, options);
}<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Goolge Chart HTML Tooltips">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
<div id="timeline" style="height: 180px;"></div>
</body>
</html>see the data format for a timeline chart...
Column 0 - Row label
Column 1 - Bar label (optional)
Column 2 - Tooltip (optional)
Column 3 - Start
Column 4 - End
the issue stems from the view...
view.setColumns([0, 2, 3, 4, 5]);
so the chart thinks Column 2 is the Bar label
the issue can be corrected by swapping Column 2 with 3
view.setColumns([0, 3, 2, 4, 5]);
see following working snippet...
google.charts.load('current', {
'packages': ['timeline'],
'language': 'fr'
});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var container = document.getElementById('timeline');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({
type: 'string',
id: 'Code'
});
dataTable.addColumn({
type: 'string',
id: 'Color'
});
dataTable.addColumn({
type: 'string',
role: 'tooltip',
'p': {
'html': true
}
});
dataTable.addColumn({
type: 'string',
id: 'Libelle'
});
dataTable.addColumn({
type: 'date',
id: 'Start'
});
dataTable.addColumn({
type: 'date',
id: 'End'
});
var objects = [];
objects.push({
code: "PRV1001",
color: "Color1",
zz: "<div><strong>2010</strong></div>",
id: "PRV1001",
dateStart: new Date(2016, 3, 1),
dateFinnish: new Date(2016, 3, 15)
});
objects.push({
code: "PRV1002",
color: "Color2",
zz: "<div><strong>2010</strong></div>",
id: "PRV1002",
dateStart: new Date(2016, 3, 4),
dateFinnish: new Date(2016, 3, 9)
});
objects.push({
code: "PRV1003",
color: "Color3",
zz: "<div><strong>2010</strong></div>",
id: "PRV1003",
dateStart: new Date(2016, 3, 3),
dateFinnish: new Date(2016, 3, 12)
});
var rows = [];
for (var i = 0; i < objects.length; i++) {
rows.push([objects[i].code, objects[i].color, objects[i].zz, objects[i].id, objects[i].dateStart, objects[i].dateFinnish]);
}
dataTable.addRows(rows);
/****************Colors*************************/
var colors = [];
var colorMap = {
// should contain a map of category -> color for every category
Color1: '#e63b6f',
Color2: '#19c362',
Color3: '#592df7'
}
for (var i = 0; i < dataTable.getNumberOfRows(); i++) {
colors.push(colorMap[dataTable.getValue(i, 1)]);
}
var options = {
colors: colors,
focusTarget: 'category',
tooltip: {
isHtml: true
}
};
google.visualization.events.addListener(chart, 'select', function() {
selection = chart.getSelection();
if (selection.length > 0) {
console.log(dataTable.getValue(selection[0].row, 0));
}
});
// use a DataView to hide the category column from the Timeline
var view = new google.visualization.DataView(dataTable);
view.setColumns([0, 3, 2, 4, 5]);
chart.draw(view, options);
}<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Goolge Chart HTML Tooltips">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
<div id="timeline" style="height: 180px;"></div>
</body>
</html>