A chart object can be used to visually represent data within Method.
The Chart Properties
When you drag a chart object onto the canvas and select it, you will be able to access its properties on the right properties panel. There is not much to configure in the properties, most of the customization will be done through the Chart Builder.
In the above diagram, you have the following standard settings to configure:
- Caption - this text will appear above the chart.
- Hide Caption - choose to make the caption invisible.
- Load State - the initial state when the screen first loads:
- Regular - chart appears on screen.
- Disabled - chart appears but user can not interact with it
- Hidden - chart is invisible
- Chart Builder - opens a wizard to configure the chart.
Using Chart Builder to create a Chart
You can access the Chart Builder either from the chart's properties panel, or from its contextual menu. It will bring up this screen:
There are two sections to the Chart Builder:
- Data Selection - choose the table with the option to sort and filter the data
- Chart Configuration - configure how the chart should look
The Data Selection section requires you to choose the table which holds the data you want to create a chart for.
When you Select a base table, two more options appear: sort and selection criteria.
- Sorting - You can sort by a field within the table in either Ascending or Descending order. If need be, you can have more than one sort criteria.
- Selection Criteria - You can filter the table to only include certain data, for example, all records after a certain date. For more detail on how to fully utilize this, please see The Criteria Builder.
Once you are satisfied with the data you've selected, click Next, or click on Chart Configuration.
The Chart Configuration is where you will specify how the data chosen in Data Selection is visually represented.
Charts are based on two unique sets of information:
- arguments (usually the x-axis): data associated with a numerical value.
- values (usually the y-axis): a value expressed in numbers.
For example, a basic bar graph could show the total invoice amounts over a series of months. The argument would be the invoice transaction dates, and the values would be the sum of all the amounts of the transactions.
We will create that example graph, but before we do that, let's go through the options available on the below configuration screen:
- Chart Type - There are six chart types to choose from: Vertical and Horizontal bar, line, area, pie chart, and donut chart. An example of the chart will be displayed on the right.
- X-Axis (displayed as Wedges for pie and donut) - Choose the field to display for the x-axis. If you choose a date, you can select how you want the dates to be grouped (year, year-month, year-month-day).
- Y-Axis (displayed as Values for pie and donut) - Choose the field to display for the y-axis. This is normally a numerical field. Doing so will allow you to aggregate the data:
- Avg - show the average
- Count - get the count of all the records
- Max - return the maximum value
- Min - return the minimum value
- Sum - calculate the sum
- None - No aggregation, each record will be individually displayed as a point on the chart.
- X-Axis Title: The title for the x-axis. Not available for Pie or Donuts.
- Y-Axis Title: The title for the y-axis. Not available for Pie or Donuts.
- Show Point Value: For each bar, point, or wedge on a chart, show the numerical values.
- Show Dynamic Dates: This will show a date dropdown for the Method user to select a date range for the chart. You can only check this if a dynamic date is chosen in the selection criteria. See the below example.
- Color: the color for the graph can be selected from a choice of eight colours.
- Data Point Click Event: You can insert actions to occur if a bar/wedge/point is selected on the chart.
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 the Chart Builder.
- In Data Selection:
- Choose Invoice for the table.
- Under Selection Criteria click Add Condition.
- For that condition, set TxnDate | Is Equal | This Year
- Select Chart Configuration:
- Chart Type: Choose vertical bar.
- X-Axis: Select the TxnDate field.
- Group the X-Axis by Year-Month.
- Y-Axis: Select the Amount field.
- Aggregate the Y-Axis by Sum.
- X-Axis Title: "Date"
- Y-Axis Title: "Invoice Amount"
- Check Show Point Values.
- Check Show Dynamic Dates.
- Choose a Color.
- Select Close to complete the Chart Builder.
Close the designer and take a look at your new chart! This will look different on your screen, depending on your data. Note the date selection dropdown in the upper right. This allows you to select a date range for your new chart.