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.
On Wed, Oct 22, 2014 at 6:11 PM, Gladyston Agra França <[email protected]>
wrote:
> I think maybe looking an image of the chart could shade some light.
>
> chart print image <http://s29.postimg.org/rol0c3zp3/chart_print.png>
>
>
> 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
>
>
>
>
>
>
> Em quarta-feira, 22 de outubro de 2014 14h19min55s UTC-3, Sergey
> Grabkovsky escreveu:
>>
>> 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.
>> On Wed Oct 22 2014 at 1:02:54 PM Gladyston Agra França <[email protected]>
>> wrote:
>>
>>> 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 :)
>>>
>>>
>>> Em quarta-feira, 22 de outubro de 2014 10h57min45s UTC-3, Sergey
>>> Grabkovsky escreveu:
>>>>
>>>> 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.
>>>>
>>>> On Tue Oct 21 2014 at 6:03:11 PM Gladyston Agra França <
>>>> [email protected]> wrote:
>>>>
>>>>> 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 <http://plnkr.co/edit/VC5fFqS3mdbmegdI1wRt?p=preview>
>>>>>
>>>>>
>>>>> 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?
>>>>>
>>>>>
>>>>> Em terça-feira, 21 de outubro de 2014 16h17min29s UTC-3, Sergey
>>>>> Grabkovsky escreveu:
>>>>>>
>>>>>> 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
>>>>>>
>>>>>> On Tue Oct 21 2014 at 3:06:26 PM Gladyston Agra França <
>>>>>> [email protected]> wrote:
>>>>>>
>>>>> 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?
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>>
>>>>>>> --
>>>>>>> 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 [email protected].
>>>>>>> To post to this group, send email to [email protected].
>>>>>>
>>>>>>
>>>>>>> Visit this group at http://groups.google.com/group/google-chart-api.
>>>>>>> For more options, visit https://groups.google.com/d/optout.
>>>>>>>
>>>>>> --
>>>>> 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 [email protected].
>>>>> To post to this group, send email to [email protected].
>>>>> Visit this group at http://groups.google.com/group/google-chart-api.
>>>>> For more options, visit https://groups.google.com/d/optout.
>>>>>
>>>> --
>>> 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 [email protected].
>>> To post to this group, send email to [email protected].
>>> Visit this group at http://groups.google.com/group/google-chart-api.
>>> For more options, visit https://groups.google.com/d/optout.
>>>
>> --
> 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 [email protected].
> To post to this group, send email to [email protected].
> Visit this group at http://groups.google.com/group/google-chart-api.
> For more options, visit https://groups.google.com/d/optout.
>
--
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 [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/google-chart-api.
For more options, visit https://groups.google.com/d/optout.
