I am trying to add a tooltip to a Time chart, however am experiencing very strange results:
var container = document.getElementById('example2.1');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});
Do some dynamic stuff here and loop through:
dataTable.addRow([$(this).attr('ows_Title'),start,end,"Status: " + $(this).attr("ows_Status")]);
chart.draw(dataTable);
The chart populates perfectly, except NO tooltip!
Anyone have any ideas? Attached is my result!
Here is an image:
If you check on documentation, html tooltip for Timeline is not supported:
supported_charts
However, you could make a workaround using onmouseover event listener and setting the tooltip according to the e.row value. Here is a simple example:
function myHandler(e){
if(e.row != null){
$(".google-visualization-tooltip").html(dataTable.getValue(e.row,3)).css({width:"auto",height:"auto"});
}
}
google.visualization.events.addListener(chart, 'onmouseover', myHandler);
Full example : http://jsfiddle.net/s9g99pqk/1/
change this:
dataTable.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});
it should be:
dataTable.addColumn({type: 'string', role: 'tooltip', p: {'html': true}});
Related
I'm building a web app that is google's chart Timeline. I have a script that returns me the correct array from google sheets. I want to pass this result to HTML in a specific place. I'm using google app scripts.
function doGet(e) {
return HtmlService.createTemplateFromFile('timeline3').evaluate();
}
function useDataRange() {
var rows = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Data');
var test = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Data').getRange(3, 7, rows.getLastRow(), 1).getValues();
test = test.slice(0,rows.getLastRow()-2);
JSON.stringify(test);
Logger.log(test);
return test;
}
Here is my HTML code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
<script type="text/javascript">
google.charts.load('current', {'packages':['timeline']});
google.charts.setOnLoadCallback(getData);
function getData(){
return google.script.run.withSuccessHandler(drawChart).useDataRange();
}
function drawChart(arrayFromSheets) {
var container = document.getElementById('timeline-tooltip');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'President' });
dataTable.addColumn({ type: 'string', id: 'dummy bar label' });
dataTable.addColumn({ type: 'string', role: 'tooltip' });
dataTable.addColumn({ type: 'string', id: 'style', role: 'style' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows(arrayFromSheets);
chart.draw(dataTable);
}
</script>
<div id="timeline-tooltip" style="height: 400px;"></div>
</body>
</html>
I'm trying to populate dataTable.addRows() with my array. I've looked through google's documentation and this should work. I just don't get it. Please help
Here is an example of array I get returned from useDataRange function:
[['Lady Gita' ,null , 'June 19 -26' , '#176BEF', new Date(2021, 6, 19) , new Date(2021, 6, 26)], ['Lady Gita' ,null , 'Jun 27 - Jul 11' , '#FF3E30', new Date(2021, 6, 27) , new Date(2021, 7, 11)]]
Searching in console I get this:
Console:
Why not just var test = SpreadsheetApp.getActiveSpreadsheet().getSheetByName('Data').getRange(3, 7, rows.getLastRow()-2, 1).getValues(); The third param is number of rows not last row
Arrays weren't being passed as arrays because I had a function inside them. They were all being passed as undefined. I had to change a bit my sheet but it works now. Also null was showing as BarLabel so I turned BarLabel off with options. It works great now!
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['timeline']});
google.charts.setOnLoadCallback(getData);
function getData(){
google.script.run.withSuccessHandler(drawChart).useDataRange();
}
function drawChart(data) {
var container = document.getElementById('timeline-tooltip');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'President'});
dataTable.addColumn({ type: 'string', id: 'dummy bar label'});
dataTable.addColumn({ type: 'string', role: 'tooltip'});
dataTable.addColumn({ type: 'string', id: 'style', role: 'style'});
dataTable.addColumn({ type: 'date', id: 'Start'});
dataTable.addColumn({ type: 'date', id: 'End'});
var rows = [];
//Loop through the data you loaded and push it to the rows array
for(var i=0; i<data.length; i++){
var currentElement = data[i];
var transformFirstDate = new Date(currentElement[4]);
var transformSecondDate = new Date(currentElement[5]);
rows.push([currentElement[0],currentElement[1],currentElement[2],currentElement[3],transformFirstDate,transformSecondDate]);
}
dataTable.addRows(rows);
var options = {
timeline: { showBarLabels: false }
};
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="timeline-tooltip" style="height: 400px;"></div>
</body>
</html>
I'm looking for a way to add a dummy row to Google Charts Timelines. Here is what I'm trying to accomplish:
However, the dummy row should be transparent and should not have interactivity (no tooltip, no select event, etc.).
Here is my workaround:
This requires adding three more columns and you lose the tooltip generated by Charts. While this isn't an issue for me (as I will be customizing the tooltips), it may be for others. Furthermore, although the dummy row is transparent, there is still interactivity (as indicated by the empty tooltip I circled). The workaround for this is to add the following code immediately before chart.draw(dataTable):
function onMouseOver(e) {
var tooltips = document.getElementsByClassName('google-visualization-tooltip');
for (var i = 0; i < tooltips.length; i++) {
if (!tooltips[i].innerHTML) {
tooltips[i].style.display = 'none';
}
}
}
function onReady() {
google.visualization.events.addListener(chart, 'onmouseover', onMouseOver);
}
google.visualization.events.addListener(chart, 'ready', onReady);
While this is technically a solution to my problem, it's a hack at best. Is there no straightforward way to accomplish this with the API?
This is already a year old question, but maybe someone else will have the same problem. Your solution from second screen was very close. You need to set tooltip value on normal rows to null (will display standard tooltip) and empty string on dummy items (tooltip will be hidden). The style column must have opacity set to 0 on dummy rows to hide the bar. Below is rewritten and fixed code from your example.
google.charts.load('current', { packages: ['timeline']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
const container = document.getElementById('timeline');
const chart = new google.visualization.Timeline(container);
const dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', label: 'President', id: 'President' });
dataTable.addColumn({ type: 'string', id: 'Empty label' });
dataTable.addColumn({ type: 'string', id: 'style', role: 'style' });
dataTable.addColumn({ type: 'string', id: 'tooltip', role: 'tooltip', p: { html: true } });
dataTable.addColumn({ type: 'date', label: 'Start', id: 'Start' });
dataTable.addColumn({ type: 'date', label: 'End', id: 'End' });
dataTable.addRows([
['A', '', 'opacity: 0', '', new Date('2018-06-05T00:00:00'), new Date('2018-06-05T00:00:00')],
['B', '', 'opacity: 0', '', new Date('2018-06-05T00:00:00'), new Date('2018-06-05T00:00:00')],
['C', '', 'opacity: 0', '', new Date('2018-06-05T00:00:00'), new Date('2018-06-05T00:00:00')],
['A', '', null, null, new Date('2018-06-05T01:00:00'), new Date('2018-06-05T02:00:00')],
['B', '', null, null, new Date('2018-06-05T01:00:00'), new Date('2018-06-05T02:00:00')],
['C', '', null, null, new Date('2018-06-05T01:00:00'), new Date('2018-06-05T02:00:00')],
]);
}
After tackling with this problem I prefer to use apexcharts package for timeline chart creating. This package has more flexible interface to control the charts, min and max values of axis, tooltips, etc.
I have a problem when I want to place HTML code in the tooltip that is displayed when hovering over an element of the histogram.
Did someone have a similar problem?
I leave my code
function drawChart() {
//var data = google.visualization.arrayToDataTable(dataToHistogram(response));
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});
dataTable.addColumn({ type: 'number', id: 'precio' });
for (var i = datos.length - 1; i >= 0; i--) {
dataTable.addRow(["<strike>"+datos[i].titulo+"</strike>", datos[i].valor]);
}
var options = {
title: '',
legend: { position: 'none' },
bar: {groupWidth : 20},
width: 1200,
series: [
{color: '#007d00', visibleInLegend: true}, {}, {},
],
isStacked: 'absolute',
tooltip:{isHtml: true}
};
var chart = new google.visualization.Histogram(document.getElementById('chart_div'));
chart.draw(dataTable, options);
}
I based on this
[https://developers.google.com/chart/interactive/docs/customizing_tooltip_content#using-html-tooltips][2]
In the Supported Charts section of the documentation, in indicates that Histograms do not support HTML tooltips. Here's the quote:
Supported charts
HTML tooltips are currently supported for the
following chart types:
AreaChart
BarChart
CalendarChart
CandlestickChart
ColumnChart
ComboChart
LineChart
PieChart
Sankey Diagrams
ScatterChart
Timeline
I am working on a Google Charts Timeline plot, showing the duration periods of a number of tasks, located in a table in a MySQL database. Using PHP there is a number of ways to retrieve and store this, for instance as a 2-dimensional array. However, is there a way to pass such an array (or other easily created data containing objects), in the way that the Google Charts Timeline can handle, through the dataTable.addrows() method?
Or if I should describe it as an example:
function drawChart() {
// Nothing to see here, move along now...
var container = document.getElementById('timeline');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
// The column heading can be fixed or variable, this doesnt matter.
dataTable.addColumn({ type: 'string', id: 'Opgave ID' });
dataTable.addColumn({ type: 'string', id: 'Opgavetitel' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
/* I would like to replace the fixed input of dataTable.addRows, with a
*variable input, for instance a 2-dimensional PHP-array.
*/
dataTable.addRows([
[ '1', 'Some task', new Date(2015, 3, 9), new Date(2015, 3, 23) ],
[ '2', 'Another task', new Date(2015, 3, 13), new Date(2015, 3, 20) ],
[ '3', 'A different task', new Date(2015, 3, 16), new Date(2015, 3, 30) ]]);
// No questions for any of this
var options = {
timeline: {showRowLabels: false, singleColor: '#8d8'}
};
chart.draw(dataTable, options);
}
Doing a quick google search, I found this article:
http://www.dyn-web.com/tutorials/php-js/json/multidim-arrays.php
I'm not a PHP programmer, so this isn't tested but should work:
<?
$timeData = array(
array('1', 'Some task', new DateTime('2015-04-09'), new DateTime('2015-04-23')),
array('2', 'Another task', new DateTime('2015-04-13'), new DateTime('2015-04-20')),
array('3', 'A different task', new DateTime('2015-04-16'), new Date('2015-04-30))
);
?>
function drawChart() {
// Nothing to see here, move along now...
var container = document.getElementById('timeline');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
// The column heading can be fixed or variable, this doesnt matter.
dataTable.addColumn({ type: 'string', id: 'Opgave ID' });
dataTable.addColumn({ type: 'string', id: 'Opgavetitel' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows(<? echo json_encode( $timeData ); ?>);
// No questions for any of this
var options = {
timeline: {showRowLabels: false, singleColor: '#8d8'}
};
chart.draw(dataTable, options);
}
You may find it easier to locate existing material if you broaden your search to a more basic concept (passing a PHP 2d array to javascript). Here's an example of an existing Stack Overflow question on that topic:
Best way to pass a 2d array into JavaScript from PHP?
And there are many more like it.
I got the same problem while using Google Charts Timeline while using Laravel 6.0 framework. I passed the query results to the view file as an associative array and the used json_encode() to convert the associative array into a JavaScript array that turned into an array of objects:
<script>
// create a custom data object to pass into the array
// the charter array data is of the format:
//
// Array(5)
// 0: {mn: "2020-02-12 10:03:17", mx: "2022-07-12 10:03:17", cha_booking_id: 1}
// 1: {mn: "2020-02-12 13:33:07", mx: "2020-10-12 13:33:07", cha_booking_id: 2}
// 2: {mn: "2020-02-12 13:39:47", mx: "2020-08-12 13:39:47", cha_booking_id: 3}
// 3: {mn: "2020-04-12 06:21:08", mx: "2020-04-12 06:21:08", cha_booking_id: 4}
// 4: {mn: "2020-05-12 08:44:24", mx: "2020-07-12 08:44:24", cha_booking_id: 5}
var data = [];
charter.forEach(el => {
var arr = [
el.cha_booking_id.toString(),
new Date(
el.mn.substring(0, 4), // get the year from the date format that is passed
el.mn.substring(5, 7), // get the month from the date format that is passed
el.mn.substring(8, 10) // get the day from the date format that is passed
),
new Date(
el.mx.substring(0, 4),
el.mx.substring(5, 7),
el.mx.substring(8, 10)
)
];
data.push(arr);
// The column heading can be fixed or variable, this doesnt matter.
dataTable.addColumn({ type: 'string', id: 'Opgave ID' });
dataTable.addColumn({ type: 'string', id: 'Opgavetitel' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows(data);
// No questions for any of this
var options = {
timeline: {showRowLabels: false, singleColor: '#8d8'}
};
chart.draw(dataTable, options);
</script>
I am wondering if anyone knows how you would go about adding tooltips to multiple lines of data with Google Line Charts using DataTable, addColumn and addRow?
I've seen it done using other methods, but that is quite hard in my project and I feel like dumbass for not figuring this out. Anyways, I've dumbed down my code to present the essentials of my problem.
As you see, the tooltip shows for Line 2, but not for Line 1. My question is this: How do I add a tooltip to Line 1 using this method?
My code:
http://jsfiddle.net/Qquse/550/
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'y');
data.addColumn('number', 'Line 1');
data.addColumn('number', 'Line 2');
data.addColumn({type: 'string', role: 'tooltip'});
data.addRow([1, 1, 2, "Some fancy tooltip"]);
data.addRow([2, 2, 4, "Some fancy tooltip"]);
data.addRow([3, 3, 6, "Some fancy tooltip"]);
data.addRow([4, 4, 8, "Some fancy tooltip"]);
data.addRow([5, 5, 10, "Some fancy tooltip"]);
var options = {
title: 'Graph'
};
var chart = new google.visualization.LineChart(document.getElementById('chart'));
chart.draw(data, options);
}
google.load("visualization", "1", {packages: ["corechart"]});
google.setOnLoadCallback(drawChart);
</script>
</head>
<body>
<div id="chart"></div>
</body>
</html>
I tried adding both DataColumns first, then the tooltips. Turns out it had to be in this order:
data.addColumn('number', 'y');
data.addColumn('number', 'Line 1');
data.addColumn({type: 'string', role: 'tooltip'});
data.addColumn('number', 'Line 2');
data.addColumn({type: 'string', role: 'tooltip'});
instead of
data.addColumn('number', 'y');
data.addColumn('number', 'Line 1');
data.addColumn('number', 'Line 2');
data.addColumn({type: 'string', role: 'tooltip'});
data.addColumn({type: 'string', role: 'tooltip'});
Updated working fiddle: http://jsfiddle.net/Qquse/1207/