How can I add a customized tooltip?
220 views
Skip to first unread message
Leo Solano
Feb 15, 2014, 9:34:42 AM2/15/14
to google-visua...@googlegroups.com
How can I add a customized tooltip from a column in my spreadsheet - or html tooltips?
This is what I have so far on my test page:
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", '1', {packages:['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var query = new google.visualization.Query(
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
var data = response.getDataTable();
var chart = new google.visualization.ColumnChart(document.getElementById('columnchart'));
chart.draw(data, { legend: { position: 'none' } });
}
</script>
<title>Data from a Spreadsheet</title>
</head>
<body>
<span id='columnchart'></span>
</body>
</html>
Daniel LaLiberte
Feb 18, 2014, 10:22:26 AM2/18/14
to google-visua...@googlegroups.com
Hi Leo,
I believe you can do what you want if you transform the data coming from the spreadsheet by using a DataView. See the setColumns() method documentation: https://developers.google.com/chart/interactive/docs/reference#DataView_setColumns and note that you can add a calculated column that species a role. So the end of your script would look more like this:
var data = response.getDataTable();
var view = new google.visualization.DataView(data);
// Insert a tooltip column after column 1, using the values in column 1
view.setColumns([0, 1, {sourceColumn: 2, role: 'tooltip'}, 3, 4]);
var chart = new google.visualization.ColumnChart(document.getElementById('columnchart'));
chart.draw(view, { legend: { position: 'none' } });
I hope that will be enough of a clue, but let me know if it doesn't work out.
--
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-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.
daniel.laliberte@GMail.com 9 Juniper Ridge Road, Acton MA
Leo Solano
Feb 18, 2014, 10:29:21 AM2/18/14
to google-visua...@googlegroups.com
Thank you very much Daniel, I will give it a try!
Leo
--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/MoxlEkXbbaw/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.
Leo Solano
Feb 18, 2014, 11:20:46 AM2/18/14
to google-visua...@googlegroups.com
Hi Daniel, I think that I made it work with your help!
Do you know how I could change the colour of the bars to be different?
leo
On 18 February 2014 10:22, Daniel LaLiberte <dlali...@google.com> wrote:
--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/MoxlEkXbbaw/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.
Daniel LaLiberte
Feb 18, 2014, 11:57:51 AM2/18/14
to google-visua...@googlegroups.com
I'm seeing an error in your page currently (forEach not defined).
The documentation on the ColumnChart talks about how to get different colors for each bar: https://developers.google.com/chart/interactive/docs/gallery/columnchart#Colors
Leo Solano
Feb 18, 2014, 3:09:08 PM2/18/14
to google-visua...@googlegroups.com
hmmm, thanks, but really don't know how to add colours if I am using data from a spreadsheet - sorry, new using charts :(
Daniel LaLiberte
Feb 18, 2014, 3:55:13 PM2/18/14
to google-visua...@googlegroups.com
Ah, well, similar to how you could use a column of the spreadsheet for tooltips, you could use a column for the role called 'style'.
Leo Solano
Feb 18, 2014, 4:04:04 PM2/18/14
to google-visua...@googlegroups.com
no luck...
I included a new column with hex colours called "Style" - but I definitely have something weird happening in my page... argh! - thanks for your patience!!!
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", '1', {packages:['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var query = new google.visualization.Query(
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
console.log (response.getDataTable())
var rawData = response.getDataTable()
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string', 'Year');
dataTable.addColumn('number', 'Sales');
dataTable.addColumn('style', 'color');
// A column for custom tooltip content
dataTable.addColumn({type: 'string', role: 'tooltip', style: 'color', p:{html: true} });
console.log(JSON.stringify(rawData));
var output_array=[]
var a = rawData.xf;
a.forEach(function(entry) {
//console.log(entry);
//console.log(JSON.stringify(entry));
var title = entry['c'][0].v
var value = entry['c'][1].v
var tip = entry['c'][2].v
var style = entry['c'][3].v
//console.log (title +' : ' + value +' : ' + tip)
output_array.push([title,value,tip,style])
});
dataTable.addRows(output_array)
//dataTable.addRows(response.getDataTable())
var options = {
tooltip: {isHtml: true},
legend: 'none'
};
var chart = new google.visualization.ColumnChart(document.getElementById('columnchart'));
chart.draw(dataTable, options);
//chart.draw(data, { legend: { position: 'none' } });
}
</script>
<title>Data from a Spreadsheet</title>
</head>
<body>
<h1>This is a test to show customized html tooltips on a graph</h1>
<p>A brief explanation about what this page is about here: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><br>
<span id='columnchart'</span>
</body>
</html>
Daniel LaLiberte
Feb 18, 2014, 4:22:23 PM2/18/14
to google-visua...@googlegroups.com
I meant that you need to specify that the Style column is used for a column in your dataTable that has role: 'style'. If you want to do like what you did for the tooltip (rather than using a DataView, which I think would be simpler) then you need to add this line after your last dataTable.addColumn:
dataTable.addColumn({type: 'string', role: 'style' });
And change the end of your forEach loop to this:
var tip = entry['c'][2].v;
var style = entry['c'][3].v;
//console.log (title +' : ' + value +' : ' + tip + ' style: ' + style)
output_array.push([title,value,tip, style]);
Leo Solano
Feb 18, 2014, 4:35:15 PM2/18/14
to google-visua...@googlegroups.com
Now my tooltips are showing the colour value... boy, I'm lost!
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", '1', {packages:['corechart']});
google.setOnLoadCallback(drawChart);
function drawChart() {
var query = new google.visualization.Query(
query.send(handleQueryResponse);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
console.log (response.getDataTable())
var rawData = response.getDataTable()
var dataTable = new google.visualization.DataTable();
dataTable.addColumn('string', 'Year');
dataTable.addColumn('number', 'Sales');
dataTable.addColumn({type: 'string', role: 'style' });
// A column for custom tooltip content
dataTable.addColumn({type: 'string', role: 'tooltip', p:{html: true} });
console.log(JSON.stringify(rawData));
var output_array=[]
var a = rawData.xf;
a.forEach(function(entry) {
//console.log(entry);
//console.log(JSON.stringify(entry));
var title = entry['c'][0].v
var value = entry['c'][1].v
var tip = entry['c'][2].v
var style = entry['c'][3].v;
//console.log (title +' : ' + value +' : ' + tip + ' style: ' + style)
output_array.push([title,value,tip,style])
});
dataTable.addRows(output_array)
//dataTable.addRows(response.getDataTable())
var options = {
tooltip: {isHtml: true},
legend: 'none'
};
var chart = new google.visualization.ColumnChart(document.getElementById('columnchart'));
chart.draw(dataTable, options);
//chart.draw(data, { legend: { position: 'none' } });
}
</script>
<title>Data from a Spreadsheet</title>
</head>
<body>
<h1>This is a test to show customized html tooltips on a graph for Andre</h1>
<p>A brief explanation about what this page is about here: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p><br>
<span id='columnchart'</span>
</body>
</html>
Daniel LaLiberte
Feb 18, 2014, 4:47:01 PM2/18/14
to google-visua...@googlegroups.com
You need to swap the last two addColumn calls:
// A column for custom tooltip content
dataTable.addColumn({type: 'string', role: 'tooltip', p:{html: true} });
// A column for the style
dataTable.addColumn({type: 'string', role: 'style' });
Leo Solano
Feb 18, 2014, 6:08:48 PM2/18/14
to google-visua...@googlegroups.com
Thank you so much Daniel!!!
looking good!
asgallant
Feb 18, 2014, 6:17:39 PM2/18/14
to google-visua...@googlegroups.com
Why are you parsing the values in the returned data like this?
var a = rawData.xf;
a.forEach(function(entry) {
//console.log(entry);
//console.log(JSON.stringify(entry));
var title = entry['c'][0].v
var value = entry['c'][1].v
var tip = entry['c'][2].v
var style = entry['c'][3].v;
//console.log (title +' : ' + value +' : ' + tip + ' style: ' + style)
output_array.push([title,value,tip,style])
});
a.forEach(function(entry) {
//console.log(entry);
//console.log(JSON.stringify(entry));
var title = entry['c'][0].v
var value = entry['c'][1].v
var tip = entry['c'][2].v
var style = entry['c'][3].v;
//console.log (title +' : ' + value +' : ' + tip + ' style: ' + style)
output_array.push([title,value,tip,style])
});
You could simply change the titles and roles of columns in the existing DataTable instead of creating a new one:
var dataTable = response.getDataTable();
dataTable.setColumnLabel(0, 'Year');dataTable.setColumnLabel(1, 'Sales');
dataTable.setColumnProperty(2, 'html', true);
dataTable.setColumnProperty(3, 'role', 'style');
To unsubscribe from this group and stop receiving emails from it, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.
--daniel.l...@GMail.com 9 Juniper Ridge Road, Acton MA
--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/MoxlEkXbbaw/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.
--
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+unsub...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.
--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/MoxlEkXbbaw/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.
--
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+unsub...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.
--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/MoxlEkXbbaw/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.
--
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+unsub...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.
--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/MoxlEkXbbaw/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.
Leo Solano
Feb 18, 2014, 7:19:14 PM2/18/14
to google-visua...@googlegroups.com
Thanks, I will try that... And, am I right to think that html tooltips don't work with pie charts?
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.
Leo Solano
Feb 19, 2014, 9:38:55 AM2/19/14
to google-visua...@googlegroups.com
One last question:
How do I set a position for my tooltips? - They are showing far away from my graphic.
thanks in advance for any help!
:)
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-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.
--daniel.l...@GMail.com 9 Juniper Ridge Road, Acton MA
--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/MoxlEkXbbaw/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.
--
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-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.
--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/MoxlEkXbbaw/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.
--
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-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.
--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/MoxlEkXbbaw/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.
--
--
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-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.
--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/MoxlEkXbbaw/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsubscr...@googlegroups.com.
To post to this group, send email to google-visua...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-visualization-api.
For more options, visit https://groups.google.com/groups/opt_out.
--
You received this message because you are subscribed to a topic in the Google Groups "Google Visualization API" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/google-visualization-api/MoxlEkXbbaw/unsubscribe.
To unsubscribe from this group and all its topics, send an email to google-visualization-api+unsub...@googlegroups.com.
To post to this group, send email to google-visualization-api@googlegroups.com.
asgallant
Feb 19, 2014, 4:03:26 PM2/19/14
to google-visua...@googlegroups.com
PieCharts do support HTML tooltips (set the tooltip.isHtml option to true to see them), but they do not support custom tooltips, so the distinction is nearly meaningless. You cannot change the positioning of tooltips, but if they are appearing far away, then something else is wrong in your code. Do you have a public-facing page I can test this on?
leosolano
Feb 19, 2014, 9:02:56 PM2/19/14
to google-visua...@googlegroups.com, google-visua...@googlegroups.com
The problem that I am getting now is that the chart displays shrunken on my page on Firefox:
As you can see I had to solve it by adding <br> and lines of text to force the chart to show. Is there a way to set dimensions to the chart?
Thanks for any help!
Leo
To unsubscribe from this group and all its topics, send an email to google-visualizati...@googlegroups.com.
asgallant
Feb 20, 2014, 10:46:53 AM2/20/14
to google-visua...@googlegroups.com
You can set the dimensions on either the container div (in CSS) or in the chart's options, eg:
in css:
#myChartDiv {
height: 400px;
width: 600px;
}
in options:
in options:
chart.draw(data, {
height: 400,
width: 600
});
Reply all
Reply to author
Forward
0 new messages