Artefacts in AreaChart rendering

Sam Halliday

unread,

Dec 27, 2011, 12:21:23 PM12/27/11

to Google Visualization API

Dear all,

At the bottom of this e-mail I have included the source to a test case
which displays some rendering artefacts for an AreaChart.

The artefacts appear when an AreaChart is drawn in 'stacked' mode with
the 'lineWidth' of the entries set to 0 (this is to hide the
tooltips).

It would be good if either:

1. the rendering bug could be fixed Google-side

or

2. there were another mechanism to hide columns from appearing in the
tooltips. (meaning tooltips don't appear for rows which contain only
entries in the specified columns, and entries for these columns never
appear in tooltips even if there are other entries for the row)

Regards, Sam

========================
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></
script>
</head>

<body>
<div id="test" style="width:1000px; height:500px"></div>
<script type="text/javascript">
function start() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Sales');
data.addColumn('number', 'Expenses');
data.addRows([
['2004', 1000, 400],
['2005', 1170, 460],
['2006', 660, 1120],
['2007', 1030, 540]
]);

var options = {
areaOpacity: 1.0,
isStacked: true,
series: [{
color: 'red',
lineWidth: 0
}, {
color: 'red',
lineWidth: 0
}
]};

var chart = new
google.visualization.AreaChart(document.getElementById('test'));
chart.draw(data, options);
}

google.load('visualization', '1.0', {'packages':['corechart']});
google.setOnLoadCallback(start);
</script>
</body>
</html>

asgallant

unread,

Dec 27, 2011, 1:45:47 PM12/27/11

to google-visua...@googlegroups.com

I don't see any rendering artifacts when drawing the chart. The only weird thing is that both lines are red with opacity 1, which makes it impossible to distinguish them; I changed one series to blue so I could tell them apart, but there weren't any errors when both were red either: http://jsfiddle.net/smjVd/

Sam Halliday

unread,

Dec 27, 2011, 2:16:30 PM12/27/11

to Google Visualization API

The similar colouring is intentional (it cannot be seen easily
otherwise).

On OS X Safari, I am seeing a faint white strip, see http://derp.co.uk/25348
for a screenshot

asgallant

unread,

Dec 27, 2011, 2:39:57 PM12/27/11

to google-visua...@googlegroups.com

Ok, I see what you mean. I believe the solution to your problem is to draw the chart with lineWidth options set to 1 and the enableInteractivity option set to false: http://jsfiddle.net/smjVd/3/

Sam Halliday

unread,

Dec 27, 2011, 2:41:44 PM12/27/11

to google-visua...@googlegroups.com

That doesn't work because I want interactivity in other aspects of the chart. What *would* help would be if I could disable the tooltips on a per-column basis.

asgallant

unread,

Dec 27, 2011, 3:03:44 PM12/27/11

to google-visua...@googlegroups.com

You can't disable tooltips by column. What is the goal you are trying to accomplish with this? I might be able to find you another route to accomplishing it.

Sam Halliday

unread,

Dec 27, 2011, 3:09:21 PM12/27/11

to google-visua...@googlegroups.com

There are two things I am trying to do at the same time which together require this sort of workaround:

1. I have about 6 columns of data which is to be displayed as a combo chart, with the area elements stacked. Two of the areas should blend into one larger area and the boundary should not show up in the tooltips. (A possible, but rather annoying workaround would be to have only one column - but the underlying data is important elsewhere).

2. I am storing additional columns so that I can manually handle the interpolation and display of missing data - the 'uncertain' role is insufficient to do what I want. I do not want these interpolated values to appear in any tooltips.

:-)

asgallant

unread,

Dec 27, 2011, 3:46:55 PM12/27/11

to google-visua...@googlegroups.com

The easy solution to 1) is to create a DataView, with 1 of the columns being a calculated column that sums the areas you want combined. See: http://jsfiddle.net/smjVd/4/

2) is the tricky part. Are you wholly opposed to the idea of tooltips appearing on these points, or would they be ok as long as the interpolated data was left out?

Sam Halliday

unread,

Dec 27, 2011, 3:55:57 PM12/27/11

to google-visua...@googlegroups.com

Thanks asgallant - the view might be an option for the 1st part.

As for 2, I could perhaps have a tooltip appear on mouseover that said "missing data" or something similar. But this absolutely must not appear in the tooltip on the boundary with real data. e.g. the rows that contain the end points of actual data and the end point of the interpolated data. It would be a massive undertaking to rearrange the column ordering in order to ensure that the actual data values are given precedence in the tooltip display. (i.e. that a mouseover selects the real data and not the interpolated value).

asgallant

unread,

Dec 27, 2011, 4:19:00 PM12/27/11

to google-visua...@googlegroups.com

You could do the same thing with the interpolated data: add a calculated column that takes real data when available and interpolated data when not, then add another calculated column with the "tooltip" role that creates different tooltips depending on whether the data is real or interpolated.

Sam Halliday

unread,

Dec 27, 2011, 4:21:15 PM12/27/11

to google-visua...@googlegroups.com

but then I lose the power of customising the look and feel of the interpolated data - which is critical.

Sam Halliday

unread,

Dec 27, 2011, 4:41:26 PM12/27/11

to google-visua...@googlegroups.com

asgallant, thanks for all your help today. With regards to this thread - and also the one about displaying a pie chart in the tooltip and piechart legends - I have decided that the Google Visualisation tooltips are not designed to do what I need for my project. However, the GV-API is robust enough to allow me to implement the workaround of creating my own tooltips.

I'm going to add listeners for onmouseover/onmouseout and draw my own tooltips by setting tooltip.trigger: 'none'. These can be as complicated as I like.

However, the GV-API obviously contains some code to work out *where* to display the tooltips (i.e. x,y absolute positions which intelligently take the size of the tooltip window into account). I'd like to re-use this code, how can I access it?

asgallant

unread,

Dec 27, 2011, 4:45:38 PM12/27/11

to google-visua...@googlegroups.com

I guess I misunderstood then. Going back to column ordering; I believe that higher index columns overlay lower index columns, and it is trivially easy to reorder columns when using a view. Ex, to change up the order:

view.setColumns([0, 2, 3, 5, 4, 1]);

Which should solve the problem of making sure the non-interpolated data's tooltips get priority.

Sam Halliday

unread,

Dec 27, 2011, 4:48:47 PM12/27/11

to google-visua...@googlegroups.com

Hmm, that might actually do the trick for some of my charts! I still need to implement my own tooltips for the more complicated charts that require a piechart popup.

asgallant

unread,

Dec 27, 2011, 4:49:34 PM12/27/11

to google-visua...@googlegroups.com

Good luck with that.

The API doesn't expose any the tooltip positioning functions, and it's not an open-source API, so you'll have to roll your own unless/until the team changes that.

Reply all

Reply to author

Forward