Google Charts

Lucid has an Action available to easily insert a Google Chart onto your page. Before you start with Google Charts, you should go into the Setup sheet, and insert the two 'Google Charts' script entries from the gear menu. The first entry is an insertion of the Google JSAPI, which in turn allows the the second entry to work, which loads in the Google Visualization (Charting) API. Some charts require other modules to be loaded other than the ones that Lucid brings in (corechart, geochart, gauge), and these have been left out to decrease bandwidth use. You may also remove 'geochart' or 'gauge', if you are not going to use these types of chart to further improve speed.

Once you have inserted the script header, you can put a Google Chart action into your Javascript from the 'Google' popup. To get started, choose one of the defaults from the Gear menu, such as 'Simple Pie Chart'. Now, drag from the side of the chart action to a DIV on your HTML page to put the chart into that DIV. To make the action run, you will need to either call it from another action, or create an event which calls the Chart action. An ideal event is 'ready' attached to the document, so it will run when you document is considered ready for use by the browser.

What variable to use

In the Google Chart action, you may choose a variable to store a reference to the chart. This reference can be used elsewhere to modify the chart. For example, you may wish to update the contents of the chart from an AJAX call. If you want to do this, you should use a global variable, set up in the 'Setup' sheet. A global variable may be accessed from anywhere, so your AJAX code, or any code can easily access it. If your global variable was called 'mymap', you would simply enter mychart in the variable field. If you are not interested in modifying the chart from elsewhere, you may define a new variable, which will not be used anywhere, but should be created anyway. To do this, use var mychart which defines the new variable using 'var'. If you intend to pass the chart onto another action to be changed, then you may also use an event property. To use an event property enter event.mychart. This means that the function you call after the chart will be able to access the chart use the property 'mychart' in the event object, i.e. event.mychart.