CODEWITHSUNDEEP
jqueryhtmlsvggoogle-visualization
user1573618
user1573618

Reputation: 1816

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?

Upvotes: 4

Views: 6060

Answers (3)

user2755541
user2755541

Reputation: 546

You can do it through css:

svg:first-child > g > text[text-anchor~=middle]{
    font-size:9px;
}

Upvotes: 5

Raoni Sian
Raoni Sian

Reputation: 9

  /* for gauge indicators text */
  .gauge svg g text {
    font-size: 18px;
  }
  /* for middle text */
  .gauge svg g g text {
    font-size: 24px;
  }

Upvotes: 0

user1573618
user1573618

Reputation: 1816

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

Upvotes: 0

Related Questions