Googlecharts

From JRapid

Jump to: navigation, search

The Google Chart API lets you dynamically generate charts instead of the Listing's classic table view.

In this page you will learn how to add a Google Chart view and the common configuration for all the visualizations.

Contents

Available visualizations

The following links are the available visualizations, you can access the link to learn more about each visualization.

  • Area Chart An area chart that is rendered within the browser using SVG or VML. Displays tips when clicking on points. Animates lines when clicking on legend entries.
  • Bar Chart A horizontal bar chart that is rendered within the browser using SVG or VML. Displays tips when clicking on points. Animates lines when clicking on legend entries.
  • Column Chart A vertical bar chart that is rendered within the browser using SVG or VML. Displays tips when clicking on points. Animates lines when clicking on legend entries.
  • Gauge One or more gauges are rendered within the browser using SVG or VML.
  • Geo Map (also check Geomap in Wiki) A geomap is a map of a country, continent, or region map, with colors and values assigned to specific regions. Values are displayed as a color scale, and you can specify optional hovertext for regions. The map is rendered in the browser using an embedded Flash player. Note that the map is not scrollable or draggable, but can be configured to allow zooming.
  • Line Chart A line chart that is rendered within the browser using SVG or VML. Displays tips when clicking on points. Animates lines when clicking on legend entries.
  • Pie Chart A pie chart that is rendered within the browser using SVG or VML. Displays tips when clicking on slices. Animates slices when clicking on legend entries.
  • Scatter Chart A scatter chart that is rendered within the browser using SVG or VML. Displays tips when clicking on points. A scatter chart is used to map correlation between sets of numbers.
  • Table Chart A table that can be sorted and paged. Table cells can be formatted using format strings, or by directly inserting HTML as cell values. Numeric values are right-aligned; boolean values are displayed as check marks. Users can select single rows either with the keyboard or the mouse. Users can sort rows by clicking on column headers. The header row remains fixed as the user scrolls. The table fires a number of events corresponding to user interaction.
  • Bars Of Stuff Chart A bars chart made out of various objects (images). This chart displays only positive values. Negative values are ignored.
  • Piles Of Money Chart A column chart made out of money bills. The height of each money pile is relative to the value. This chart displays only positive values. Negative values are ignored.

How to ADD the GoogleCharts View

1. Open the IDE.

2. Click on the Community menu > Import View.

3. Select the "GoogleCharts" view and click on the "Import" link.

4. Generate code. (all layers)

To make sure that the view has been included check the application code of your project. Scroll to the <config> element and check the following code is included:

<app>
   ...
   <config>
        <usescript location="../jrapid-runtime/extras/view-googlecharts/googlecharts.js"/>
        <useview name="googlecharts">
            <usescript location="../jrapid-runtime/extras/view-googlecharts/googlecharts.js"/>
        </useview>
   </config>
   ...
</app>

You can also check the view has been included by clicking on the Project Configuration button in the entities panel and check that the googlecharts.js script file has been included:

Project Configuration

How to USE the GoogleCharts View

To use the GoogleCharts View create or open an existing Listing and select the "googlecharts" view. You can also go the the application code and specify the "view" attributes to "googlecharts".

Editing Listing Window
Important: Data inside visualizations is divided into columns (or axis). You should tell the view which property value will be used as
the x-axis (itemname attribute) and which property value will be used as the y-axis (itemvalue attribute). See examples below.

Finally, to switch the visualization of the view specify the "visualization" attribute.

Usage

<listing
         name=NAME 
         view="googlecharts"
         visualization="areachart|geomap|barchart|columnchart|linechart|piechart|table|gauge|scatterchart|barsofstuff|pilesofmoney"
         itemname=ITEMNAME 
         itemvalue=ITEMVALUE
         options=ARRAY_OF_OPTIONS
/>
  • name (required): The name of the listing.
  • view (required): The name of the view for the listing.
  • visualization: The name of the googlecharts visualization.
  • itemname (required): a reference to a property which will work as the X-AXIS of the chart.
  • itemvalue (required): a reference to a property which will work as the Y-AXIS of the chart.
  • options: options for the visualization. an array of type {optionName:value,...,optionName1:}. Each visualization has it's own API. If no specified, a default array of options is applied.

Important !

You must include Google's jsapi (JavaScript API) file in your project to get the view running.

<config>
  ...
  <usescript location="http://www.google.com/jsapi"/>
  ...
</config>

How to CONFIGURE visualizations:

Each visualization has each own configuartion options like width, height, legend (top, right, ...), title. You can specify none, one or all the configuartions options of a visualization in the "options" attribute of the listing.

The "options" attribute is an array of format options="{optionName:optionValue,...,optionName:optionValue}".

Configuaration options are available in the visualizations pages (see list above).

Example: Bars Of Stuff configuration.

Go to http://visapi-gadgets.googlecode.com/svn/trunk/barsofstuff/doc.html) and scroll to the "Options" table. The "type" option specifies the image to be displayed in the chart (Can be: 'Train' (default), 'Chocolate', 'Rope', 'Truffle', 'Worm', 'Horse'). If no type option is specified then the 'Train' value is applied. To display cholocates or truffels in your listing you should code the following in your Listing:

<listing name="myListing" view="googlecharts" visualization="barsofstuff" options="{type:'Horse'}" />  
Horses

More options configuration examples:

<listing itemname="name" itemvalue="population" name="basicListing" options="{region:'AR'}" view="googlecharts" visualization="geomap"/>

<listing itemname="name" itemvalue="population" name="gaugeListing" view="googlecharts" visualization="gauge" 
options="{width:400, height:280, title:'A nice gauge listing'}"/>

<listing itemname="name" itemvalue="population" name="barchartListing" view="googlecharts" visualization="barchart" options="{is3D:false}"/>

Geomap visualization example:

The "Sale" entity stores records (region, value) of the sales quantity of a company around the world. The nicest way to present this information is using the geomap view which displays (string, integer) values.

The "geomapListing" specifies that the x-axis (itemname attribute) will be the "region" property and the y-axis (itemvalue attribute) will be the "value" property.

<entity label="Sale" name="Sale">
        <listing itemname="region" itemvalue="value" name="geomapListing" view="googlecharts" visualization="geomap"/>
        <property display="primary" label="Region" name="region" type="string"/>
        <property display="secondary" label="Value" name="value" type="integer"/>
</entity>
GeoMap view

To learn more about Geomap Chart go the the Geomap Chart page.

Scatter Chart visualization;

The "WeightRecord" entity stores weight records (person, age, weight). An interesting way to display this information is to use the Scatter Chart visualization which is used to display (integer, integer) values.

The "scatterchartListing" specifies that the x-axis (itemname attribute) will be the "age" property and the y-axis (itemvalue attribute) will be the "weight" property.

In this example, a Filter is added so as to filter only show the records of a specified Person. When a Person is selected an AJAX call to the database is triggered and the chart is redrawn with the updated data.

<entity label="WeightRecord" name="WeightRecord">
        <listing itemname="age" itemvalue="weight" name="scatterchartListing" view="googlecharts" visualization="scatterchart"/>
        <property entity="Person" label="Person" name="person" display="secondary"/>
        <property display="primary" label="Age" name="age" type="integer"/>
        <property display="secondary" label="Weight" name="weight" type="integer"/>
        <filter display="primary" label="Person" name="person" property="person"/>
</entity>
<entity label="Person" name="Person">
        <property display="primary" label="Name" name="name"/>
</entity>

All records:

All the records

Records for "German":

Records for "German"

History and updates:

05/02/2010 - Release!

10/02/2010 - "options" attribute added. Now all the visualizations can be fully configured.

11/02/2010 - xsl and js files refactorized. warnings eliminated.

11/02/2010 - warnings eliminated.

11/02/2010 - Piles of money and Bars of Stuff Charts added.

See also

Personal tools