Chart Gadget
Contents
Overview
Chart Gadgets can be loaded into a Form Section. They provide a quick and easy way to clearly and graphically communicate information about your data from the simplest pie or bar chart through to more sophisticated and complex graphs.
You build Apps in Lianja App Builder visually using the Page Builder.
If you have not yet done so please read Understanding the Lianja Architecture and also Understanding ART to better understand this article.
An App consists of pages. Pages are made up of Sections. Form sections are made up of FormItems. We call these collectively "UI Elements" or "Visual Elements".
Setting Attributes Declaratively
You adjust the appearance and behavior of each UI Element in the Attributes Tab of the App Inspector.
The attributes available consist of some common ones as well as some specific to the UI Element being inspected.
Getting and Setting Attributes Programmatically
The setAttribute(name, value) method can be used to set the value of an Attribute:
Lianja.get("pageid.sectionid.fieldid").setAttribute("caption","Formitem1")
Note: on the desktop, the shortened form setAttr(name,value) is also available.
The getAttribute(name) method can be used to get the value of an Attribute:
cTitle = Lianja.get("pageid.sectionid.fieldid").getAttribute("caption")
Note: on the desktop, the shortened form getAttr(name) is also available.
See Also
Chart Options, Charts Section Attributes, Data Visualization with Charts, Chart UI Framework Class
Demo Apps (included in the Lianja App Builder distribution):
- Lianja Tablet Web UI Demo (example_webapp1)
Attributes
Details
Attribute | Description | Name | Type |
---|---|---|---|
Name | The name for this gadget (unique to the section) | id | Character |
Full name | The full name for this gadget including its parent page and section, e.g. page1.section1.field1 | fullid | Character |
Alias name | The alias name for this gadget | aliasid | Character |
App Doc | The App Doc file for this gadget. This will be included in the App Doc when it is generated. | appdoc | Character |
Tag | The tag for this gadget | tag | Character |
Meta types | A comma separated list of metatype names | metatypes | Character |
Type | The type of control: Gadget (readonly) | type | Character |
Gadget type | The type of gadget: chart (readonly) | gadgetType | Character |
Margin | Margin size around the gadget | gadgetMargin | Int |
Fixed width | Fixed gadget width in pixels | gadgetFixedWidth | Int |
Fixed height | Fixed gadget height in pixels | gadgetFixedHeight | Int |
Inline | Render the gadget inline rather than it its own column (True | False) | gadgetInline | Boolean |
Stretch width | Auto stretch the width of the gadget into the width of the section (True | False) | gadgetStretchWidth | Boolean |
Geometry
Attribute | Description | Name | Type |
---|---|---|---|
Absolute | Enable or disable absolute positioning (True | False) | absolutePosition | Boolean |
Top | Top position in pixels | absolutePositionY | Int |
Left | Left position in pixels | absolutePositionX | Int |
Width | Width in pixels | absolutePositionWidth | Int |
Height | Height in pixels | absolutePositionHeight | Int |
CSS style | CSS style (separate attributes with ; or use app:/filename.css) | cssStyle | Character |
Caption
Attribute | Description | Name | Type |
---|---|---|---|
Caption | The caption for the gadget | caption | Character |
Caption CSS style | The gadget caption CSS style (separate attributes with ';' or use app:/filename.css or specify CSS classes separated by spaces). | captionCSSstyle | Character |
Background color | The background color for the caption | backColor | Character |
Foreground color | The foreground color for the caption | foreColor | Character |
Font | The font for the caption | captionFont | Character |
Icon | The image for the caption (png | jpg | gif). Use app:/imagename.ext for app specific images. |
captionIcon | Character |
Border width | The caption border width | captionBorderWidth | Int |
Border color | The caption border color | captionBorderColor | Character |
Transparency | Specify a transparency percentage from 0 to 100 | transparency | Int |
Gradient colors | Render the caption color as a gradient (True | False) | captionGradient | Boolean |
Gradient type | Specify the gradient type | captionGradientType | Int |
Gradient start color | Gradient start color | captionFromColor | Character |
Gradient end color | Gradient end color | captionToColor | Character |
Chart Options
Attribute | Description | Name | Type |
---|---|---|---|
Graph type | (Select from a known chart type (Horizontal Bar | Vertical Bar | Line | Pie | Gantt | Bipolar | Funnel | Radar | Rose | Scatter | Radial Scatter | Thermometer | Waterfall | Vertical Progress Bar | Horizontal Progress Bar) | chartUrlType | Character |
Width | The chart width | chartWidth | Int |
Height | The chart height | chartHeight | Int |
Left gutter | The chart left gutter width in pixels | chartGutterLeft | Int |
Right gutter | The chart right gutter width in pixels | chartGutterRight | Int |
Top gutter | The chart top gutter height in pixels | chartGutterTop | Int |
Bottom gutter | The chart bottom gutter height in pixels | chartGutterBottom | Int |
Background color | The color of the chart canvas as an html-like color | chartBackColor | Character |
Shadow | Enable or disable 3D shadowing (True | False). | chartShadow | Boolean |
Effects | Enable or disable special effects for displaying the chart (True | False). | chartEffects | Boolean |
Gradient colors | Enable or disable gradient colors (True | False). | chartGradient | Boolean |
Gradient start color | The start gradient color | chartGradientstart | Character |
Gradient end color | The end gradient color | chartGradientend | Character |
Title | The chart title | chartTitle | Character |
Title foreground color | The chart title foreground color | chartTitleForeColor | Character |
Title background color | The chart title background color | chartTitleBackColor | Character |
Data | The comma separated list of chart data. For grouped data, separate the groups with a | character. | chartData | Character |
Labels | The chart labels | chartLabels | Character |
Label foreground color | The chart label foreground color | chartLabelColor | Character |
Labels above | Enable or disable displaying a summary label next to the segment (True | False). | chartLabelsAbove | Boolean |
Legend labels | The chart legend labels | chartKeyLabels | Character |
Tooltips | A comma separated list of tooltips that are passed to the delegate | chartTooltips | Character |
Colors | A comma separated list of html-style colors (one for each segment) | chartColors | Character |
Delegate | An optional delegate to be called when segments of the chart are selected. By default the 'tooltip' for the segment selected will be used as a search key in any child sections. | chartDelegate | Character |
Other Options
Attribute | Description | Name | Type |
---|---|---|---|
Hide header | Hide gadget header at runtime (True | False) | gadgetHideHeader | Boolean |
Permissions and Roles
Attribute | Description | Name | Type |
---|---|---|---|
Read roles | A comma separated list of roles that can read (and view) the data. | permRead | Character |
Update roles | A comma separated list of roles that can perform update operations on the data. | permUpdate | Character |
UI Presentation Rules
Attribute | Description | Name | Type |
---|---|---|---|
Desktop | Include this gadget in a Desktop client (True | False). | desktopUI | Boolean |
Web | Include this gadget in a Web client (True | False). | webUI | Boolean |
Tablet | Include this gadget in a Tablet client (True | False). | tabletUI | Boolean |
Phone | Include this gadget in a Phone client (True | False). | mobileUI | Boolean |
UI States | UI states that affect this gadget. Specify multiple states as a comma separated list. | state | Character |
Initial UI state | The initial UI state for this gadget. | uiStateInit | Character |
Readonly when | Gadget is readonly at runtime if specified expression evaluates to true. | readonlyWhen | Character |
Visible when | Gadget is visible at runtime if specified expression evaluates to true. | visibleWhen | Character |
Hidden at runtime | Hide this formitem at runtime (True | False). | hiddenAtRuntime | Boolean |
Display orientation | Display depending on mobile device orientation for Tablets and Phones. (Always | Portrait | Landscape) | displayOrientation | Character |
Apply rules on change | Apply UI presentation rules (Visible when and Readonly when) when data is changed interactively or when navigating records (True | False). | applyRulesOnChange | Boolean |