A chart component can be used to visually represent data within Method.
📌 Note: The 
will expand the chart to full screen, however, this will not work on a mobile device.
Chart component properties
Selecting the chart component shows its configurable properties.
The chart's properties are broken up into three tabs:
Data
Display
Interactions
Data
The Data section requires you to choose the table which holds the data you want to create a chart for. Expand Data source (Table) and select the table.
Once the table has been decided, you will need to decide on the x and y axis,
Y axis (values): a numerical value you want to measure.
X axis (arguments): how you want the data grouped.
💡Example: A basic bar graph could show the total invoice amounts (Y axis) over a series of months (X axis).
Y axis = sum of all the amounts of the transactions
X axis = invoice transaction dates (which are grouped by month)
Y axis
The Y axis is usually a numerical value you want to measure. For example, the count of activities, or the total amount for one or more invoices. Depending on the table you select, the dropdown will show different fields from the table you want to measure. In the below example, options shown are for the Activity table.
In the above example, if Count of Activity records is chosen, then no further options are shown because you already specified to count them. However, if you choose a field, you will be presented with further options on how you want to calculate the values.
X axis
The X axis let's you choose a field to group by.
If you choose a date, you will get further options on how to group them (by Day, Month, or Year.
Filter criteria
Once you configure what you want displayed, you can further filter the data by clicking Add filter.
For more information on filters, see "Filter Configurations".
Sorting
When the X and Y values are set, you can configure how the data will be sorted on your chart. You can also set whether it will be in ascending or descending order (depending on the data type).
Display section
This section let's you configure how the chart should look.
Chart display
Display |
|
Available charts |
|
Color | Select from the given list of colors. |
Default state | The default state of the component (Regular/Hidden/Disabled). |
In regards to color, for charts that show multiple sections, like the pie chart, a gradient of the color will be applied. For example:
Titles
There are three titles you can give.
Chart title
Show title: toggle visibility for the title.
Y axis title
X axis title
Additional options
Enable Show data point values to show the values for each individual element in your chart. For example:
Enable Show dynamic dates to allow the user to cycle through dates for the graph. Note, in the image below, a dropdow in the upper right of the chart.
The Show dynamic dates will be disabled if you chose one or more filters, or the filter is not a dynamic date. A dynamic date is any of the other options that isn't an exact date.
Interactions section
This section allows you to configure what happens when the user interacts with the chart.
On hover
The On hover interaction allows you to change the label for the value displayed when the user hovers over an element on the chart. By default, it is set to "Value".
On click
The On click interaction allows you to configure the grid that shows when a user clicks on an element in the chart.
There are three options for to choose from:
Custom action: The action editor immediately appears to add actions.
Drill down: This allows for a grid to appear, filtered to the data of the element selected. Selecting this option allows you to define what columns are shown on this drill-down grid. (See below)
None
Drill-down grid
When "Drill down" is selected, new options are shown, and the canvas is updated to show what a dill down would look like.
On the right panel, the options to further configure are:
Which data columns would you like to display on the drill down grid?
Choose the columns to show in the grid, up to a maximum of eight columns.Which column do you want to sort by?
Select the column to sort the grid by.Ascending / Descending
Related to sorting, select how the column will be sorted.Which screen opens upon clicking a row?
When a row is clicked in the grid, you can set which screen will open from an app in your account.