user1573618 user1573618 - 1 year ago 188
HTML Question

Google Chart API - Set Gauge chart font size

I would like to be able to set the font size of a gauge chart created by the google chart api -

There does not seem to be an option in the API so I would like to be able to manipulate the SVG after the chart is drawn. I think this might be possible with the jQuery SVG plugin -

I am a little stuck on how to use the plugin to update the SVG after it is drawn. Using firebug I know the html looks like this after the chart is drawn.

<div id="chartArea">
//a couple of circles
<text></text> //The first text element is the title
//the rest of the graph

I would like to be able to write something like this:

$('#gaugeChartDiv #chartArea').svg('get').change('text:first', { 'font-size' : 8 } );

But it doesn't seem to work that way. Can anyone offer any advice?

Answer Source

Ok, so it turns out you can manipulate the SVG with jQuery without the plugin. The trouble was selecting the element within the iframe. I can update the font size using the following code.

$('#gaugeChartDiv iframe').each(function() {
    $('#chartArea svg text:first', this.contentWindow.document||this.contentDocument).attr('font-size', 8);
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download