Charting Alternatives in PxPlus -- Fusion, Google and RGraph Charts

From PxPlus

Jump to: navigation, search

PxPlus supports FusionCharts, FusionCharts Free, Google Interactive Charts (using the Google Visualization API) and RGraph Charts as options to replace the internal ProvideX chart control. These charts are interactive and animated with attractive displays, and expose events such as the mouse click. Most existing internal chart formats are supported (Area, Bar, Column, Line, Pie, and Stack) with additional formats (Scatter, Donut and Gauge) supported selectively. Most CHART directives are also supported, as are selected properties. This makes it possible to switch chart displays from the internal chart to one of the alternate chart options with little or no code changes. The alternate chart interfaces are designed to work in both Nomads and iNomads environments.


Nomads iNomads


Charts are defined using the Nomads chart definition interface in the Nomads Designer. The definition interface is same as for the standard internal chart, although some of the properties are not applicable. Chart types, properties and events are discussed in more detail below.

Once a chart is defined, the switch to an alternate chart display is relatively simple. When working in a Nomads environment, set your chart option by setting the global variable %Nomad_Chart$ to "fusioncharts", "fusionfree", "google" or "rgraph", e.g. %Nomad_Chart$="google". If working in an iNomads environment, invoke the System Administration (admin) and under Template Setting select a template and click on the Options button. On the Layout tab, select a chart option from the Charting Object dropbox.

FusionCharts

FusionCharts v3 are commercially-available animated Flash-based charts from InfoSoft Global. Because it is a commercial product, you must purchase and download the package from http://www.fusioncharts.com . To use these charts with pxplus, install the charts into a directory, then copy the .swf files from the Charts sub-directory and the FusionCharts.js file from the JSClass sub-directory into the pxplus *plus/inomads/add-ons/charts/fusioncharts directory. (This directory will then contain the existing chart.pvc file, the .swf files and the FusionCharts.js JavaScript file.) Then set your charting option to "fusioncharts".

FusionCharts Free

FusionCharts Free are free open-source Flash charts. The .swf files are part of the pxplus install, so all you have to do is set your charting option to "fusionfree". For more information on FusionFree, visit http://www.fusioncharts/free/

Google Interactive Charts

To use Google Interactive Charts, all that's required is access to the internet and setting your chart option to "google". At run-time, the PxPlus chart interface works in conjunction with your internet browser to request the Visualization API and chart packages from the Google website. All code and data are processed and rendered in the browser; security issues are addressed as no data is sent to any external server for processing. For information on the Google Visualization API and terms of use visit http://code.google.com/apis/visualization/interactive_charts.html and http://code.google.com/apis/visualization/terms.html

RGraph

RGraph is a HTML5 canvas graph library. The required files are part of the pxplus install, so all you have to do is set your charting option to "rgraph". For more information on RGraph, visit http://www.rgraph.net


Note: The chart control is a ProvideX add-on package available stand-alone or as part of the Professional or eCommerce bundles.


Contents

Chart Formats

Format FusionCharts Free Google RGraph Description
Area Chart Not Available Displays a series as a set of points connected by a line, with all the area filled in below the line.

Available in 2D only. Not available in RGraph which substitutes the line chart.

Bar Chart A graph consisting of parallel horizontal bars or rectangles, each of which represents the value of one item of data . Available in 2D and 3D, except for FusionCharts Free and RGraph which has 2D only.
Column Chart A graph consisting of parallel vertical bars or rectangles, each of which represents the value of one item of data. Available in 2D and 3D.
Donut Chart Not Available A circular chart with a hole in the center, divided into slices proportional to the percentages of the whole. Available in 2D and 3D in FusionCharts and RGraph, and 2D in FusionCharts Free. The Pie chart is substituted in Google Interactive Charts.
Gauge Not Available Each numeric value is displayed as a gauge. Google Interactive Charts and RGraph only. The Google gauge can show multiple values by displaying multiple gauges, but RGraph shows only one gauge. FusionCharts and FusionCharts Free use the default chart format (i.e. Column).
Line Chart Displays a series as a set of data points connected by a line. Available in 2D only, except for RGraph which also supports a 3D version.
Pie Chart A circular chart divided into triangular areas proportional to the percentages of the whole. Available in 2D and 3D.
Scatter Chart Not Available Also known as an XY chart, plots sets of Cartesian coordinates. (Each data set consists of x and y value pairs.) Available in Google Interactive Charts, FusionCharts and RGraph in 2D.
Stack Chart A column chart whose data values are stacked (accumulated). Available in 2D and 3D.


Chart Format/Type availability:


Format PVX Internal FusionCharts FusionCharts Free Google Interactive RGraph
Area 2D 2D 2D 2D --
Bar 2D, 3D 2D. 3D 2D 2D, 3D 2D
Column 2D, 3D 2D, 3D 2D, 3D 2D, 3D 2D, 3D
Donut -- 2D, 3D 2D -- 2D, 3D
Gauge -- -- -- 2D 2D
Line 2D, 3D 2D 2D 2D 2D, 3D
Pie 2D, 3D 2D, 3D 2D, 3D 2D, 3D 2D, 3D
Ribbon 2D, 3D -- -- -- --
Scatter 2D, 3D 2D -- 2D 2D
Stack 2D, 3D 2D, 3D 2D, 3D 2D, 3D 2D, 3D


Where not available, Ribbon charts are displayed as Line charts with no dots marking the points, Donuts are displayed as Pies, and 3D versions of Line, Area and Scatter charts map to the corresponding 2D version. The Gauge maps to the default chart format.

Properties and Methods

The alternate chart interfaces support the following common control properties:

  • BackColor$
  • Col
  • Cols
  • CtlName$
  • Enabled
  • Fmt$ *
  • Height
  • Left
  • Line
  • Lines
  • Sep$
  • SepLoad$
  • TextColor$
  • Top
  • Visible
  • Width
  • _PropList$
  • _PropSep$
  • _PropValues$

Besides the standard chart formats (Area, Bar, Column, Line, Pie, Ribbon, Scatter and Stack), two additional formats are available: Donut for Fusion and the Google Gauge. It is also possible to specify the name of the .swf file for the fmt$ property for FusionCharts (e.g. ScrollColumn2D), however, not all formats are supported.

The following chart-specific properties are also supported:

  • CurrentPoint
  • CurrentSet
  • LegendLocation$
  • NumPoints
  • NumSets
  • RangeMax
  • RangeMin
  • SelectIndex
  • Title1$
  • Title2$
  • xAxisTitle$
  • yAxisTitle$

The following additional properties are also supported:

Property Chart Type Description
SelectPoint All Sequence number of the selected point.
FontColor1$, FontColour1$ All Google - Colour of all text except the key legend.

Fusion - Colour of all text on the canvas behind the chart. RGraph - Colour of the main title.

FontColor2$, FontColour2$ All Google - Colour of the text in the key legend.

Fusion - Colour of text outside the chart canvas. RGraph - Colour of all text except the main title.

Currency Fusion

RGraph

Indicates whether or not to display currency symbols.

0 = No currency symbol 1 = Display currency symbol in front of number. -1 = Display currency symbol after number.

DecimalPrecision Fusion Number of digits to display after the decimal point. Default is 2.
DisplayFormat$ Fusion PVX numeric format string.
FormatNumberScale Fusion Boolean value indicating whether to display numbers with formatted scale (e.g. 4.5K or 1.2M) or as full numbers (e.g. 45,000 or 1,200,000). Default is to use a formatted scale (1).
EnableTooltip Google

RGraph

If on (1), tooltips are shown when the user clicks on a chart segment. Boolean (0/1). Default is 1.

RGraph - iNomads only, use only with non-IE browsers.

greenFrom Google Numeric value where the gauge green zone begins. Gauge only.
greenTo Google

RGraph

Numeric value where the gauge green zone ends. Gauge only.

On RGraph gauges, this also denotes the beginning of the yellow zone.

majorTicks$ Google String of labels for the major tick marks on the gauge. The last character of the string is used as the label separator. Gauge only.
minorTicks Google Number of tick marks between each major tick. Default is 2. Gauge only.
redFrom Google

RGraph

Numeric value where the gauge red zone begins. Gauge only.

On RGraph gauges, this also denotes the end of the yellow zone.

redTo Google Numeric value where the gauge red zone ends. Gauge only.
yellowFrom

yellowTo

Google Numeric range for gauge yellow zone. Gauge only.

Properties which are not supported are available as dummy properties; they may be accessed but do not perform any function.

The following methods are available:

Method Description
getOptions$() Returns a string consisting of the additional options that have been set using the setOption() method. The format of the string will vary depending on the type of chart used.
setOption(op$,val$) Set additonal chart options specific to a particular chart. For Fusion charts, these are the options set in the <graph> tag of the JavaScript. For Google charts, these are the options set using the draw() method. For RGraph charts, these options are the properties set using the Set() method. See the appropriate API documentation for options and their possible values. Note that options are case sensitive.

Events

The Select (click) event is fired when the user clicks a graph segment. When a point, bar or pie slice is clicked, the chart's SelectIndex property is set with the dataset number, the SelectPoint property is set with the point number and an OnChange event is fired.

CHART Directives

All chart directives are supported except the CHART creation directive and CHART REMOVE.


Colors

The colors used to display individual data sets within a chart can be controlled in several ways. They can be specified in the chart definition presets, programmed using the 'CurrentSet and 'BackColor$ properties, defined in a template file, or specified in the %Nomad_Chart_Colors$ global variable (Nomads only).

Presets Colours of individual data sets can be defined in the chart definition Presets by setting the Data Set number and the TextColour property. (This is the only Preset property supported by the Google chart interface.)
Program Programmatically set the data set colors by setting the 'CurrentSet property to the data set number and setting the 'TextColour$ property to the desired color.
Template File The template file is a text file consisting of a list of colors (one per line). The file name must be chart_clrs.txt and be located in a subdirectory of *plus/inomads/templates. For example, the default colors used for the Google charts are defined in *plus/inomads/templates/default/chart_clrs.txt. To create an alternative color selection, create a chart_clrs.txt file and place it in a subdirectory of the templates directory, e.g. *plus/inomads/templates/mytemplate/chart_clrs.txt. Then set the global variable %iNomads_Template$ with the name of the subdirectory, in this case %iNomads_Template$="mytemplate" . This method is valid for both iNomads and Nomads environments.
Nomads Global Variable Create a string consisting of color names (the last character in the string will be used as the separator) and assign it to the global variable %Nomad_Chart_Colors$. For example, 
%Nomad_Chart_Colors$="light red/light blue/dark green/yellow/RGB:192 255 192/"

(Nomads only)

Colors can be specified using standard ProvideX color names (e.g. Light Red, Dark Blue, etc.), user-defined colors (e.g. COLOR16), and RGB settings (e.g. RGB:192 255 192). If there are more data sets than colors, the colors will be repeated. Color precedence is:

  1. Programmed colors
  2. Preset colors
  3. Colors specified in the %Nomad_Chart_Colors$ variable
  4. Template colors
Retrieved from "http://wiki.pvxplus.com/index.php/Charting_Alternatives_in_PxPlus_--_Fusion,_Google_and_RGraph_Charts"
Personal tools