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.

Ways to use a chart

Dynamically filter data using other components

The data shown in a chart is filtered based on a user selection of a table row, or text in a filter component.

‍

Aggregate data to provide overview

You can also create a simple chart without dynamic filters; in this case, the chart's display only changes when the underlying data changes.

‍

Configuring your chart

Source

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.

For bar chart & line graph

x-axis

Choose a data field (usually this is the independent variable).

Then, choose how you want the data to be grouped on the x-axis:

• by value - discrete values are plotted on the x-axis.

‍

• by day/week/month/year - if your attribute is a date/time, select this if you want to see results by day/week/month/year. Internal will convert this value to a date format and plot a time series on the X-axis (in your chosen interval).

‍

y-axis

• Count: displays the count (number of records) of the matching group for the x-axis variable.
• Sum: displays the sums of the values for the selected attribute. Ex: If you selected deal size as the attribute, this would display the total sum of all the deal size values (for a given x-axis value).

• Pre-aggregated value: Simply displays the value for the selected attribute. Use this option if you have already "aggregated" or transformed your data to be used in a chart (ie, already summed or counted for a given x-axis value).

‍

Number of bars

Graph multiple lines/bars on your chart.

• Single
• Multiple, grouped by an attribute: Break out additional bars/lines by attribute.

• Multiple, using pre-aggregated data: Select this if your data has already been prepared for use in a chart. Then choose the additional attributes you would like to plot on this chart.

For pie 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)

• Count: pie slice shows the count (number of records) for the attribute chosen above.
• Sum: pie slice shows the sums of the values for an attribute that you select.
• Pre-aggregated value: pie slice shows the value for the selected attribute. Use this option if you have already "aggregated" or transformed your data to be used in a chart (ie, already summed or counted).

‍

Filters

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:

• Battery_level [is less than] 20
• Status [is not equal to] VIP
• Email [contains] "@gmail.com"
• LastName [is not null]

‍

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.

‍

Sorting

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".

Visibility Rules

You can create visibility rules that will determine when this component is visible and able to be interacted with.

Selected Datapoint and Data-binding

You can use the output of selecting (by clicking) a datapoint in a chart as a binding for another component much the same way as you can for rows in Table Components. Selected datapoints produce an output that contains the data for the datapoint as produced by the underlying function.

To bind from a selected datapoint in a chart:

1. Select a component to which you would like to bind the selected datapoint's output
2. In the configuration menu for that component, select "binding" as the data source and select the chart (listed by title) and the field from that output to which you wish to bind.

3. Once published, selecting a column (or other datapoint type) from a chart will result in the output of that datapoint's underlying query result being pushed to the component to which it was bound

Design

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.

‍

‍