Visualize your data in a bar, line or pie chart.
Note: Internal caps the number of records we’ll calculate at 5000. This means that this component will not produce accurate results for data sets whose output exceeds that limit. Generally, if you’re hitting that limit, we recommend creating a dedicated reporting function that aggregates in the database. For the chart component, bind the input for the component to the output of the aggregate component.
The data shown in a chart is filtered based on a user selection of a table row, or text in a filter component.
You can also create a simple chart without dynamic filters; in this case, the chart's display only changes when the underlying data changes.
First, select the resource whose data you want to chart.
The name of your chart is displayed at the top of the chart, so you can use it as a label. Then choose from bar, line or pie chart types.
Choose a data field (usually this is the independent variable).
Then, choose how you want the data to be grouped on the x-axis:
Graph multiple lines/bars on your chart.
Grouped by
Choose the attribute that will determine how the pie chart is segmented (which attribute determines the slices of the pie). You can choose to determine this based on the value of the attribute, or if the attribute is a date/time, you can also choose to have Internal group this into a day/week/month/year format.
How should your data be calculated? (size of each slice)
You can use filters to narrow down the data records that will be charted. Click “+” to add your first filter.
Each filter has a field which is compared to a value. A preset filter compares against a fixed value, whereas a dynamic filter compares against data from another component. Dynamic filters are another way to bind components together to add functionality.
Preset filter example
Let's start setting up a chart of our database table Rides, which contains records of the rides taken on our on-demand platform. On the X-axis, we plot the day that a ride was created, and on the Y-axis we plot the sum of the total price of each ride. Effectively, this will give us a chart showing the total ride revenue collected per day.
Now, because this is many records, let's add a preset filter to narrow down what this chart displays. In this case, let's only show the rides from the past 2 days.
Other examples of preset filters:
Dynamic filter example
Let's continue with our chart of Rides for our dynamic filter example. Except, this time, we'll filter the chart to only show the rides of a particular rider, based on a selection in a table. Let's first add a table of Riders.
Then, let's set up a chart using the same Rides data, and the same configuration as the preset example (x-axis: created at grouped by day; y-axis: sum of total price). Then, create a filter, binding the id from the Riders table with the rider id in the Rides data.
Once you save, you'll have a chart that updates whenever a new user is selected in the table.
In addition to tables, you can also bind to a detail view, filter, or card list.
Choose an attribute (then ascending or descending) to determine the order for the data when queried. This comes into play when more than 1000 records can exist - this will determine what the "first" 1000 records charted will be. You can also leave this as "no default order".
You can create visibility rules that will determine when this component is visible and able to be interacted with.
Left and Top options only appear for top-level components (components that are placed directly onto the Space canvas).
Left: Set the distance of this component from the left edge of the Space canvas (x-axis position). This can be expressed as a % of the canvas or as a number of pixels.
Top: Set the distance of this component from the top edge of the Space canvas (y-axis position). This can be expressed as a % of the canvas or as a number of pixels.
Width: Set the width of this component as a number of pixels or as a % of the containing unit.
Height: Set the height of this component as a number of pixels or as a % of the containing unit.
If the component is a top-level component, the containing unit is the Space canvas.
If the component is in-line within another component, the containing unit is the parent component.
If the component is within a flexbox component, the containing unit is the flexbox.
Snap to Grid: Set the edges of this component to snap to the grid canvas in the Space.