A chart object 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 Properties
When you select the chart object, you will be able to configure its settings, however, it does not have any styles or events associated with it. Most of its customization will be done through the Chart Builder.
Settings
Style
There are no style settings available for the chart object.
Actions / Events
Data Point Click: By default, this is disabled because the drilldown is enabled and configurable within the Chart Builder itself. If you would like to define a custom action to occur instead, you will need to disable the drill down within the Chart Builder On click section.
Chart Builder Layout
You can access the Chart Builder either from the chart's properties panel, or from its contextual menu. It will bring up this screen:
On the left will be a dynamic display of what the chart will look like as you configure it. When a chart is first created, it will display Chart not configured.
In the upper right, you will have two buttons to Save the chart, and to Close the Chart Builder and return back to the screen designer.
Within the Configure chart side panel are three sections to enter in the details for the chart.
Data
Display
Interactions
Select each word to cycle between the different configuration sections.
Configure Chart
There are three sections to configure when creating or editing a new chart.
Data Section
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 holding the data you wish to display.
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.
For example, a basic bar graph could show the total invoice amounts (Y axis) over a series of months (X axis). The Y axis would be the sum of all the amounts of the transactions and the X axis would use the invoice transaction dates to group them.
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.
Once selected, you will be prompted to enter in the field, and further criteria for the filter.
When you have finished your criteria, click the Apply button. In the below example, the filter criteria restricts the graph to show only activities where the Due Date start field is equal to This month
.
For more detail on how to configure filters, please see The Criteria Builder.ย
Below the filters, you will find some icons:
The โ icon will Delete the filter
The โ icon lets you add another filter.
The slider icon will give you an advanced filter edit view.
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 Type and Color
The following charts are available to you:
Column
Bar
Line
Area
Pie
Donut
Below the chart types, you will be able to set the colour for the chart chosen. 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
Y axis title
X axis title
NOTE: If the caption for the chart is hidden, as explained in Chart Property Settings, then the chart's title will not show.
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 charts.
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.
Enable drill down: This enables the ability for the user to click on an element to display a grid listing of what is shown. If disabled, you can instead define actions in the Chart's properties.
Which data columns would you like to display on the drill down grid?: Choose the columns to show in the grid.
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.
Chart Example
In the below example, we will configure a bar chart to show the sum of invoice amounts over a period of months.
Drag a chart into a section and open it via the Chart Builder.
Configure the Data section:
Configure the Display section:
For Interactions section, keep the default values.
Before you save, your screen will look similar to this:
When you are satisfied, click Save and then Close to return to the Designer.