Label on either axis X/Y are being cut off

[Gladyston Agra França]

Hi guys,

About the issue, it is not a truncating problem. The beginning of the string is just being erased (slanted text in X axis),
It could be related to the fact that the "options.height" value is being changed internally by the framework.
I am setting the chart values for width and height via options parameter. But after chart is drawn if i query the options.height value,
it is a bit larger than the value I had set. It seems like the chart layout is calculated using the new higher options.height but it is drawn using the options.height i had set, so the
label is just cropped.
Is it a known issue?


     



 

[Sergey Grabkovsky]

Hi Gladyston, charts should not be modifying their options structure. In fact, one of the first things we do in our code is copy the options object so that we may have our own copy. To answer your question, no this is not a known issue, and I'm very surprised it's happening. However, before we decide that it is in fact a bug, could you please let us know which chart you are attempting to use and if at all possible, either provide a link to this happening in the wild, or create a jsfiddle that demonstrates the problem. It is very important for us to be able to reproduce the reported issues.

Thanks,

- Sergey

--
You received this message because you are subscribed to the Google Groups "Google Chart API" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-chart-a...@googlegroups.com.
To post to this group, send email to google-c...@googlegroups.com.
Visit this group at http://groups.google.com/group/google-chart-api.
For more options, visit https://groups.google.com/d/optout.

[Gladyston Agra França]

Hi Sergey,

Sorry about  the lack of information, should had post my setup.

I am running google chart on a mobile device (android 4.4.4).

following jsfiddle runs ok on desktop but presents the  behavior i described when running on device.

chart sample


I am not taking in account webview stuff, as i think it should not influence the value set in options variable.

Is it possible android client is being dowloading a different library than the desktop client?

[Sergey Grabkovsky]

Ok, so I'm a little confused about your question. You said in your previous message that options.height is being "changed by the framework." I took that to mean that you were reading the value from options and it wasn't what you originally stored in, like so:

options.height = 5;

chart.draw(data, options);

console.log(options.height); // I thought this would print out something other than 5.

However, it occurs to me now that you may have meant that Google Charts isn't setting the div to be your expected size, which may very well be the case. Especially, since you're giving the chart multiple signals of what its size should be. You're both setting options.width/height to something, and you're setting your div size to some number. Generally, the style attribute should have a unit attached to it, as just the number is ambiguous (i.e. you should be doing div.style.height = window.innerHeight + 'px').

Furthermore, since different browsers may have different display defaults (especially for different devices), they may either have different units or different default margins.

Another thing that may be occurring is that the chart may think that it doesn't have enough space to fully render, and so it would be clipped. You may try to fix this by setting the chartArea size such that it leaves enough room for the labels. In the absence of other information, charts attempt to lay themselves out to have some balance, and optimize for the presentation of data. This means that when the chart doesn't have a lot of room to render, it will truncate labels. Unfortunately, we don't have an option to say "never truncate" or "prioritize labels". You may file a feature request, but it is unlikely that we will be changing the implementation for the layout of these charts.

[Gladyston Agra França]

Just adding,

My check to see if height i had set was changed or not is done using this code:

                             

        var cli = chart.getChartLayoutInterface();
        var chartSize = cli.getBoundingBox('chart');

        console.log("configured chart height: "+SCREEN_HEIGHT);
        console.log("current chart height: "+chartSize.height);

Chart bounding box should not match  size set on options variable? If it should not, is that a problem with margin or something else. And more important, Is there a way to set those values?

About div stuff:
I am setting the div to the exact size (width and height) that i am setting the chart options. (Even when i set div with a size larger than the one set to chart options cropping still occurs)

Just one heads up, testint same code (java and html) it runs fine in a different device (same dpi but different manufacturer and android version: 4.0.1)

Thanks for your time anyway :)

[Sergey Grabkovsky]

What you probably want is to change the size of the chartArea, not the chart itself, to leave enough room for the labels. The chart layout interface will not report the size of the div, it will report the bounding size of the elements in the chart, which may be different than the size of the div.

[Gladyston Agra França]

I think maybe looking  an image of the  chart could shade some light.

chart print image


1. The chart's parent div is drawn in blue.
2. Chart background color is gray

So in  theory chart size  (options.width and options.height) is smaller than the available size (div size is 40 px large and taller )
It is ok if after laying out the chart the remaining space if not enoght to render the label, it should be truncated (those 3 dots). My complain is about
the cropped area, the initial part of the string is being cropped.
The question is, why not just truncate a little more in order to prevent string being  cropped.

Att.
Gladyston

[Andrew Gallant]

You can override the default dimensions of the chart area (where the bars are drawn), which determines the space left for the axis labels, by setting the chartArea.height/width/top/left options.  These options can either be numbers (pixels) or strings (percents of the total relevant outer dimension).  To make room for the axis labels, you could move the chart area up and shrink it, like this:

chartArea: {
    top: 20,

    height: '70%'
}

You'll need to fiddle with the values to get something that works for you.  You can also use the left and width options under chartArea to make more room for the legend labels.

[Sergey Grabkovsky]

Hm. I've had no luck reproducing your issue on a Nexus 7. I've seen these types of issues occur when people draw into a div that is not visible when the chart is drawn. Is it possible that the div is hidden when you draw the chart? It looks like you're just using a WebView for the chart, which makes it a bit more difficult for me to reproduce your issue. Can you reproduce the issue with Chrome? Preferably in your plnkr example?

[Gladyston Agra França]

I had only experienced this issue on a specific device, unfortunately it is the target device, (on galaxy x it runs fine). I think without debugging on that device  investigation will be difficult, so could you please just clarify  what is the relationship between options' width and height and width and height coming from this function: chart.getBoundingBox()
I am asking that because in galaxy x(webview) and desktop browsers those values match(width and height).  But  on the target device width  from getBoundingBox is a bit higher.

Is that possible framework is laying out chart based on getBoundingBox values and cropping chart based on options values? This could explain the scenario  i am facing.

Hi Andrew,

I already tested manipulating chartArea options. It seems my problem is not related to those settings :)

[Sergey Grabkovsky]

The result getBoundingBox is roughly the same as calling getBoundingBox on the SVG element. The chart.getBoundingBox() call is the result of what is rendered given the width/height you pass in. In theory, it shouldn't be rendering things outside of the chart area, but there are reasonable cases of this. For example, if you draw a LineChart with a lot of data, but set the view window to show a small part of it, the getBoundingBox call might return a much larger bounding box than what is actually visible, because there are elements that are clipped; either by the SVG element itself, or by a clip path.

What you are seeing does look like some sort of error or bug, but without any way to reproduce it, I'm not sure we can do anything about it. What device is this failing on? That would be immensely helpful.

[Gladyston Agra França]

Sorry, i thought i had mention: Moto X

[Sergey Grabkovsky]

I wasn't able to reproduce this on Chrome on a Moto X. It seems that the issue is specific to the page or WebView. One thing that might be happening is the browser/WebView might be introducing body margins on all sides, which means that you wouldn't be getting the real size of the window, but the size of the window + margins. This might account for the difference and truncation. The other thing that you might want to try is loading version 1.1, which has a slightly different text layout algorithm. Please try removing the margins and setting to 1.1 separately.

[Gladyston Agra França]

Perfect shot.
It turns out that the problem is related to margin/padding. What confused me was the fact that  this behaviour only happens on a specific device.

Thanks a lot for your help.

[Sergey Grabkovsky]

Ok good. I'm glad it's not a bug on our end. That would have been a weird one. I initially didn't mention the padding because your screenshot didn't look like any was being applied. My guess is that other devices also crop the chart a bit, but it's not noticeable because the cropped part would have been whitespace anyway.