Chart Gadget

From Lianjapedia
Jump to: navigation, search


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.

Chart gadget.png

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:


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)



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
Custom Props A ';' separated list of custom prop key pairs, e.g. name=barry;company=lianja
From v5.3.
customprops 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
Desktop Margin Top Adjust the top margin when laying out an inline gadget to line it up with others horizontally in desktop Apps. From v5.3. gadgetpaddingtop Int
Web Margin Top Adjust the top margin when laying out an inline gadget to line it up with others horizontally in Web/Mobile Apps. From v5.3. gadgetpaddingtopweb Int


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


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
Responsive UI width breakpoint The responsive UI visibility width breakpoint in Web/Mobile Apps. From v5.4. responsivewidthvisibility Int
Responsive UI height breakpoint The responsive UI visibility height breakpoint in Web/Mobile Apps. From v5.4. responsiveheightvisibility Int
Responsive UI minimum width The responsive UI minimum width in Web/Mobile Apps. From v5.4. responsiveminwidth Int