With WebMaker v3.1.2 the standard palette on the Page Structure screen introduced a 'Composite' control that allows simple charts to be created. The control contains three core elements:
Chart Data Table
The first step is to define the repeating data that is required for the 'ChartDataTable'. This data can be dragged on from the 'Data Source' section on the right hand side of the Page Structure screen.
It is important to ensure that the repeating data table columns are sensible for use with the chart. The chart control is effective at presenting simple sets of data, and basic comparisons of datasets. The repeating data in the 'ChartDataTable' needs the first column to identify the rows of data in some manner, and then the second or more columns are numeric values associated with some sort of categorisation. The numeric values could be amounts, currency values or percentage values.
Note: Sometimes it may be necessary to massage the data returned from an external source within the Controllers, in order that it is returned as a useful structure of data for the chart control.
In order to demonstrate the principle the Chart, the simplest approach is to include an example data structure into the controller proceeding the Form that renders the chart. There is an example project attached: [attachment=0]ChartControlExample_export_v3-1-2.zip[/attachment]
This project can be imported into WebMaker for inspection of the set-up of the various fields and associated parameters. The example project is only intended for reference of the usage of the chart control. The example shows the type of data that fits well with the chart types. It is a very simple project in order to clearly demonstrate the usage of the chart parameters and the data bindings required to render the four different types of chart.
Chart Initialisation
Once the data has been mapped #data bindings) for the 'ChartDataTable', the next step is to setup the parameters that will be used to control the rendering of the 'ChartDisplayGroup'. The Chart initialisation field has a script function call with some parameters that allow a number of basic settings to be altered. There are a number of other parameters that can be added to the list in a similar manner.
The chart initialisation field 'chart_init' must appear on the page after the 'ChartDataTable' as it is designed to process the repeating data table which is found directly prior to the control. The script call also references the name of the 'ChartDisplayGroup' that is used to render the graphical chart. This name can be changed to render to another group or location on the page. If there is more than one chart on the page then the name of the 'ChartDisplayGroup' will need to be changed to point to the appropriate Group.
Note: The full list of parameters can be found by accessing the 'visualize.jQuery.js' javascript file via the top of the 'Field Details' screen. Click on the javascript filename to pull up the file details.
Chart Display Group
It may be desirable for the 'ChartDisplayGroup' to be displayed while the supporting 'Chart DisplayTable' repeating data is hidden by default. The Chart controls can be moved into other controls such as the Collapsible Content control sections. The 'ChartDisplayGroup' could be moved into the 'collapsible' section, and the 'ChartDataTable' and Chart Initialisation can be moved into the 'collapsed' section.
Advanced considerations
The charts are part of an open source jquery project. The chart script has a number of predefined capabilities that can be explored in more detail by reviewing the javascript website:
Filament Group - JQuery Accessible Charts
There is also a fourum available for the open source code, that defines various extensions that the community has created:
http://code.google.com/p/dwpe/issues/list?q=label:Visualize
Troubleshooting
By default the scaling of the indexes is based on the range of data found in the 'ChartDataTable' It is sometimes necessary to control the relationship of the scale in order to create a more even scale. If this is the case it would be necessary to define a chart initialisation field 'chart_init' parameter value. The appropriate parameter required is the 'yLabelInterval' value, which is not defined by default. This value would need to be added as another parameter against the 'chart_init' script call list of parameters.
Other considerations that may be encountered include the ability to change the Top and Bottom 'y' index scale values, rather than basing it on the data values for the Chart Data Table. Please contact Hyfinity if this is required.
- Chart Data Table - This is the location of repeating data that will be used to render the chart[/*]
- Chart Initialisation - This is the control definition that sets the parameters for chart layout[/*]
- Chart Display Group - This is the area that the chart will be rendered within[/*]
Chart Data Table
The first step is to define the repeating data that is required for the 'ChartDataTable'. This data can be dragged on from the 'Data Source' section on the right hand side of the Page Structure screen.
It is important to ensure that the repeating data table columns are sensible for use with the chart. The chart control is effective at presenting simple sets of data, and basic comparisons of datasets. The repeating data in the 'ChartDataTable' needs the first column to identify the rows of data in some manner, and then the second or more columns are numeric values associated with some sort of categorisation. The numeric values could be amounts, currency values or percentage values.
Note: Sometimes it may be necessary to massage the data returned from an external source within the Controllers, in order that it is returned as a useful structure of data for the chart control.
In order to demonstrate the principle the Chart, the simplest approach is to include an example data structure into the controller proceeding the Form that renders the chart. There is an example project attached: [attachment=0]ChartControlExample_export_v3-1-2.zip[/attachment]
This project can be imported into WebMaker for inspection of the set-up of the various fields and associated parameters. The example project is only intended for reference of the usage of the chart control. The example shows the type of data that fits well with the chart types. It is a very simple project in order to clearly demonstrate the usage of the chart parameters and the data bindings required to render the four different types of chart.
Chart Initialisation
Once the data has been mapped #data bindings) for the 'ChartDataTable', the next step is to setup the parameters that will be used to control the rendering of the 'ChartDisplayGroup'. The Chart initialisation field has a script function call with some parameters that allow a number of basic settings to be altered. There are a number of other parameters that can be added to the list in a similar manner.
The chart initialisation field 'chart_init' must appear on the page after the 'ChartDataTable' as it is designed to process the repeating data table which is found directly prior to the control. The script call also references the name of the 'ChartDisplayGroup' that is used to render the graphical chart. This name can be changed to render to another group or location on the page. If there is more than one chart on the page then the name of the 'ChartDisplayGroup' will need to be changed to point to the appropriate Group.
Note: The full list of parameters can be found by accessing the 'visualize.jQuery.js' javascript file via the top of the 'Field Details' screen. Click on the javascript filename to pull up the file details.
Chart Display Group
It may be desirable for the 'ChartDisplayGroup' to be displayed while the supporting 'Chart DisplayTable' repeating data is hidden by default. The Chart controls can be moved into other controls such as the Collapsible Content control sections. The 'ChartDisplayGroup' could be moved into the 'collapsible' section, and the 'ChartDataTable' and Chart Initialisation can be moved into the 'collapsed' section.
Advanced considerations
The charts are part of an open source jquery project. The chart script has a number of predefined capabilities that can be explored in more detail by reviewing the javascript website:
Filament Group - JQuery Accessible Charts
There is also a fourum available for the open source code, that defines various extensions that the community has created:
http://code.google.com/p/dwpe/issues/list?q=label:Visualize
Troubleshooting
By default the scaling of the indexes is based on the range of data found in the 'ChartDataTable' It is sometimes necessary to control the relationship of the scale in order to create a more even scale. If this is the case it would be necessary to define a chart initialisation field 'chart_init' parameter value. The appropriate parameter required is the 'yLabelInterval' value, which is not defined by default. This value would need to be added as another parameter against the 'chart_init' script call list of parameters.
Other considerations that may be encountered include the ability to change the Top and Bottom 'y' index scale values, rather than basing it on the data values for the Chart Data Table. Please contact Hyfinity if this is required.
Attachment