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.
On Mon, May 24, 2010 at 11:44 AM, Viz Kid <[email protected]> wrote: > > 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 > > On Mon, May 24, 2010 at 2:52 PM, SGopu <[email protected]> wrote: > >> 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! >> >> On Mon, May 24, 2010 at 3:37 AM, Viz Kid <[email protected]> wrote: >> >>> >>> 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<http://code.google.com/apis/visualization/documentation/release_notes.html#05182010> >>> . >>> >>> 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 < >>> [email protected]> 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 }); >>>> >>>> On Fri, Jan 22, 2010 at 7:24 AM, Booie <[email protected]> wrote: >>>> > 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. >>>> > >>>> > >>>> > On Nov 26 2009, 10:38 am, VoidNT <[email protected]> wrote: >>>> >> 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 <[email protected]> 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 >>>> >> >>>> >> > On Tue, Nov 24, 2009 at 10:38 AM, VoidNT <[email protected]> >>>> wrote: >>>> >> > > 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 andlegend, because >>>> for >>>> >> > > example when we make a big visualization, almost a full screen, >>>> >> > > there's still not enough space forlegendto fit: >>>> >> > >http://i46.tinypic.com/fvlbh0.png >>>> >> > > . So with automatic font size we get unreadably small text >>>> inlegend, >>>> >> > > but with fixed font size the labels get cut off. >>>> >> >>>> >> > > On Nov 24, 5:47 am, Redidas <[email protected]> wrote: >>>> >> > > > 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 <[email protected]> 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.pnght. >>>> .. >>>> >> >>>> >> > > > > 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 >>>> >> > > [email protected]. >>>> >> > > To unsubscribe from this group, send email to >>>> >> > > [email protected]<google-visualization-api%[email protected]> >>>> <google-visualization-api%[email protected]<api%[email protected]> >>>> > >>>> >> > > . >>>> >> > > For more options, visit this group at >>>> >> > >http://groups.google.com/group/google-visualization-api?hl=en.-Hide >>>> >> > >quoted text - >>>> >> >>>> >> - Show quoted text - >>>> > >>>> > -- >>>> > You received this message because you are subscribed to the Google >>>> Groups "Google Visualization API" group. >>>> > To post to this group, send email to >>>> [email protected]. >>>> > To unsubscribe from this group, send email to >>>> [email protected]<google-visualization-api%[email protected]> >>>> . >>>> > 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 >>>> [email protected]. >>>> To unsubscribe from this group, send email to >>>> [email protected]<google-visualization-api%[email protected]> >>>> . >>>> For more options, visit this group at >>>> http://groups.google.com/group/google-visualization-api?hl=en. >>>> >>>> >>> -- >>> You received this message because you are subscribed to the Google Groups >>> "Google Visualization API" group. >>> To post to this group, send email to >>> [email protected]. >>> To unsubscribe from this group, send email to >>> [email protected]<google-visualization-api%[email protected]> >>> . >>> 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 >> [email protected]. >> To unsubscribe from this group, send email to >> [email protected]<google-visualization-api%[email protected]> >> . >> For more options, visit this group at >> http://groups.google.com/group/google-visualization-api?hl=en. >> > > -- > You received this message because you are subscribed to the Google Groups > "Google Visualization API" group. > To post to this group, send email to > [email protected]. > To unsubscribe from this group, send email to > [email protected]<google-visualization-api%[email protected]> > . > 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 [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/google-visualization-api?hl=en.
