Chart

Appivo Chart Widget

The Chart widget provides a visual representation of data in several formats, such as pie charts and bar charts.


  • UI Type:

Extends: BaseWidget

Basic Usage:

In this example, we will create a pie chart to output male and female students in a classroom.

gender-pie-chart-example

Step 1: Initial setup

Create data models for students  with appropriate attributes. Make sure we have “Gender” state attribute for students as it will be the identifier that we use for our chart.  Ensure few student records are created to proceed with the chart.

Step 2: Query for the chart

We need a query to output all students based on their gender to display in the pie chart. We create a query (for instance: genderBreakdown), where we choose records from student data model. For attributes we need count and gender of all students.

For count, you can edit/expand the ID attribute and use an inbuilt function called “Count”. You can add more attributes if required. For our example, ID (count) and gender will suffice.

In “Pivots”, we want to add Gender as the pivot point. This will bifurcate the students record output  based on Gender. Your query should look like this by now:

Appivo query for pie chart

Step 3: Configuring chart widget

– Add chart widget to the view and select the chart type to start off. For this example you can use Pie chart or a Donut chart.
– Select query as the “genderBreakdown” query we just created.
– For value/data, use “ID” as the values from ID will be plotted on the chart.
– For labels, use “Gender” as the values will be plotted based on Gender.

You can set the start/end angle and cut out percentage (for donut chart) based on your preference.  Go through the other options and set according to requirement. Your widget config should look like this by now.

Chart widget configuration

Additionally, you can customize the colors for the chart by navigating to colors tab in the widget editor. Based on the chart selected, you should get options to modify color values.

Chart color configuaration

Step 4: Save and run the app 

Your pie chart should display the student breakup of male, female or other genders.

gender-pie-chart-example

Properties

Name Desciption
Begin At ZeroForce the chart to always include zero on the value axis.
Chart TypeThe type of chart the widget should display.
Cutout PercentageHow many percent of the center should be cut out to form the donut.
Data SetThe model or query attribute that is used to distinguish unique data-sets. Used for displaying multiple data sets.
DisabledThe widget cannot be used.
Enable annotationsEnables support for adding annotations like text and shapes to the diagram at runtime.
End AngleAt what angle (counting clockwise from twelve o'clock) should the chart end.
HiddenHides the widget from the user.
Interpolate dataWhen enabled the chart will interpolate the data to fill in the gaps.
LabelsThe model or query attribute that the plotted labels should be taken from.
LegendThe chart legend displays data about the datasets that are appearing on the chart.
Legend FormatterDefine a function to format the labels in the chart legend.
MaximizeSet this widget to be maximized (take up all available space).
Maximum ValueMaximum allowed input value.
Minimum ValueMinimum allowed input value.
Point RadiusRadius of data points rendered in the chart. Setting to zero means points will not be rendered.
QueryQuery used to populate data into the chart.
Show X-axis ticksShow ticks along the x-axis.
Show X-grid linesShows grid lines along the x-axis.
Show Y-axis ticksShow ticks along the y-axis.
Show Y-grid linesShows grid lines along the y-axis.
Stacked DataStacked bar charts can be used to show how one data series is made up of a number of smaller pieces.
Start AngleAt what angle (counting clockwise from twelve o'clock) should the chart start.
StepsThe number of steps displayed between the maximum and minimum values.
Tab IndexThe Tab Index is an integer that tells the order of the widget when using the tab-key to move from one widget to another.
ValueThe model or query attribute that represents the value to be plotted in the chart.
X-axis FormatterDefine a function to format the labels on the x-axis.
X-axis LabelThe text that will be displayed next to the x-axis.
Y-axis FormatterDefine a function to format the labels on the y-axis.
Y-axis LabelThe text that will be displayed next to the y-axis.

Style

Name Desciption
Background-colorChange background color of the widget.
ColorColor of the text inside the widgets. May not apply to all text inside all widgets.
Font SizeSet the font size in pixels for text.
Text-alignmentSet left, centered or right. Applies both to icon and text.

Events

Name Description Event Attribute
Blur Event when a widget goes out of focus.
event The event that gets triggered when the user "leaves" an element.
Click Event that triggers based on touch or click.
event The event that triggered the handler.
DblClick Event that triggers based on double click.
event The event that triggered the handler.
Focus Event when indicating/ highlighting widget using the cursor.
event Focus is the event that gets triggered when a user makes an element come into focus, by clicking on it.

Function

getDataPointIndex ( event: Event )

Returns Datapoint index of point clicked from chart

Parameters
Name Type Description
event Event User MouseEvent

removeAnnotations ( id: String )

Removes an annotation from the chart

Parameters
Name Type Description
id String The id or ids of the annotations to remove

setAnnotations ( data: Object )

Adds or updates an annotation on the chart

Parameters
Name Type Description
data Object Object with annotations keyed by their ids

setColors ( colors: Array )

Sets the colors used when rendering the diagram

Parameters
Name Type Description
colors Array Array of of colors. For Radar and Line charts, colors can be objects with properties backgroundColor, borderColor, pointBackgroundColor, pointBorderColor, pointHoverBackgroundColor, pointHoverBorderColor

setData ( data: Array , options: Object )

Sets the data set that will be used to populate the chart

Parameters
Name Type Description
data Array The data set to be used to populate the chart
options Object Options object for setting data, label and set attribute names

setQuery ( queryName: String )

Sets the query used to populate the chart.

Parameters
Name Type Description
queryName String The name of the query.

show ( )

Shows the widget.

showTooltip ( idx: Number )

Displays tooltip on datapoint of chart

Parameters
Name Type Description
idx Number The idx used to select datapoint on chart

blur ( )

Triggers the blur event.

focus ( )

Triggers the focus event.

get ( name: String ) →{ Object }

Gets the value of the specified property.

Parameters
Name Type Description
name String The name of the property.
Returns

The property's value.

getId ( ) →{ ID }

Returns the ID of the widget.

Returns

The ID of the widget

getValue ( ) →{ Object }

Returns the widget's value.

Returns

The widget's value.

hide ( )

Hides the widget.

isEnabled ( ) →{ Boolean }

Returns true if the widget is enabled.

Returns

True if enabled, otherwise false.

isHidden ( ) →{ Boolean }

Returns true if the widget is hidden.

Returns

True if hidden, otherwise false.

set ( name: String , value: Object )

Sets the value of the specified property.

Parameters
Name Type Description
name String The name of the property.
value Object The new value.

setEnabled ( Enabled: Boolean )

Enables/disables the widget.

Parameters
Name Type Description
Enabled Boolean True to enable the widget, false to disable.

setStyle ( Object: Object )

Set the widget-style

Parameters
Name Type Description
Object Object properties

setValue ( value: Object )

Sets the widget's value.

Parameters
Name Type Description
value Object The new value.

Other Widgets