Logo Questions Linux Laravel Mysql Ubuntu Git Menu
HTML CSS JAVASCRIPT SQL PYTHON PHP BOOTSTRAP JAVA JQUERY R React Kotlin
 

Google charts legend manipulation

Tags:

javascript

jquery

google-visualization

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.

like image 543
fmsf Avatar asked Oct 18 '11 08:10

fmsf

People also ask

How do you change the width and height of a Google chart?

Specify Chart Size One very common option to set is the chart height and width. You can specify the chart size in two places: in the HTML of the container <div> element, or in the chart options. If you specify the size in both locations, the chart will generally defer to the size specified in the HTML.

How do I hide the legend in my Google chart?

The Legend is hidden by setting the legend property to none in the Google Chart Options. title: 'USA City Distribution', legend: 'none' // Hides the Legend.

Is Google charts deprecated?

While the dynamic and interactive Google Charts are actively maintained, we officially deprecated the static Google Image Charts way back in 2012. This gives us the right to turn it off without notice, which may happen soon.

1 Answers

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.

like image 97
MemeDeveloper Avatar answered Sep 20 '22 15:09

MemeDeveloper
Sign in to Comment

Related questions

React hook useCallback without dependencies
Is there a Scheduler/Calendar JS Widget library? [closed]
duplicating jQuery datepicker
How do I call Java code from JavaScript code in Wicket?
Please recommend a JQuery plugin that handles collision detection for draggable elements [closed]
JSONPath or other XPath like utility for JSON/Javascript; or Jquery JSON
How do I build a JSON object to send to an AJAX WebService?
Dual or triple (or even multiple) comparison in JavaScript
Will removing the type from a <script> tag break in any browsers?
Node.js base64 encode a downloaded image for use in data URI
conditional display of html element forms
javascript executing function after full image load [duplicate]
Is this a valid test to check if a URL refers to an Image in JS/jQuery
What are some of the problems of "Implied Global variables"?
Javascript performance with closure
Seeing HTML source changes after javascript has acted upon it, in Chrome
Draw good-looking Bezier Curve through random points
Expressing UTF-16 unicode characters in JavaScript
Javascript regex to accept only letters, spaces, and ñ
How do I change a filename on-download with javascript?

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!