The widget displays data in the form of a chart. You can choose the data source from the following options:
- An app from any workspace.
- A Table type variable created in the context of a page where the chart is placed.
- A Report, a system component that collects information from multiple apps.
For example, with the help of this widget, you can create a line chart showing the annual revenue of the company or a pie chart illustrating the contribution of each manager to the total sales volume.
Create a chart
To configure the widget, follow these steps:
- Open an app form or page in the interface designer.
- Drag and drop the Chart widget from the right panel onto the modeling canvas or click the + Widget button. The settings window will open.
- In the Data source field, choose what you want to visualize as a chart:
- App. Select this option to choose any app in the system.
- Table. This option is available when placing the widget on a separate page. Check this option and specify a Table type variable from the page’s context. The chart will be generated based on data from the table. Read more about this option in the Chart use cases section of this article.
- Report. Enable this option to select a report that aggregates data from multiple apps. Read more about this option in the Chart use cases section of this article.
Additional options will appear in the settings window. When choosing a report or app as the data source, you will see the Custom Filters tab. Here you can configure fields for filtering the items displayed in the chart.
- Specify the chart’s settings:
- Category. Choose the field for which you want to create the chart. If you specify a Category type property, the chart will be generated based on the options in the property. Please note that you cannot create a chart based on an App type property.
- Value. Select the field whose value will be used to build the chart. Specify the value Number or a property of the Number or Money type. Depending on the data source, you will have different options for selection: for an app, properties from its context, for a table, its columns, and for a report, the columns in which the data is aggregated.
After selecting the property, specify the parameter for chart construction next to it: field value, sum of values, or minimum, maximum, average value. Please note that if a Date type property is selected in the Value field, you cannot use the Value option for the parameter.
- Additional value (Y-Axis). For Line type charts, specify an additional value to be displayed on the Y-axis.
- Chart type. Choose the chart type from the following options: Vertical Bars, Horizontal Bars, Line, Area, Pie, Doughnut, Advanced Doughnut, Multiple Doughnuts, Number Cards, Treemap, or Gauge Chart.
- Color scheme. Select the color scheme for chart visualization.
- Chart size. Choose one of the available options:
- Dynamic. The chart size adjusts according to the volume of displayed data.
- Fixed. Specify the width and height of the chart in pixels.
- When choosing a table as the data source, you can create a chart based on multiple values. To do this, specify additional settings:
- Group by several values. This option appears when configuring a Vertical Bars or Horizontal Bars type chart. Check it to specify multiple values that will be displayed on the X-axis.
To see how a vertical bar chart with grouping by multiple values looks, see the Chart use cases section.
- If you are configuring a chart using data from an app, go to the Custom Filters tab to specify Filter fields. These are app properties that will be used as filters for chart creation.
- Save the settings. A chart layout with data will appear on the modeling canvas. If necessary, edit the widget settings to modify the chart.
- To make the configured form available to users, click Save and Publish on the interface designer toolbar.
Chart use cases
Data from an app
Let’s see how to use a chart with the App data source. In the examples, we’ll build reports for the Deals app from the CRM workspace.
Example 1
You can configure the chart to display the conversion of app items by status. For instance, create a conversion report so that the sales department can track the percentage of successfully closed deals. Read more about setting up such a report in the Conversion of leads and deals article.
Example 2
Create a chart to view the total revenue of the sales department and track the most profitable deals. Here’s how to do it:
- Place the Chart widget on a separate page.
- Choose the Deals app as the data source. In the Category field, specify the deal’s name, and in the Value field, its budget.
- Select the Advanced Doughnut type.
- On the Custom Filters tab, add deal fields by which you want sort the data on the page, for example Assigned to, Estimated closing date, and Pipeline.
- Save and publish the page.
The chart will show the company’s total profit, the budget for each deal, and the percentage ratio of this amount to the overall revenue.
Data from a table
To create a chart with the Table data source, follow these steps:
- Create a page and open it in the interface designer.
- Go to the Context tab. Create a property of the Table type. In its settings, add columns.
- Return to the Template tab. On the right panel of the designer, click Properties and drag the created property onto the modeling canvas. This is necessary so that users can populate the table with data on the page.
- Place the Chart widget on the modeling canvas. In the Data source field, select the Table option and specify the name of the created variable from the context. Set the parameters for building the chart, its type, color scheme, and size.
- Save and publish the page.
Example 1
The widget can be used to display statistics of completed orders on a separate page.
When users fill in the table columns, in the Gauge chart, the amount of each completed order is displayed, along with the company’s total revenue.
Example 2
Let’s take a look at how to use the Group by several values option.
On a separate page, add a table that displays the profit from orders on specific dates and a Vertical Bars type chart. The amounts in the table will be distributed across columns depending on the order group: wholesale, retail, or other.
To display the profit from different order groups in separate columns on the chart, enable the Group by several values option in the widget’s settings. Choose properties of the Money type from the table as values.
When users populate the table with data, a chart is generated. In this chart the amount for each order group is displayed in a separate column. This allows you to compare revenues and assess which group contributes the most to the company’s profit.
Data from a report
Reports aggregate data from multiple source apps. The Chart widget allows you to visualize this data. Read more about reports in the Report section.
In a report, information is presented in the form of a table. The columns of this table can be specified as values for building a chart.
Let’s explore how to create a chart for a report in which Orders, Contracts, and Invoices selected are selected as source apps. The report contains information about orders, including related contracts and the invoice amount for each contract.
Using the chart, you can track what percentage of the company’s total revenue each order amount accounts for. To do this, select the order name in the Category field and the contract amount in the Value field. Choose the Multiple Doughnuts type. This allows you to view metrics for each order individually.
Save your settings and publish the page. Now, circular charts are displayed on it for each order. They show the order name, the contract amount, and the percentage of the total company profit.
Found a typo? Highlight the text, press ctrl + enter and notify us