Components
/
Chart

Chart

Visualize your data in a bar, line or pie chart.

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.

Example: Selecting a rider in the Riders table will filter the chart to the right. Only that rider's results will be displayed, showing you the revenue of that rider per day.

Check out the dynamic filter example in the configuration details below to learn how this is set up.

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

Basics

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

What should be displayed on the 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.
Example: If your attribute was FirstName, you'll see individual names like "James", "Jame", "Jamie", etc 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).
Example: If you had 6/1/2020, 6/3/2020, and 6/16/2020 as x-axis values and you group the data by month, Internal will plot the month 6/2020 as the X-axis data point. The Y-axis value will be determined by combining the three values from 6/1/2020, 6/3/2020 and 6/16/2020.

What should be displayed on the 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).

Should this chart have multiple lines/bars?

Graph multiple lines/bars on your chart.

  • No
  • Yes, grouped by an attribute: Break out additional bars/lines by attribute.
Example: You have a bar chart showing dates on the x-axis and # of orders on the y-axis. You can choose to group by an attribute, let's say Customer Name, this will break out a new bar (for every date on the x-axis) for each customer name (the y-axis would show the # of orders made on that date by that customer name).
  • Yes, 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

What attribute should group the data?

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

Advanced

Filter your chart data

You can use filters to narrow down the data records that will be charted.  Click “+ Add filter” to add your first filter.

Note: This component will chart up to 1000 records in a dataset. If there are more than 1000 records, it will display the first 1000 records in the chart.

We recommend that you use filters to reduce your dataset below 1000 records or create a custom resource to aggregate data first.

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 where of our resource 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 resource, 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 resource.

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.

How should the query for your data be ordered?

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