Hi Marc,
The Material Charts are a work in progress, and as such not all options are
supported. One of the unsupported things that you seem to have already
found is the gridlines.count option. It's currently simply being used a
signal of whether to draw gridlines or not. We would actually like to move
away from specifying a count of gridlines, and to specifying the minimum
amount of space allowed for each tick. In order to customize the gridline
frequency, you will have to use the new options structure, which is highly
likely to change even in the next revision of our Material Charts. This is
why we're recommending to most users to use the less powerful
google.charts.Bar.convertOptions. If you want to change the frequency of
gridlines on the horizontal axis, you will have to specify it with the new
options structure. In order to modify the vertical gridlines, you would
have to specify the option for all horizontal axes. The option for that
would be axes.x.all.ticks.pixelsPerTick. You should use this in conjunction
with either hAxis.gridlines.count > 0, or axes.x.all.gridlines = true
(which is what hAxis.gridlines.count > 0 converts to).
With the strokeWidth, there is currently a bug that causes it to not
translate properly, so you will have to add the following new option in
order to fix that:
chart: {
style: {
background: {
stroke: {width: 10}
}
}
}
Your best long-term bet might actually be to use HTML to style the
container.
For the chart area, we introduced a new layout that uses different
philosophies than our previous version, so we didn't add a conversion path
for that. You can, however, use some of the new layout options to do that.
We unfortunately don't support using percentages yet, but you can specify
the padding of the background to achieve a similar effect. For the sake of
example, here's how you would set the padding for each individual side of
the chart:
chart: {
style: {
background: {
padding: {
top: 20,
bottom: 20,
left: 20,
right: 20
},
}
}
}
However, you could simply set padding: 20 if you want it to be the same on
all sides.
Finally, here is a jsfiddle that uses all the options that I
outlined: http://jsfiddle.net/ewt5v5gv/
Please note, again, that the Material Bar Chart is in *beta* and its
options can, and probably will, change with the next release.
Please let us know if you have more questions.
On Friday, October 31, 2014 10:53:51 AM UTC-4, Marc Tober wrote:
>
> Hi Daniel,
>
> thanks, you are right. I tried the conversion once but switched it back
> later and then forgot about it.
> It is a bit better now.
>
> I am now using:
> chart_bars.draw(data_bars, google.charts.Bar.convertOptions(options_bars));
>
> e.g.
> hAxis: {
> gridlines: {
> color:'red',
> count:10
> }
> }
>
> gives me some red lines now.
> What I am missing here is some kind of feedback (error message) when using
> wrong options.
> In the example above, I cannot use the count option, at least it does not
> make a difference, if I put down
> count:1 or count:5, all (vertical) gridlines are red, except for the x=0
> value, where it stays grey.
>
> Is there any kind of debug option there?
>
> Also I would like to get a frame around the chart and maybe some space
> between the frame and the chart itself.
> I thought to get this with options, but they do not change anything.
>
> chartArea: {
> left:20,
> top:20,
> width:'50%',
> height:'75%'
> }
>
> Here I try to get a frame, stroke seems to be ignored. Fill is working.
>
> backgroundColor: {
> stroke:'black',
> strokeWidth:4,
> fill:'white'
> },
>
> Here is the complete variable for the options:
>
> var options_bars = {
> width:900,
> height:525,
> bars:'vertical',
> legend: {
> position: 'none'
> },
> chart: {
> title: 'Ölverbrauch',
> subtitle: ' Stundengenaue Verteilung des Ölverbrauchs'
> },
> hAxis: {
> gridlines: {
> color:'red',
> count:2
> }
> },
> backgroundColor: {
> stroke:'black',
> strokeWidth:4,
> fill:'white'
> },
> chartArea: {
> left:20,
> top:20,
> width:'50%',
> height:'75%'
> }
> };
>
> Thanks for the wonderful work, I appreciate the APIs provided for free.
> Otherwise it would be impossible for me, to get this kind of quality on my
> personal homepage.
>
> Regards,
> Marc
>>
>>
--
You received this message because you are subscribed to the Google Groups
"Google Visualization 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-visualization-api.
For more options, visit https://groups.google.com/d/optout.
