Flow components let us split our app UI into independent, reusable pieces. A page layout in Flow has the following components:
Content – Hidden | Presentation | List | Outcomes | Image
Input – Input | Radio | Checkbox | Toggle | Text | Rich Text | Combobox
Data – File Upload | Table | Files | Tiles
Charts – Bar | Line | Pie | Doughnut | Polar Area
Let’s take a look at the charts component.
There are five chart types available by default in Flow – Bar, Line, Pie, Doughnut, and Polar Area. The charts are rendered using the Chart.js library.
This is where we can find the charts:
We drag and drop the chart we would like to use, in a container in the page layout. Like other components, this opens a configuration panel on the right-hand-side that lets us customize the component.
This is an example of how a bar chart looks like when we are done configuring it in the page layout:
Charts support four columns for configuring the chart data.
- Label for the data (required)
- Value for the data (required)
- Background color, overrides the default (optional)
- Border color, overrides the default (optional)
Each item in the list that the chart is bound to (whether loaded from an ObjectDataRequest, or from a static value) will map to a data point on the chart.
By default, background and border colors will be fetched from the global settings. We can override colors globally when we configure the player – for all or any chart; or for a data point in a chart, by specifying them in a column.
Outcomes associated with a chart component will be executed when an item on the chart is clicked. The item from the bound data source will be set as selected, before the outcome is executed. Only the first outcome bound to the chart will be used. If an outcome is defined as Is Bulk Action, then it will be displayed above the chart.
Displaying multiple datasets on the same chart is supported by using the charts container.
Charts take custom classes as attributes. For example:
"classes": "myclass1 myclass2",
We use bar charts to display various data points as vertical bars.
We can find more information on bar charts here.
Lines let us plot data points on a line.
We can find more information on lines here.
Pie and doughnut charts show the proportional value of data points as segments of a circle; the arc of the circle representing the value.
We can find more information on pie charts here.
Polar area charts are also round like pie charts, but here, instead of the arc segments, the radius varies.
Want to know more about how to make charts?
Why, yes, of course!
Here is a flow (https://flow.manywho.com/c5a50df2-f24b-4342-9fbd-1c91747ac0cf/play/default/?flow-id=60efda57-1802-4a11-941c-5e1692dc0d59) that shows the charts in action. If we want to download the JSON of the flow, here goes.
Happy charting! May the odds be forever in your favor.
- Sample flow – https://flow.manywho.com/c5a50df2-f24b-4342-9fbd-1c91747ac0cf/play/default/?flow-id=60efda57-1802-4a11-941c-5e1692dc0d59
- Sample package – https://s3.amazonaws.com/mw-documentation/flow-examples/chart.json