user1573618 user1573618 - 4 months ago 26
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 - https://google-developers.appspot.com/chart/interactive/docs/gallery/gauge

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 - http://keith-wood.name/svg.html

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.

<iframe>
<html>
<head>...</head>
<body>
<div id="chartArea">
<svg>
<g>
//a couple of circles
<text></text> //The first text element is the title
//the rest of the graph
</g>
</svg>
</div>
</body>
</html>
</iframe>


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

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);
});