CSS elements as part of supported API

[NA]

Hi,

I've learned a lot on this group, especially from asgallant, about how
you can control presentation by manipulating the CSS styles associated
with the various visualization elements.

Is there a chance we could add CSS elements and classes to the GVIZ
API ?

I know some of the visualization element docs mention CSS tags that
can be assigned and properties that can be manipulated, but it'd be
helpful to see more complete lists. I envision a CSS section in each
visualization's documentation that lists all the styles, classes, and
ids generated for that visualization. Perhaps even having all of this
in a single location, too.

Making this part of the API doc means it's easier to know what's
possible, and it also makes them more reliable (since they become a
part of the documented API). That would increase confidence in any
such CSS manipulations we perform as well as improving our ability to
customize the look and feel.

thanks,

[asgallant]

Most of the visualizations aren't built in HTML, so there isn't any CSS to use on them.  Tables and Org Charts are the only ones I can think of off the top of my head that use HTML; and I believe both have styling information in their descriptions.

[NA]

You're right about the tables, and probably the org charts (I don't
use them). In fact, the tables have a really nice approach that lets
you assign classes so that you can style them to match your other
tables.

But the text fields in the other visualization elements seem to be
affected by CSS. For example, in a BarChart or Gauge, I can drill
down in Firebug to see text elements nested deeply inside an SVG tag.
They respond to styles, assuming you can get to them. I'd also like
to be able to activate/deactivate scroll bars when they appear around
the Tables, which I believe involves applying a style to one of the
containers generated by the visualizations.

It looks like the other components, such as the rectangles and
strokes, cannot be styled via css.

My initial motivation was finding a handle to the Gauge labels so that
they can be styled. I'd love to be able to make their text a little
bolder and larger, perhaps even give the numbers a glow that matches
the color where the needle lies.

So perhaps I'll amend this request to: Generate some stylesheet
handles that let users style the text in the visualizations as well as
the generated visualization containers.

Does that make sense?

[asgallant]

Well, therein lies the problem: the SVG charts are built inside iframes, and there is no way to style the contents of the iframe from the main page (absent injecting CSS into the iframe via JS).  Having unique handles for the different sub-elements would be handy for us chart hackers, but not particularly useful in general.  I think adding such controls via the chart options would be the more useful solution.