2017 October Release

jQuery ControlsPermanent link for this heading

Argument:

  • EnableHScroll (Boolean)
    The control will have a horizontal scrollbar if necessary.

FSCCALDAV@1.1001:ControlStdCalendarPermanent link for this heading

This control is used to visualize calendar items. The current implementation leverages the open source software FullCalendar (http://fullcalendar.io/)

This control supports the controloptions expression in the layout of a form page.

For example the control option string "defaultView: 'agendaDay'" will show the calendar in an agenda day view by default.

The next sample layout in app.ducx will display a time slot every 10 minutes and sets the scroll position to 8am: To achieve this, the control argument string "slotMinutes: 10, firstHour: 8" is passed to the constructor of the control:

Example

app.ducx User Interface Language

layout {
  row {
    FSCCALDAV@1.1001:ControlStdCalendar("slotMinutes: 10, firstHour: 8")
      MYSWC@200.300:mycalendar {
      ...
    }
  }
}

This sample layout sets the scroll position to the current hour. If the current time is later than 6pm then 8am is used instead. Since this option is dynamic it is calculated in a controloptions expression:

Example

app.ducx User Interface Language

layout {
  row {
    FSCCALDAV@1.1001:ControlStdCalendar MYSWC@200.300:mycalendar {
      rowspan = 2;
      colspan = 4;
      labelposition = top;
      controloptions = expression {
        integer @firsthour = coonow.hour > 18 ? 8 : coonow.hour;
        string @options = "slotMinutes: 10, firstHour: " + @firsthour;
        return @options;
      }
    }
  }
}

The control arguments and control options are automatically passed to the instance of the calendar control at the client side, so no further code in JavaScript is necessary. The control arguments and the control options can specify any documented option to the fullCalendar JavaScript object.

Example


$('#calendar').fullCalendar({
  // your control arguments and control options are passed here automatically
})

For a complete documentation of all possible options see http://fullcalendar.io/docs/.

In addition this control supports the control option “enlargePosterWidget”. If this option is set to true, the control will get additional space in the dashboard when it is shown in a poster widget. Only the first widget in the dashboard can be a poster widget. Moreover the property formpageisposterwidget must be set to true.

Example

  private form ExploreFormVCalendar {

    private formpage ExplorePageCalendar {

      formpageisposterwidget = true;

      symbol = SymbolCalendar;

      dataset {

        calendar;

      }

      layout {

        // Auto-generated layout block

        row {

          FSCCALDAV@1.1001:ControlStdCalendar FSCCALDAV@1.1001:calendar {

            colspan = 4;

            labelvisible = false;

            controloptions = expression {

              return { enlargePosterWidget: true };

            }

          }

        }

      }

    }

  …

  }

FSCDATATABLE@1.1001:ControlDataTablePermanent link for this heading

This control displays data as a data table and includes features for bar charting, vertical and horizontal grouping and subgrouping.

This control supports the controloptions expression in the layout of a form page.

controloptions = expression {
  "fscdatatableconfig: {param1: 'value1', param2: 'value2'}"
}

Possible parameters for fscdatatableconfig are described in the following list.

Parameter:

  • indexval (int)
    Defines the zero based index of the value in the dataset. Default is 4.
  • indexh (array)
    Defines the zero based index of the horizontal grouping values in the dataset. The first index in the array identifies the column group, the second index identifies the column name. Default is [0,1].
  • indexv (array)
    Defines the zero based index of the vertical grouping values in the dataset. The first index in the array identifies the row group, the second index identifies the row name. Default ist [2,3].
  • visibilityhorizontal (array)
    Defines which row group labels should be visible for the user. Each value in this array has to be Boolean. First value identifies the visibility of the row group label, second = row name. Default is [true, true], although the column group labels are only displayed if there is no data to display. Otherwise the column group labels aren’t displayed.
  • visibilityvertical (array)
    Defines which column group labels should be visible for the user. Each value in this array has to be Boolean. First value identifies the visibility of the column group label, second = column name. Default is [true, true], although the column group labels are only displayed if there is no data to display. Otherwise the row group labels aren’t displayed.
  • xaxis (string)
    Defines the text for the x-axis. Default is an empty string.
  • yaxis (string)
    Defines the text for the y-axis. Default is an empty string.
  • tablelabel (string)
    Defines the description text for the left upper corner of the table. Default is an empty string.
  • debug (Boolean)
    Activate or deactivate the debug mode. Default is false.
  • displaychart (Boolean)
    Activate or deactivate the rendering of charts. Default is true.
  • alternatecolorsubgroup (Boolean)
    Activate or deactivate the color alternating for subgroups. Default is true, but will be automatically false if group columns exist.

First example:

Default behavior without configuration and no grouping data defined in the dataset.

Required data format:

The incoming dataset should be a dictionary that contains at least the following data and order to work with the default configuration of the control:

expression {
  DataTableList[] @tableentries = [];

  @tableentries += {
    dtrowname = "row 1",
    dtcolname = "col 1",
    dtvalue = 1
  };

  @tableentries += {
    dtrowname = "row 2",
    dtcolname = "col 1",
    dtvalue = 2
  };

  @tableentries += {
    dtrowname = "row 3",
    dtcolname = "col 1",
    dtvalue = 3
  };

  @tableentries += {
    dtrowname = "row 1",
    dtcolname = "col 2",
    dtvalue = 4
  };

  @tableentries += {
    dtrowname = "row 2",
    dtcolname = "col 2",
    dtvalue = 5
  };

  @tableentries += {
    dtrowname = "row 3",
    dtcolname = "col 2",
    dtvalue = 6
  };

  return @tableentries;
}

Result:

Second example:

Advanced configuration to meet special purposes.

Required Data:

If you have multiple groups for both columns and rows you can specify them in your dictionary:

expression {
  DataTableList[] @tableentries = null;

  @tableentries += {
    dtrowgroupname = "rowgroup 1",
    dtrowname = "row 1",
    dtcolgroupname = "colgroup 1",
    dtcolname = "col 1",
    dtvalue = 1
  };

  // … further data …  

  return @tableentries;
}

Control Configuration:

controloptions = expression {
  "fscdatatableconfig: {" +
    "xaxis: \"X-Axis Text\"," +
    "yaxis: \"Y-Axis Text\"," +
    "tablelabel: \"Table Label\"," +  
    "debug: true,"  
    "alternatecolorsubgroup: false" +
  "}"
}

Result:

Debug mode is enabled so you can see the debug output in the console:

Special fields:

Vertical Bar Chart
For displaying a vertical bar chart it is possible to use so called special fields. In this case the row in the dataset should like the following:

expression {
  DataTableList[] @tableentries = [];

  @tableentries += {
    dtrowgroupname = "rowgroup 1",
    dtrowname = "row 1",
    dtcolgroupname = "<V>", // special field identifier
    dtcolname = "Unit Name", // string
    dtvalue = 1
  };

  // … further data …  

  return @tableentries;
}

FSCGOOGLEVISUALS@1.1001:ControlStdVisualPermanent link for this heading

This control is used to display graphics with help of the Google Charts library. See https://developers.google.com/chart/ for details.

An object of object class Visual (FSCGOOGLEVISUALS@1.1001:Visual) or Package (FSCGOOGLEVISUALS@1.1001:Package) is required as argument.

If additional parameters are required, use either a Visual instead of a Package, or specify the additional parameters as arguments to the control.

Argument:

  • EnableHScroll (Boolean)
    The control will have a horizontal scrollbar if necessary.

Example:

  • MYCOMP@x.y:IntensityMapVisual
    In this case the visual MYCOMP@x.y:IntensityMapVisual defined in the software component MYCOMP@x.y is provided as argument.
  • FSCGOOGLEVISUALS@1.1001:AnnotatedTimeLine
    In this case the standard package FSCGOOGLEVISUALS@1.1001:AnnotatedTimeLine is provided as argument.

In addition to the visual or package specified, parameters can follow, separated by blanks:

package=FSCGOOGLEVISUALS@1.1001:AnnotatedTimeLine width=xxx height=yyy

Additional parameters can also be specified in JavaScript notation like width:xxx height:yyy

For each property only one set of arguments is supported. If you want to influence the behavior and appearance of a visual more dynamically, you can use the controloptions expression, where you can provide parameters for the visual as a JSON string. Typically you create a dictionary with the parameters and invoke FSCEXPREXT@1.1001:Value2JSON with the dictionary as parameter to get a JSON string. IT is also possible to just return a dictionary. In that case the JSON string is generated implicitly.

The control visualizes an aggregate list that is provided by the property or field in the layout of a form page. The values of the aggregate list are converted to a Google data table in the following form:

  • In the first row, the display names of the member of the aggregate are generated.
  • In the following rows a column value for each member of the aggregate is generated.

Example

app.ducx Object Model Language

  /**

   * Type for transferring values to the velocity chart

   */

  struct VelocityValuesType {

    objname;

    integer socommitment;

    integer sodone;

    integer sovelocity;

  }

Given that the display name for socommitment is “Commitment”, for sodone “Done”, and for sovelocity “Velocity”, the following Google data table is generated automatically by the control (for 3 sprints in this example):

Example


  [["Name", "Commitment", "Done", "Velocity"],

   ["Sprint 1", 23, 20, 20],

   ["Sprint 2", 24, 24, 24],

   ["Sprint 3", 18, 20, 16]]

If you specify a line chart (https://developers.google.com/chart/interactive/docs/gallery/linechart) with this sample data, you will get the following visualization:

It is possible to supply formatted values and/or additional parameters for each data cell in the Google data table by defining a structure with the property holding the actual data in the first member of the aggregate. The second member in the aggregate must be FSCGOOGLEVISUALS@1.1001:formattedvalue and the third FSCGOOGLEVISUALS@1.1001:params. If only a formatted value is required, FSCGOOGLEVISUALS@1.1001:params can be omitted and vice versa.

Example

app.ducx Object Model Language

  /**

   * Type for formatting the first column in the velocity chart

   */

  struct NameFormatType {

    integer id;

    formattedvalue;

    params;

  }  /**

   * Type for transferring values to the velocity chart

   */

  struct VelocityValuesType {

    NameFormatType name;

    integer socommitment;

    integer sodone;

    integer sovelocity;

  }

The code that generates the aggregate list to be fed to the Google chart can now enhance the different members to provide additional formatting and behavior.

Example


  [["Name", "Commitment", "Done", "Velocity"],

   [{v:1, f:"<a href=...>Sprint 1</a>", p:{...}}, 23, 20, 20],

   [{v:2, f:"<a href=...>Sprint 2</a>", p:{...}}, 24, 24, 24],

   [{v:3, f:"<a href=...>Sprint 3</a>", p:{...}}, 18, 20, 16]]

The first property in the aggregate is transferred to the "v" value in the JSON object, FSCGOOGLEVISUALS@1.1001:formattedvalue to the "f" value, and FSCGOOGLEVISUALS@1.1001:params to the "p" value. Since FSCGOOGLEVISUALS@1.1001:params is a list of type FSCGOOGLEVISUALS@1.1001:Parameter, you can specify a list of parameters as key/value pairs that are converted to a JSON object where FSCGOOGLEVISUALS@1.1001:key will become a member name of the JSON object and FSCGOOGLEVISUALS@1.1001:value the corresponding value.

This mechanism only works with Google charts supporting formatted values and/or parameters in the cells of the Google data table.

This control supports the controloptions expression in the layout of a form page.

FSCNEWSFEED@1.1001:CTRLNewsFeedPermanent link for this heading

This control is used to keep your team members up to date with the latest news (stories).

A user creates a newsfeed in the Teamroom. Any user who possesses access rights to the Teamroom can create news and comment existing entries. Users with full control can remove any notification. Furthermore, any user can remove his created news or comments.

Argument:

  • numberoffeeds (integer)
    Defines the number of preliminary shown news. Default is 10.
  • numberofcomments (integer)
    Defines the number of preliminary shown comments. Default is 2.
  • maxchars (integer)
    Defines the maximum message length. Default is 2000.

FSCTEXTEDITOR@1.1001:CTRLTextEditorPermanent link for this heading

This control is used to edit and display formatted text. The current implementation leverages the open source software CKEditor (http://ckeditor.com/)

This control supports the controloptions expression in the layout of a form page.

Possible control options are:

  • toolbarGroups (string)
    Defines which button groups are available to edit the text. Multiple values are separated with “,”.
    Currently available values are:
    • clipboard
    • basicstyles
    • paragraph
  • toolbarGroups (array)
    Defines which button groups are available to edit the text. This parameter is passed through to CKEditor.
    [{ name: "/" }] acts as a line break.
    http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-toolbarGroups
  • removeButtons (string)
    List of toolbar button names that must not be rendered. Multiple values are separated with “,”.
    http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-removeButtons
    Currently available values are:
    • clipboard
      • Undo
      • Redo
    • basicstyles
      • Bold
      • Italic
      • Underline
      • Strike
      • Subscript
      • Superscript
      • RemoveFormat
    • paragraph
      • NumberedList
      • BulletedList
      • Outdent
      • Indent
      • JustifyLeft
      • JustifyCenter
      • JustifyRight
      • JustifyBlock
  • allowedContent (string)
    Allowed content rules. Default is defined by the available tools in the toolbar.
    The value
    "all" defines all valid HTML. It is possible to reduce the possibilities with disallowedContent.
    http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-allowedContent
  • extraAllowedContent (string)
    This option makes it possible to set additional allowed content rules.
    http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-extraAllowedContent
  • disallowedContent (string)
    Disallowed content rules. They have precedence over allowed content rules.
    Default for read only mode is "iframe; style; script; *[on*]".
    http://docs.ckeditor.com/#!/api/CKEDITOR.config-cfg-disallowedContent
  • width (string)
    Defines the width of the editor area. Default is 100%. If the content exceeds the width of the editor area scrollbars are shown.
  • height (string)
    Defines the height of the editor area. Default height is defined by the content. If the content exceeds the height of the editor area scrollbars are shown.

Example

app.ducx User Interface Language

layout {
  row {
    FSCTEXTEDITOR@1.1001:CTRLTextEditor MYSWC@200.300:myeditor {
      rowspan = 2;
      colspan = 4;
      labelposition = top;
      controloptions = expression {

        dictionary dict = {
          toolbarGroups: "basicstyles,paragraph",
          // allow headings and links
          extraAllowedContent: "h1; h2; h3; h4; a",
          height: "10em"
        };

        return dict;
      }
    }
  }

  row {

  }
}

FSCHIGHCHARTS@1.1001:CTRLHighchartsPermanent link for this heading

This control is used to visualize data using the Highcharts control library (http://www.highcharts.com).

The information that should be visualized is provided by an aggregate list.

The first member of an aggregate in that aggregate list defines the name and behavior of the x axis for visualization.

  1. If the first member is an integer, a float, or a datetime, the values of this member determine the position of the other members on the x axis.
  2. If the first member is a string, an enumeration, or an object, the values of this member determine discrete categories on the x axis.
  3. If the aggregate has only one (scalar) member, the values of this member are used as values for the chart.
  4. If the first (and only) member is an aggregate, then the members of the sub-aggregates determine the values for the chart in multiple dimensions. Each member in the sub-aggregate corresponds to one dimension.

When using rule 1 or rule 2, the series data for the chart can be provided in two ways:

  • If a remaining member of the aggregate is of type integer, float, or datetime, the name of the member is used as the name of the series and the value of the member is the data point in the series.
  • If a remaining member of the aggregate is a sub-aggregate list, then the first member of that sub-aggregate describes the name of the series, and the second member contains the data point. The name of the series is only taken from the first entry, the first member of the sub-aggregate is ignored for subsequent entries. Therefore, the order of the sub-aggregate list in such a member must be the same for all values.

The type of the chart and additional options of the chart are supplied via the controloptions expression. The list of all possible options are available via http://api.highcharts.com/highcharts.

The following example generates a standard line chart using an aggregate list. The first member (hcday) defines the values on the x axis.

Example

app.ducx Object Model Language

  struct HighchartsTemperature {

    datetime hcday;

    float hctemplinz;

    float hctempvienna;

    float hctempsalzburg;

    float hctempbregenz;

  }

  fields {

    HighchartsTemperature[] hctemperature;

  }

The following example fills the data for the sample using the aggregate list:

Example

app.ducx User Interface Language

    formpage PageHighchartsTemperature {

      formpageisposterwidget = true;

      dataset {

        field hctemperature {

          get = expression {

            boolean ::isdashboard;

            HighchartsTemperature[] hctemperaturevalue = [];

            datetime date = coonow - 365 * 86400;

            integer increment = (::isdashboard ? 14 : 1);

            for (integer i = 0; i < 365; i += increment) {

              hctemperaturevalue += {

                hcday: date,

                hctemplinz: ...,

                hctempvienna: ...,

                hctempsalzburg: ...,

                hctempbregenz: ...

              };

              date += increment * 86400;

            }

            return hctemperaturevalue;

          }

        }

      }

      layout {

        row {

          CTRLHighcharts hctemperature {

            colspan = 4;

            labelvisible = false;

            controloptions = expression {

              return {

                chart: {

                  type: "line",

                  zoomType: "x"

                },

                legend: {

                  enabled: true

                },

                plotOptions: {

                  line: {

                    marker: { enabled: false }

                  }

                },

                xAxis: {

                  title: { text: null }

                },

                yAxis: {

                  title: { text: null },

                  allowDecimals: true

                }

              }

            }

          }

        }

      }

    }

This chart looks similar to this in a dashboard – no markers are displayed on the series lines since they are disabled via the plotOptions. There is no text on the x or y axis but the legend is displayed on its default position. Also, less data is displayed.

In the explore view, more data is displayed – values on the y axis are also represented as decimal values since allowDecimals is true for that axis:

Since zoomType is specified, the user can drill down to the values over the x axis:

The next examples shows two different types of bar/column charts. The first part uses again hcdate for the x axis, the second part an enumeration to display different categories that correspond to different month names.

Example

app.ducx Object Model Language

  struct HighchartsFluctuation {

    datetime hcdate;

    float hcfluct;

  }

  struct HighchartsEntryLeave {

    MonthName monthname;

    integer hcentryamount;

    integer hcleaveamount;

  }

  fields {

    HighchartsFluctuation[] hcfluctuation;

    HighchartsEntryLeave[] hcentryleave;

  }

The type for the enumeration property is FSCVAPP@1.1001:MonthName

Example

app.ducx User Interface Language

    formpage PageHighchartsFluctuation {

      dataset {

        field hcfluctuation {

          get = expression {

            HighchartsFluctuation[] hcfluctationvalue = [];

            datetime date = 2014-01-01T00:00:00;

            for (integer i = 1; i <= 12; i++) {

              date.month = i;

              hcfluctationvalue += {

                hcdate: date,

                hcfluct: ...

              }

            }

            return hcfluctationvalue;

          }

        }

      }

      layout {

        row {

          CTRLHighcharts hcfluctuation {

            colspan = 4;

            labelvisible = false;

            controloptions = expression {

              boolean ::isdashboard;

              return {

                chart: {

                  type: "bar"

                },

                yAxis: {

                  allowDecimals: false

                },

                xAxis: {

                  /*

                   * show only short month names in a dashboard

                   * ignoring the settings in the user locale

                   */

                  dateTimeLabelFormats: {

                    month: ::isdashboard ? "%b" : "%B %Y"

                  }

                }

              }

            }

          }

        }

      }

    }

    formpage PageHighchartsEntryLeave {

      dataset {

        field hcentryleave {

          get = expression {

            HighchartsEntryLeave[] hcentryleavevalue = [];

            for (integer i = 1; i <= 12; i++) {

              hcentryleavevalue += {

                monthname: i,

                hcleaveamount: ...,

                hcentryamount: ...

              }

            }

            return hcentryleavevalue;

          }

        }

      }

      layout {

        row {

          CTRLHighcharts hcentryleave {

            colspan = 4;

            labelvisible = false;

            controloptions = expression {

              boolean ::isdashboard;

              return {

                chart: {

                  type: "column",

                  margin: ::isdashboard ? null: 100,

                  /*

                   * enable 3d if not in a dashboard

                   */

                  options3d: ::isdashboard ? null : {

                    enabled: true,

                    alpha: 10,

                    beta: 30,

                    depth: 250,

                    viewDistance: 5,

                    frame: {

                      bottom: { size: 1, color: 'rgba(0,0,0,0.02)' },

                      back: { size: 1, color: 'rgba(0,0,0,0.04)' },

                      side: { size: 1, color: 'rgba(0,0,0,0.06)' }

                    }

                  }

                },

                title: {

                  text: ::isdashboard ? "" : "Chart-Title"

                },

                yAxis: {

                  allowDecimals: false,

                  floor: 0,

                  ceiling: 24

                },

                xAxis: {

                  allowDecimals: false

                }

              }

            }

          }

        }

      }

    }

These charts look similar to this in a dashboard:

In the explore view, the second chart uses a 3D representation – there is also a specific chart title called "Chart-Title":

These two pie charts use values provided by the main aggregate or via a sub-aggregate:

Example

app.ducx Object Model Language

  struct HighchartsBrowserUsage1 {

    string hcbrowsername;

    float hcbrowserpercentage;

  }

  struct HighchartsBrowserUsage2Data {

    hcbrowsername;

    hcbrowserpercentage;

  }

  struct HighchartsBrowserUsage2 {

    HighchartsBrowserUsage2Data hcbrowserusagedata;

  }

  fields {

    HighchartsBrowserUsage1[] hcbrowserusage1;

    HighchartsBrowserUsage2[] hcbrowserusage2;

  }

Example

app.ducx User Interface Language

    formpage PageHighchartsBrowserUsage1 {

      dataset {

        field hcbrowserusage1 {

          get = expression {

            HighchartsBrowserUsage1[] hcbrowserusage1value = [

              {"Internet Explorer", 45},

              {"Firefox", 35},

              {"Chrome", 15},

              {"Safari", 5}

            ];

            return hcbrowserusage1value;

          }

        }

      }

      layout {

        row {

          CTRLHighcharts hcbrowserusage1 {

            colspan = 4;

            labelvisible = false;

            controloptions = expression {

              return {

                chart: {

                  type: "pie"

                }

              }

            }

          }

        }

      }

    }

    formpage PageHighchartsBrowserUsage2 {

      dataset {

        field hcbrowserusage2 {

          get = expression {

            HighchartsBrowserUsage2[] hcbrowserusage2value = [

              {{"Internet Explorer", 45}},

              {{"Firefox", 35}},

              {{"Chrome", 15}},

              {{"Safari", 5}}

            ];

            return hcbrowserusage2value;

          }

        }

      }

      layout {

        row {

          CTRLHighcharts hcbrowserusage2 {

            colspan = 4;

            labelvisible = false;

            controloptions = expression {

              return {

                chart: {

                  type: "pie"

                },

                plotOptions: {

                  pie: {

                    allowPointSelect: true,

                    cursor: 'pointer',

                    innerSize: '50%'

                  }

                }

              }

            }

          }

        }

      }

    }

These charts look similar to this in a dashboard:

In the second chart the user can select a segment of the pie:

You can override the standard colors of the current color scheme by setting the color option. It is recommended to use FSCVAPP@1.1001:GetDisplayEffectColors to calculate appropriate color values according to the current theme.

This sample uses different tints of blue:

Example

app.ducx User Interface Language

      layout {

        row {

          CTRLHighcharts hcbrowserusage1 {

            colspan = 4;

            labelvisible = false;

            controloptions = expression {

              return {

                colors: coouser.GetDisplayEffectColors(

                  DE_COLOR_BLUE, 0, 50, 4

                ),

                chart: {

                  type: "pie"

                }

              }

            }

          }

        }

      }

See reference documentation of FSCVAPP@1.1001:GetDisplayEffectColors for details.

The charts with tinted blue color values will look like this:

To visualize only one value in a gauge you can use a definition similar to the following:

Example

app.ducx Object Model Language

  struct HighchartsSpeed {

    integer hcspeeddata;

  }

  fields {

    HighchartsSpeed[] hcspeed;

  }

Example

app.ducx User Interface Language

    formpage PageHighchartsSpeed {

      dataset {

        field hcspeed {

          get = expression {

            HighchartsSpeed[] hcspeedvalue = [{12}];

            return hcspeedvalue;

          }

        }

      }

      layout {

        row {

          CTRLHighcharts hcspeed {

            colspan = 4;

            labelvisible = false;

            controloptions = expression {

              return {

                chart: {

                  type: "solidgauge"

                },

                yAxis: {

                  min: 0,

                  max: 20

                }

              }

            }

          }

        }

      }

    }

This chart looks similar to this in a dashboard:

The following charts visualize multi-dimensional data.

Example

app.ducx Object Model Language

  struct HighchartsXYZData {

    integer hcx;

    integer hcy;

    integer hcsize;

  }

  struct HighchartsBubbles {

    HighchartsXYZData hcbubblesdata;

  }

  struct Highcharts3dScatter {

    HighchartsXYZData hc3dscatterdata1;

    HighchartsXYZData hc3dscatterdata2;

    HighchartsXYZData hc3dscatterdata3;

  }

  fields {

    HighchartsBubbles[] hcbubbles;

    Highcharts3dScatter[] hc3dscatter;

  }

Example

app.ducx User Interface Language

    formpage PageHighchartsBubbles {

      dataset {

        field hcbubbles {

          get = expression {

            HighchartsBubbles[] hcbubblesvalue = [];

            for (integer i = 1; i <= 48; i++) {

              hcbubblesvalue += {

                hcbubblesdata: {

                  hcx: -50 + coouser.GetRandomNumber(100),

                  hcy: -10 + coouser.GetRandomNumber(20),

                  hcsize: 1 + coouser.GetRandomNumber(10)

                }

              };

            }

            return hcbubblesvalue;

          }

        }

      }

      layout {

        row {

          CTRLHighcharts hcbubbles {

            colspan = 4;

            labelvisible = false;

            controloptions = expression {

              return {

                chart: {

                  type: "bubble"

                }

              }

            }

          }

        }

      }

    }

    formpage PageHighcharts3dScatter {

      dataset {

        field hc3dscatter {

          get = expression {

            Highcharts3dScatter[] hc3dscattervalue = [];

            for (integer i = 1; i <= 48; i++) {

              hc3dscattervalue += {

                hc3dscatterdata1: {

                  hcx: ...,

                  hcy: ...,

                  hcsize: ...

                },

                hc3dscatterdata2: {

                  hcx: ...,

                  hcy: ...,

                  hcsize: ...

                },

                hc3dscatterdata3: {

                  hcx: ...,

                  hcy: ...,

                  hcsize: ...

                }

              };

            }

            return hc3dscattervalue;

          }

        }

      }

      layout {

        row {

          CTRLHighcharts hc3dscatter {

            colspan = 4;

            labelvisible = false;

            controloptions = expression {

              boolean ::isdashboard;

              return {

                chart: {

                  type: "scatter",

                  margin: ::isdashboard ? null: 100,

                  /*

                   * enable 3d if not in a dashboard

                   */

                  options3d: ::isdashboard ? null : {

                    enabled: true,

                    alpha: 10,

                    beta: 30,

                    depth: 250,

                    viewDistance: 5,

                    frame: {

                      bottom: { size: 1, color: 'rgba(0,0,0,0.02)' },

                      back: { size: 1, color: 'rgba(0,0,0,0.04)' },

                      side: { size: 1, color: 'rgba(0,0,0,0.06)' }

                    }

                  }

                },

                plotOptions: {

                  scatter: {

                    width: 10,

                    height: 10,

                    depth: 10

                  }

                },

                xAxis: {

                  min: 0,

                  max: 10,

                  gridLineWidth: 1

                },

                yAxis: {

                  min: 0,

                  max: 10,

                  title: null

                },

                zAxis: {

                  min: 0,

                  max: 10

                }

              }

            }

          }

        }

      }

    }

These charts look similar to this in a dashboard:

In the explore view, the second chart again uses a 3d representation:

Using the mouse, a 3d chart can be dragged to different view angles:

The following code defines the data model for dynamic series:

Example

app.ducx Object Model Language

  struct HighchartsBurndownSeries {

    string hcprojectname;

    integer hcburndownvalue;

  }

  struct HighchartsBurndown {

    hcdate;

    HighchartsBurndownSeries[] hcburndownseries;

  }

  fields {

    HighchartsBurndown[] hcburndown;

  }

The following code fills the data model with the burndown data of 5 projects:

Example

app.ducx User Interface Language

    formpage PageHighchartsBurndown {

      dataset {

        field hcburndown {

          get = expression {

            HighchartsBurndown[] hcburndownvalue = [];

            datetime date = 2014-01-01T00:00:00;

            for (integer i = 1; i <= 48; i++) {

              HighchartsBurndownSeries[] burndownseries = [];

              for (integer j = 1; j <= 5; j++) {

                burndownseries += {

                  hcprojectname : "Project " + string(j),

                  hcburndownvalue : coouser.GetRandomNumber(100)

                }

              }

              hcburndownvalue += {

                hcdate : date,

                hcburndownseries : burndownseries

              };

              date += 24*60*60;

            }

            return hcburndownvalue;

          }

        }

      }

      layout {

        // Auto-generated layout block

        row {

          CTRLHighcharts hcburndown {

            colspan = 4;

            labelvisible = false;

            controloptions = expression {

              return {

                chart: {

                  type: "line"

                }

              }

            }

          }

        }

      }

    }