Long labels on visualizations

[VoidNT]

Hi guys,
need your advice. I'm working on project which is going to have a
dashboard using Google Visualizations API. It should be a highly
customizable functionality with user enjoying a lot of freedom with
choosing what data he wants to visualize.

We stuck on problem with long labels. Many labels in our
visualizations are going to be considerably long (50 symbols and
more). On many visualizations these labels get obscured. If we allow
visualization to choose font size automatically the labels can get
really small or don't appear at all; if we set a specific font size
the labels do not fit and get cut. We truncate labels which are more
than 20 characters long, but there's no way to show full labels in
tooltip, only the same truncated ones. In any case, it looks horrible.

We thought we could solve most of such problems by allowing user to
view a bigger version of the chart, but the problem remains even on
big ones.

For example:
http://i46.tinypic.com/1z21v9y.png
http://i47.tinypic.com/r74tcj.png
http://i45.tinypic.com/a24474.png

On the first picture the legend fits (almost) by choosing proper
visualization size and font size, but look how much white space
remains - it could be much more compact, but we were not able to do
so.

Any solutions how to handle this problem?

[Redidas]

Hi VoidNT,

I'm not aware of any additional options the API offers regarding text
format. Maybe a text wrapping enhancement could be suggested to the
API team?

For the time being, I would try to simplify the labels as much as
possible. Some of the labels are so long I'm spending more time trying
to figure out what grouping of data I'm looking at. I don't know if
I'd use pie charts either - some even argue that pie charts limited in
usefulness. (google Edward Tufte, Stephen Few, or even Jorge Camoes)

Personally, I'd simplify all the wording, and switch to a horizontal
bar chart (for label readability)

On Nov 23, 10:28 am, VoidNT <nikita.toro...@mail.ru> wrote:
> Hi guys,
> need your advice. I'm working on project which is going to have a
> dashboard using Google Visualizations API. It should be a highly
> customizable functionality with user enjoying a lot of freedom with
> choosing what data he wants to visualize.
>
> We stuck on problem with long labels. Many labels in our
> visualizations are going to be considerably long (50 symbols and
> more). On many visualizations these labels get obscured. If we allow
> visualization to choose font size automatically the labels can get
> really small or don't appear at all; if we set a specific font size
> the labels do not fit and get cut. We truncate labels which are more
> than 20 characters long, but there's no way to show full labels in
> tooltip, only the same truncated ones. In any case, it looks horrible.
>
> We thought we could solve most of such problems by allowing user to
> view a bigger version of the chart, but the problem remains even on
> big ones.
>

> For example:http://i46.tinypic.com/1z21v9y.pnghttp://i47.tinypic.com/r74tcj.pnghttp://i45.tinypic.com/a24474.png

[VoidNT]

Thanks for your reply Redidas,

yep, there seem to be no relevant options in Visualizations API. My
hope is that there are some hidden abilities which aren't documented
yet. Unfortunately we cannot simplify labels easily because we get
data from third party and ultimately we cannot predict what kind of
labels we would get.

For example, one small option in every chart API would save us - the
maximum length of visualized labels. We would still provide lengthy
labels; the algorithm of a visualization which builds the chart and
calculates coordinates of everything in SVG would truncate the labels
shown on picture, but the additional (or even standard) tooltip would
show a full label.

It's not specifically about piechart. We have problems with barchart
and columnchart also. And I guess it also revolves around automatic
calculation of coordinates in SVG for chart and legend, because for
example when we make a big visualization, almost a full screen,
there's still not enough space for legend to fit: http://i46.tinypic.com/fvlbh0.png
. So with automatic font size we get unreadably small text in legend,
but with fixed font size the labels get cut off.

> > For example:http://i46.tinypic.com/1z21v9y.pnghttp://i47.tinypic.com/r74tcj.pnght...

[Viz Kid]

Indeed there are limitation when trying to use long labels.

Notice that there is a way to increase the tooltip width and height (using the tooltipWidth and tooltipHeight options which are documented here) and this way, using a full screen chart, you would have a lot of room for long text.

Tooltips do not ignore newline characters so you can use a more complex string in the formatted value of the pie chart elements if needed. The tooltip is constructed by

  label (formatted value)

  value (formatted value)

  percentage

You can truncate the label to 20 characters and in the value's formated value put "long label \n value".

Hope this helps,

  Viz Kid

--

You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To post to this group, send email to google-visua...@googlegroups.com.
To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.

[VoidNT]

Thanks Viz Kid. It's not ideal but better than nothing.

Hopefully Google developers would make this more flexible in the
future.

On Nov 25, 10:36 am, Viz Kid <viz...@google.com> wrote:
> Indeed there are limitation when trying to use long labels.
> Notice that there is a way to increase the tooltip width and height (using
> the tooltipWidth and tooltipHeight options which are documented

> here<http://code.google.com/apis/visualization/documentation/gallery/piech...>)

> and this way, using a full screen chart, you would have a lot of room for
> long text.
>
> Tooltips do not ignore newline characters so you can use a more complex
> string in the formatted value of the pie chart elements if needed. The
> tooltip is constructed by
>   label (formatted value)
>   value (formatted value)
>   percentage
> You can truncate the label to 20 characters and in the value's formated
> value put "long label \n value".
>
> Hope this helps,
>   Viz Kid
>

> > google-visualizati...@googlegroups.com<google-visualization-api%2Bunsu...@googlegroups.com>
> > .

[Booie]

I've run into the same problem as VoidNT and I liked his solution. If
I'm correct he was suggesting allowing users to specify max lengths
for both tooltip and legend labels. This would allow you to make a
legend label read something like "This is the...." and the tooltip
label to be the full text "This is the full label".

The other option is to be able to scroll the labels with a mouse
over. This would let you have something like "This is the ->".
Hovering over or clicking the arrow would scroll the label to the next
three words making it "full label". From what I've seen from the api
this is very doable and wouldn't take much work but I could be wrong.
It would certainly solve A LOT of problems for people using these
visualizations.

Thoughts? Perhaps we can get it added to the future feature list if
it has not been added already. Thanks.

> > > calculation of coordinates in SVG for chart andlegend, because for

> > > example when we make a big visualization, almost a full screen,

> > > there's still not enough space forlegendto fit:

> > > > > On the first picture thelegendfits (almost) by choosing proper

> > > > > visualization size and font size, but look how much white space
> > > > > remains - it could be much more compact, but we were not able to do
> > > > > so.
>
> > > > > Any solutions how to handle this problem?
>
> > > --
>
> > > You received this message because you are subscribed to the Google Groups
> > > "Google Visualization API" group.
> > > To post to this group, send email to
> > > google-visua...@googlegroups.com.
> > > To unsubscribe from this group, send email to

> > > google-visualizati...@googlegroups.com<google-visualization-­api%2Bunsu...@googlegroups.com>

> > > .
> > > For more options, visit this group at

> > >http://groups.google.com/group/google-visualization-api?hl=en.- Hide quoted text -
>
> - Show quoted text -

[Shireesha Gopu]

I have run into the same problem where the x labels on a line chart
are getting truncated when the label names are too long(shown in the
attachment). I could have many x axis labels. For this reason I would
like to see vertically aligned labels since horizontally aligned
labels could overlap into one another when there are too many labels.
Is there a workaround for this where I could view the whole labels
without being truncated and overlapped?
I have used the following options while drawing my chart:
google.visualization.LineChart(chartDiv).draw(data,{height:500,
width:600, title:aggDate, axisFontSize:11, legend:'right',
legendFontSize:11, titleFontSize:15 });

> To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.

> For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.
>
>

--
Shireesha Gopu

--
You received this message because you are subscribed to the Google Groups "Google Visualization API" group.
To post to this group, send email to google-visua...@googlegroups.com.

To unsubscribe from this group, send email to google-visualizati...@googlegroups.com.

[Viz Kid]

Hi.

A new version of the visualizations was just released a few days ago in Google I/O.

The new version handles long text issues differently which might be better for you. Specifically, it uses two lines wrapping where long labels with spaces appear and it truncates the labels using ellipsis with a tooltip showing upon mouse over.

The new version also handles long labels better and adds an ellipsis and a tooltip as was suggested in this thread.

See the migration documentation here.

Please let us know how this works for you. We are trying to improve the long text handling and would appreciate any feedback.

Best,

  Viz Kid

[SGopu]

I have already given the 'corecharts' a try. Not all the features of corecharts seem to be working for me. Especially, the wrapping/ellipsing of long lables. Also, I don't see any tooltips when I hover my mouse over the x-axis labels. Attached is the screen shot of my line chart which uses the 'corechart' package.
I have tried reproducing my scenario using the google playground. It works as documented. I am not sure as to where I am going wrong.
If at all there is anything I am doing differently, I am trying to generate the charts dynamically. I read my data from a data store. Also, I am using dojo for the front end interface.
Here is a snippet of the code that I am using for generating the charts.

google.load('visualization', '1', {'packages':['corechart']});

for(idx=0; idx<numCharts; idx++)
{
... (Reading data from a data store)

var chartDiv = document.createElement('div');
chartDiv.setAttribute('id',"DChart"+idx);
chartDiv.setAttribute('name', "DChart"+idx);
document.getElementById('DChartDiv').appendChild(chartDiv);
               
var emptyDiv = document.createElement('div');
emptyDiv.style.height= 10;
document.getElementById('DChartDiv').appendChild(emptyDiv);
     
new google.visualization.LineChart(chartDiv).draw(data,{height:400, width:600, title:idx, legend:'right' });
}

Hope you can help me on this!

[Viz Kid]

Tooltips are shown only when ellipsis is used and in your example for some reason both does not occur. 

Have you tried it in more than one browser? The different between the playground and here might be the dynamic allocation of the div. Can you try to use the same code but with a div that was initialized with the page earlier? It might help us narrow down the problem.

  Viz Kid

[SGopu]

Ok. I have modified my code to use the div that was initialized when the page got loaded. I still have the same problem of overlapping labels in firefox 3.6.3.
I have tried the same piece of code on Chrome and it worked fine where I could see the ellipses and the tooltips. So, it looks like there is some issue with the long labels on firefox.
Is there a way to display the x-axis labels vertically. I would ideally like to see the whole label name. Or, is line wrapping/ellipsing the only way to deal with long label names. With ellipses, the label names still do not make complete sense on the first look. The user still has to go over each label name to know what exactly he is looking at. And, the line breaks seem to be effective only when the first word before a space is short. If the first word is long, it seems to be replaced with ellipsis as well.

[SGopu]

Can someone help me with this please? I would have to get this working in Firefox?
Is google going to come up with a way to display the complete long label names? I would really like to see complete label names either after displaying vertically or some other method.

Thanks.

Shireesha Gopu

[Booie]

I'm having the same issues SGopu. Viz Kid can you post an example of
the ellipses actually in action?

> >>>> See the migration documentation here<http://code.google.com/apis/visualization/documentation/release_notes...>
> >>>> .

>
> >>>> Please let us know how this works for you. We are trying to improve the
> >>>> long text handling and would appreciate any feedback.
>
> >>>> Best,
> >>>>   Viz Kid
>
> >>>> On Wed, May 19, 2010 at 9:07 PM, Shireesha Gopu <
> >>>> gopu.shiree...@gmail.com> wrote:
>
> >>>>> I have run into the same problem where the x labels on a line chart
> >>>>> are getting truncated when the label names are too long(shown in the
> >>>>> attachment). I could have many x axis labels. For this reason I would
> >>>>> like to see vertically aligned labels since horizontally aligned
> >>>>> labels could overlap into one another when there are too many labels.
> >>>>> Is there a workaround for this where I could view the whole labels
> >>>>> without being truncated and overlapped?
> >>>>> I have used the following options while drawing my chart:
> >>>>> google.visualization.LineChart(chartDiv).draw(data,{height:500,
> >>>>> width:600, title:aggDate, axisFontSize:11, legend:'right',
> >>>>> legendFontSize:11, titleFontSize:15 });
>

> ...
>
> read more »- Hide quoted text -