Chart Object

How to use the Chart Object to display reports in Method

Updated over a week ago

A chart object can be used to visually represent data within Method.


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

  • Caption: The title for the chart.

  • Hide Caption: Choose to make the title of the chart visible or invisible.

  • Load State: The default state of the control (regular/hidden/disabled).

  • Chart Builder: Opens a wizard to configure the chart. See below.

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:

  1. The โœ• icon will Delete the filter

  2. The โŠ• icon lets you add another filter.

  3. The slider icon will give you an advanced filter edit view.

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.

  1. Drag a chart into a section and open it via the Chart Builder.

  2. Configure the Data section:

    1. Data source (Table) = Invoice.

    2. Y axis = Amount of Invoice.

    3. Calculate as = Sum.

    4. X axis = TxnDate field.

    5. Group by = Month.

    6. Filter criteria:

      • Txn date

      • Is

      • DateTime

      • This year

  3. Configure the Display section:

    1. Chart Type = Column

    2. Chart Title = "Invoice Amounts"

    3. Y Axis Title = "Amount Total ($)"

    4. X Axis Title = "Date"

    5. Color = Any you want.

    6. Show data point values = Enabled.

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

Did this answer your question?