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.

unfortunately you can't manipulate the legends inside the SVG :( at most in your case you can disable them — fmsf, Dec 05 '11 at 15:37

score 16 · Answer 1 · answered Nov 30 '12 at 06:03

16

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.

answered Nov 30 '12 at 06:03

MemeDeveloper

6,457
2
42
58

2

I have just submitted a feature request for this https://code.google.com/p/google-visualization-api-issues/issues/detail?id=1943&thanks=1943&ts=1427969500 – Martin Joiner Apr 02 '15 at 10:20
@MartinJoiner not sure that link is correct, looks like and empty github project - am I missing something? – MemeDeveloper Aug 20 '15 at 04:25
It seems that since I posted that link, Google Visualization have decided to track change requests and bug reports in GIT Hub. I would provide an updated direct link here but my ticket is buried somewhere in a list of 1,537 tickets at time of writing. – Martin Joiner Sep 21 '15 at 16:39

score 6 · Accepted Answer · answered Dec 07 '11 at 07:07

6

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 :(

answered Dec 07 '11 at 07:07

fmsf

36,317
49
147
195

see my answer http://stackoverflow.com/a/13639884/661584 pls, the alternative is to create them entirely ourselves with html . jscript / json etc as we like. Full control. – MemeDeveloper May 13 '15 at 10:59
Actually there are ways to customize the legends, here is one of the many examples: http://codepen.io/panchalkalpesh/pen/bgebwQ – Kalpesh Panchal Jan 13 '17 at 00:30

score 0 · Answer 3 · answered Feb 09 '17 at 09:25

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

score 0 · Answer 4 · edited Mar 06 '16 at 07:27

0

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.

edited Mar 06 '16 at 07:27

Mosh Feu

28,354
16
88
135

answered Dec 02 '11 at 20:43

Leandro Bardelli

10,561
15
79
116

sorry by the quotes, as javascript i cant do the syntax lighter... check this out with my idea: http://james.padolsey.com/javascript/wordwrap-for-javascript/ – Leandro Bardelli Dec 02 '11 at 20:44
This doesn't make sense? How does this relate to the chart? – Nix Dec 03 '11 at 19:40
yo do it when you -make- the chart. Please paste the code generation of your chart – Leandro Bardelli Dec 05 '11 at 12:44
Can you show me an example where this is plugged in with 2 charts? – Nix Dec 05 '11 at 14:11
in the link that you use, there's the javascript code where there are the vars to update like i said – Leandro Bardelli Dec 05 '11 at 14:48

Google charts legend manipulation

4 Answers4

Linked