Google charts legend manipulation

Question

Using google area chart: http://code.google.com/apis/chart/interactive/docs/gallery/areachart.html

Does anyone know how I can freelly manipulate the legends?

Pretty much I want one of two:

• Be able to freelly set each legend element somewhere.
• Set the legend that is displayed in one line to have multiple lines if the size of the legend exceeds the width of the legend area. (Prefered)

I would avoid hacks to manipulate the svg within the iframe btw.

Answer 1

For full control I'd suggest turning them off

legend : { position:"none"}

Creating your own totally customised legend outside the chart with html.

Then binding your custom legend up to the chart using the select event, combined with click or hover / focus events (whatever you want) on your custom legend.

see https://code.google.com/apis/ajax/playground/?type=visualization#interaction_using_events for a start.

Answer 2

There isn't a way to manipulate the legends as we wish. In the question of the bounty: You can use

in two of the charts

legend : 'none'

and also use colours to guarantee that all elements have the same colour.

colors:['red','#004411']

Other than that we can't manipulate them much more unfortunately :(

Answer 3

I am looking for any smarter solution than mine so I saw this question.

My current solution is to find html element that contains legend and manipulate with them as you would with your own custom html element. (You will have to deal with SVG elems here, though)

document.getElementById('pie-chart').getElementsByTagName('g')[0].setAttribute("style", "transform: translate(-130px)");

Answer 4

You can just manipulate the following code for the customization of your legends:

var options = {
    title: '',
    pieHole: 0.4,
    colors: ['#0590FB', '#1DE6A2', '#FEB11C', '#FF4863', '#5A479C'],
    legend : { position:"right", alignment:"center"},
    chartArea: { 
        left: 10, 
        top: 10, 
        width: '130%', 
        height: '65%'
    },
    tooltip: {
        trigger:'none'
    }

Answer 5

Maybe something like this (it's depends on the font that you use, you need fetch the proportion of your font)

var my_legend = "this is my legend x";

var len_legend = my_legend.length;

var width_graph = 400;

var chars_per_line = width_graph / [REPLACE_BY_PROPORTION]

if (len_legend > chars_per_line) {

    my_legend = wordwrap(my_legend, 20, '<br/>\n');

}

AND THE WRAP WORD FUNCTION (or anything like this)

function wordwrap( str, width, brk, cut ) {

    brk = brk || '\n';

    width = width || 75;

    cut = cut || false;

    if (!str) { return str; }

    var regex = '.{1,' +width+ '}(\\s|$)' + (cut ? '|.{' +width+ '}|.+$' : '|\\S+?(\\s|$)');


return str.match( RegExp(regex, 'g') ).join( brk );

}

SO FOR your code...

replace values at

var chart = new google.visualization.AreaChart(document....

etc

by your vars.

not use width = 400 , use width, and so on... and your string.