koziavin
00717a92fb
All checks were successful
Deploy Static Site / deploy (push) Successful in 6m6s
287 lines
45 KiB
HTML
287 lines
45 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<title>Chart</title>
|
||
<meta name="generator" content="Help+Manual" />
|
||
<meta name="keywords" content="" />
|
||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta name="description" content="The widget displays data in the form of a chart. You can choose the data source from the following options:" />
|
||
<meta name="picture" content="" />
|
||
<meta property="og:type" content="website" />
|
||
<meta property="og:title" content="Full documentation for BRIX365 platform. Low-code developer guide. User guide. Admin guide. Developer guide." />
|
||
<meta property="og:url" content="https://brix365.com/en/help" />
|
||
<meta property="og:image" content="" />
|
||
<link rel="icon" href="favicon.png" type="image/png" />
|
||
|
||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
|
||
<link rel="stylesheet" href="./jquery-ui.min.css" />
|
||
<link rel="stylesheet" href="default.css" />
|
||
<link rel="stylesheet" href="./search-yandex.css" />
|
||
<link rel="stylesheet" href="./article.css" />
|
||
<link rel="stylesheet" href="./glossary.css" />
|
||
<link rel="stylesheet" href="./theme.css" />
|
||
<script type="text/javascript" src="jquery.js"></script>
|
||
<script type="text/javascript" src="helpman_settings.js"></script>
|
||
<script type="text/javascript" src="helpman_topicinit.js"></script>
|
||
|
||
<script type="text/javascript" src="highlight.js"></script>
|
||
<script type="text/javascript">
|
||
$(document).ready(function(){highlight();});
|
||
</script>
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<script>!function(e,t,c,n,r,a,m){e.ym=e.ym||function(){(e.ym.a=e.ym.a||[]).push(arguments)},e.ym.l=1*new Date;for(var s=0;s<document.scripts.length;s++)if(document.scripts[s].src===n)return;a=t.createElement(c),m=t.getElementsByTagName(c)[0],a.async=1,a.src=n,m.parentNode.insertBefore(a,m)}(window,document,"script","https://mc.yandex.ru/metrika/tag.js"),ym(83179930,"init",{clickmap:!0,trackLinks:!0,accurateTrackBounce:!0,webvisor:!0})</script><noscript><div><img alt=""src=https://mc.yandex.ru/watch/83179930 style=position:absolute;left:-9999px></div></noscript>
|
||
|
||
<header class="header elma-365">
|
||
<div class="container">
|
||
<a class="header__logo" href="https://brix365.com/en/help">
|
||
<img src="./logo-en.svg" alt="header logo">
|
||
</a>
|
||
<!-- <div class="hero__search-form" id="search-panel">
|
||
<form class="search-form" onsubmit="ym(83180416,'reachGoal','poisk')">
|
||
<label class="search-form__label">
|
||
<span id="reset-search" class="search__icon"></span>
|
||
<input class="search-form__input" type="text">
|
||
</label>
|
||
<input class="search-form__submit" type="submit" value="Submit">
|
||
</form>
|
||
</div> -->
|
||
|
||
<div class="hero__search-form" id="search-panel"> <form class="search-form"> <label class="search-form__label"> <span id="reset-search" class="search__icon"></span> <input class="search-form__input" type="text"> </label> <input class="search-form__submit" type="submit" value="Submit"> </form> </div>
|
||
<div class="hero__search">
|
||
<a href="#" id="search-icon" class="hero__search-icon">
|
||
<img src="search-icon-white.svg" alt="search string">
|
||
</a>
|
||
<a href="#" id="side-menu-icon" class="hero__side-icon">
|
||
<img src="side_menu.svg" alt="side menu">
|
||
</a>
|
||
</div>
|
||
<div class="header__navi">
|
||
|
||
<ul class="header__list"><li><span class="solution-select"><span class="solution-select__selected"></span><svg width="7" height="4" viewBox="0 0 7 4" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1L3.5 3.5L6 1" stroke="white" stroke-linecap="round" stroke-linejoin="round"/></svg><ul class="solution-select__list"><li><a class="project-link" href="https://brix365.com/en/help/platform/get-trial.html">Platform</a></li><li><a class="project-link" href="https://brix365.com/en/help/ecm/ecm-functions.html">ECM</a></li><li><a class="project-link" href="https://brix365.com/en/help/crm/crm_overview.html">CRM</a></li><li><a class="project-link" href="https://brix365.com/en/help/service/service-functions.html">Service</a></li><li><a class="project-link" href="https://brix365.com/en/help/projects/projects-functions.html">Projects</a></li><li><a class="project-link" href="https://brix365.com/en/help/business_solutions/-elma365-store.html">Business Solutions</a></li></ul></span></li><li><a href="https://api.brix365.com/en/" target="_blank">API</a></li><li><a href="https://tssdk.brix365.com/" target="_blank">SDK</a></li></ul>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</header>
|
||
|
||
|
||
|
||
|
||
<main class="main container">
|
||
|
||
<aside class="sidebar" id="sidebar">
|
||
<div class="sidebar__header">
|
||
<a class="header__logo" href="https://brix365.com/en/help">
|
||
<img src="./logo-light-en.svg">
|
||
</a>
|
||
<span class="sidebar__close elma-365-close" id="close"></span>
|
||
</div>
|
||
<div class="sidebar__wrapper" id="side-menu">
|
||
|
||
</div>
|
||
</aside>
|
||
|
||
<article class="article" id="article">
|
||
<div class="article-inner">
|
||
<div class="content">
|
||
<header class="article__header">
|
||
<div class="article__bread" style="display:flex; gap:10px;">
|
||
<span id="subcategory" class="search-res__item-category search-res__item-category_subcategory subcategory article__badge"></span>
|
||
|
||
<div class="topic__breadcrumbs">
|
||
<p>Low-code designer > <a href="interface_settings.html">Set up interfaces</a> > Widget types > Report widgets / Chart</p>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="topic__title"><h1 class="p_Heading1"><span class="f_Heading1">Chart</span></h1>
|
||
</div>
|
||
|
||
</header>
|
||
<section class="article__content">
|
||
<div class="scroll-top-inner">
|
||
<a href="#h1-article" class="scroll-top"></a>
|
||
</div>
|
||
<!-- Placeholder for topic body. -->
|
||
<p style="line-height: 1.20; background: #ffffff; margin: 7px 0 16px 0;">The widget displays data in the form of a chart. You can choose the data source from the following options:</p>
|
||
<ul style="list-style-type:disc">
|
||
<li style="line-height: 1.20; background: #ffffff; margin-top: 7px; margin-right: 0; margin-bottom: 16px;">An app from any workspace.</li><li style="line-height: 1.20; background: #ffffff; margin-top: 7px; margin-right: 0; margin-bottom: 16px;">A <a href="360010201779.html" class="topiclink">Table</a> type variable created in the <a href="context_types.html#context" class="topiclink">context of a page</a> where the chart is placed.</li><li style="line-height: 1.20; background: #ffffff; margin-top: 7px; margin-right: 0; margin-bottom: 16px;">A <a href="report.html" class="topiclink">Report</a>, a system component that collects information from multiple apps.</li><li style="line-height: 1.20; background: #ffffff; margin-top: 7px; margin-right: 0; margin-bottom: 16px;">An <a href="business-process-metrics.html" class="topiclink">Indicator</a> component that can help to determine the effectiveness of certain stages of a business process.</li></ul>
|
||
<p style="line-height: 1.28; margin: 0 0 11px 0;">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.</p>
|
||
<h2 class="p_Heading2"><span class="f_Heading2">Create a chart</span></h2>
|
||
<p style="line-height: 1.20; background: #ffffff; margin: 7px 0 16px 0;">To configure the widget, open an <a href="360009918011.html" class="topiclink">app form</a> or <a href="360027211631.html" class="topiclink">page</a> in the <a href="interface_designer.html" class="topiclink">interface designer</a>. Drag and drop the <span style="font-weight: bold;">Chart</span> widget from the right panel onto the modeling canvas or click the <span style="font-weight: bold;">+Widget</span> button. The settings window will open.</p>
|
||
<h3 class="p_Heading3"><span class="f_Heading3">Chart tab</span></h3>
|
||
<p class="p_Normal">Specify the chart settings:</p>
|
||
<ol style="list-style-type:upper-roman">
|
||
<li value="1" style="line-height: 1.20; background: #ffffff; margin-top: 7px; margin-right: 0; margin-bottom: 16px;">In the <span style="font-weight: bold;">Data source</span> field, choose what you want to visualize as a chart:</li></ol>
|
||
<p style="line-height: 1.20; background: #ffffff; margin: 7px 0 16px 34px;"><img alt="chart-1" width="440" height="200" style="margin:0;width:440px;height:200px;border:none" src="chart-1.png"/></p>
|
||
<ol style="list-style-type:upper-roman"><ul style="list-style-type:disc">
|
||
<li style="line-height: 1.20; background: #ffffff; margin-top: 7px; margin-right: 0; margin-bottom: 16px;"><span style="font-family: Inter; font-weight: bold;">App</span><span style="font-family: Inter;">. Select this option to choose any app and build a chart based on its data. </span>Read more about this option in the <a href="chart.html#use-report" class="topiclink">Data from an app</a> section of this article.</li><li style="line-height: 1.20; background: #ffffff; margin-top: 7px; margin-right: 0; margin-bottom: 16px;"><span style="font-family: Inter; font-weight: bold;">Table</span><span style="font-family: Inter;">. This option is available when placing the widget on a separate page. Check this option and specify a <a href="360010201779.html" class="topiclink">Table</a> type variable from the <a href="context_types.html#context" class="topiclink">page context</a>. The chart will be generated based on data from the table. Read more about this option in the <a href="chart.html#group-by-multiple-indicators" class="topiclink">Chart use cases</a> section of this article.</span></li><li style="line-height: 1.20; background: #ffffff; margin-top: 7px; margin-right: 0; margin-bottom: 16px;"><span style="font-family: Inter; font-weight: bold;">Report</span><span style="font-family: Inter;">. Enable this option to select a report that aggregates data from multiple apps. Read more about this option in the <a href="chart.html#report-data-source" class="topiclink">Chart use cases</a> section of this article.</span></li><li style="line-height: 1.20; background: #ffffff; margin-top: 7px; margin-right: 0; margin-bottom: 16px;"><span style="font-weight: bold;">Indicator</span>. Enable the option and select a published indicator that is applied in the business process to track data. Read more about this option in the <span style="color: #0000ff;"><a href="chart.html#use-process-metrics" class="topiclink">Process indicator data</a></span> section of this article.</li></ul>
|
||
<li value="2" style="line-height: 1.20; background: #ffffff; margin-top: 7px; margin-right: 0; margin-bottom: 16px;">Specify the chart settings:</li></ol>
|
||
<p style="line-height: 1.20; background: #ffffff; margin: 0 0 11px 34px;"><img alt="chart-2" width="535" height="547" style="margin:0;width:535px;height:547px;border:none" src="chart-2.png"/></p>
|
||
<ul style="list-style-type:disc">
|
||
<li style="line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 7px;"><span style="font-weight: bold;">Category</span>. Choose the field for which you want to create the chart. If you specify a <a href="360009707032.html#category" class="topiclink">Category</a> type property, the chart will be generated based on the options in the property.</li></ul>
|
||
<p style="line-height: 1.20; margin: 7px 0 7px 34px;">Pay attention to the peculiarities of using the <a href="360009707032.html#app" class="topiclink">App</a> type property as a category parameter:</p>
|
||
<ul style="list-style-type:disc"><ul style="list-style-type:circle">
|
||
<li style="text-align: justify; line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 7px;">Chart source <span style="font-weight: bold;">App</span>. If there is a field of the <span style="font-weight: bold;">App</span> type on a form, you can specify nested properties of that app as a category parameter but not a link to a specific item. For example, a deal contains an entry of the associated contact. You can select any field from the <span style="font-weight: bold;">Contacts</span> app context and build a chart on it.</li><li style="text-align: justify; line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 7px;">Chart source <span style="font-weight: bold;">Report</span>. You can use a report column created from a field of the <span style="font-weight: bold;">App</span> type as a category parameter. In this case, the name of the associated item will be displayed in the chart. For example, in the report from the order context, the customer company has been added as a column. You can select this column and display the name of the company in the chart.</li></ul></li></ul>
|
||
<ul style="list-style-type:disc">
|
||
<li style="line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 7px;"><span style="font-weight: bold;">Value</span>. Select the field whose value will be used to build the chart. Specify the value <span style="font-weight: bold;">Number</span> or a property of the <a href="360009707032.html#number" class="topiclink">Number</a> or <a href="360009707032.html#money" class="topiclink">Money</a> 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.</li></ul>
|
||
<p class="p_Normal" style="line-height: 1.20; margin: 7px 0 7px 36px;">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 <span style="font-weight: bold;">Date</span> type property is selected in the <span style="font-weight: bold;">Value</span> field, you cannot use the <span style="font-weight: bold;">Value</span> option for the parameter.</p>
|
||
<ul style="list-style-type:disc"><ul style="list-style-type:circle">
|
||
<li style="line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 7px;"><span style="font-weight: bold;">Additional value (Y-Axis)</span>. For line charts, specify an additional value to be displayed on the Y-axis.</li></ul></li></ul>
|
||
<ul style="list-style-type:disc">
|
||
<li style="line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 7px;"><a id="conversion" class="hmanchor"></a><span style="font-weight: bold;">Calculation type</span>. The setting appears if <span style="font-weight: bold;">Status</span> is selected as a category and <span style="font-weight: bold;">Amount</span> is selected as a value:</li></ul>
|
||
<ul style="list-style-type:disc"><ul style="list-style-type:circle">
|
||
<li style="text-align: justify; line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 7px;"><span style="font-weight: bold;">Number of items</span>. The number of items in each status is shown.</li><li style="text-align: justify; line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 7px;"><span style="font-weight: bold;">Item conversion</span>,<span style="font-weight: bold;"> Item conversion (sales)</span>. The ratio of the number of items that passed through each status is displayed. Read more about setting up charts on item conversion in the <span style="color: #0000ff;"><a href="closing_ratio.html" class="topiclink">Conversion of leads and deals</a></span> article.</li></ul>
|
||
<li style="text-align: justify; line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 7px;"><span style="font-weight: bold;">Data display</span>. Select how to display values by chart value:<ul style="list-style-type:circle">
|
||
<li style="text-align: justify; line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 7px;"><span style="font-weight: bold;">Units</span>. As a number, such as the number of items or the sum.</li><li style="text-align: justify; line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 7px;"><span style="font-weight: bold;">Percentage</span>. As a percentage, for example, as a fraction of the total number of items or total amount.</li></ul>
|
||
<li style="text-align: justify; line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 7px;"><span style="font-weight: bold;">Sort by Indicator</span>. By default, the chart uses sorting by the value of a category parameter, for example, by company name or status. You can make the main sorting by value by selecting <span style="font-weight: bold;">Ascending</span> or <span style="font-weight: bold;">Descending order</span> in the field. Then sorting by category will be used as an additional sort. For example, if you select the name of the deal as a category and its budget as a value, the values will be sorted by the specified amount and additionally by the name.</li><li style="text-align: justify; line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 7px;"><span style="font-weight: bold;">Show number</span>. You can limit the amount of displayed data. For example, if sorting by budget is set up, you can use this option to display the top 5 most profitable deals. It also allows you to make the chart more compact if it is not placed on a separate page.</li></ul>
|
||
<p style="text-align: justify; line-height: 1.20; margin: 7px 0 7px 34px;">To customize the limit, specify a number in the field that defines how many columns, rows, etc. there will be in the chart, depending on its type. To include data for all items in the chart, leave the field blank.</p>
|
||
<ul style="list-style-type:disc">
|
||
<li style="text-align: justify; line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 7px;"><span style="font-weight: bold;">Chart type</span>. Choose the chart type:<ul style="list-style-type:circle">
|
||
<li style="text-align: justify; line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 7px;"><span style="font-weight: bold;">Vertical Bars</span>.</li><li style="text-align: justify; line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 7px;"><span style="font-weight: bold;">Horizontal Bars</span>.</li><li style="text-align: justify; line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 7px;"><span style="font-weight: bold;">Line</span>.</li><li style="text-align: justify; line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 7px;"><span style="font-weight: bold;">Area</span>.</li><li style="text-align: justify; line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 7px;"><span style="font-weight: bold;">Pie</span>.</li><li style="text-align: justify; line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 7px;"><span style="font-weight: bold;">Doughnut</span>.</li><li style="text-align: justify; line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 7px;"><span style="font-weight: bold;">Advanced Doughnut</span>.</li><li style="text-align: justify; line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 7px;"><span style="font-weight: bold;">Multiple Doughnuts</span>.</li><li style="text-align: justify; line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 7px;"><span style="font-weight: bold;">Number Cards</span>.</li><li style="text-align: justify; line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 7px;"><span style="font-weight: bold;">Treemap</span>.</li><li style="text-align: justify; line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 7px;"><span style="font-weight: bold;">Gauge Chart</span>.</li><li style="text-align: justify; line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 7px;"><span style="font-weight: bold;">Drilldown bar chart, vertical</span>.</li><li style="text-align: justify; line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 7px;"><span style="font-weight: bold;">Drilldown bar chart, horizontal</span>.</li><li style="text-align: justify; line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 7px;"><span style="font-weight: bold;">Pipeline with drill down</span>. It is available only for <span style="color: #0000ff;"><a href="chart.html#conversion" class="topiclink">item conversion</a></span> charts.</li><li style="text-align: justify; line-height: 1.20; margin-top: 7px; margin-right: 0; margin-bottom: 7px;"><span style="font-weight: bold;">Table with drill down</span>.</li></ul></li></ul>
|
||
<ul style="list-style-type:disc">
|
||
<li style="line-height: 1.20;"><span style="font-weight: bold;">Color scheme</span>. Select the color scheme for chart visualization.</li><li style="line-height: 1.20;"><span style="font-weight: bold;">Chart size</span>. Choose one of the available options:</li></ul>
|
||
<ul style="list-style-type:disc"><ul style="list-style-type:circle">
|
||
<li style="line-height: 1.20;"><span style="font-weight: bold;">Dynamic</span>. The chart size adjusts according to the volume of displayed data.</li><li style="line-height: 1.20;"><span style="font-weight: bold;">Fixed</span>. Specify the width and height of the chart in pixels.</li></ul></li></ul>
|
||
<ol style="list-style-type:upper-roman" start="3">
|
||
<li value="3" class="p_Normal">When choosing a table as the data source, you can create a chart based on multiple values. To do this, specify additional settings:</li></ol>
|
||
<p class="p_Normal" style="margin: 0 0 0 34px;"><img alt="chart-3" width="570" height="574" style="margin:0;width:570px;height:574px;border:none" src="chart-3.png"/></p>
|
||
<ul style="list-style-type:disc">
|
||
<li class="p_Normal"><span style="font-weight: bold;">Group by several indicators</span>. This option appears when configuring a <span style="font-weight: bold;">Vertical Bars</span> or <span style="font-weight: bold;">Horizontal Bars</span> type chart. Check it to specify multiple values that will be displayed on the X-axis.<ul style="list-style-type:circle">
|
||
<li style="line-height: 1.20;"><span style="font-weight: bold;">Name of the value axis</span>. Provide a title for the Y-axis.</li><li style="line-height: 1.20;"><span style="font-weight: bold;">Performance indicators</span>. Select table properties of the <a href="360009707032.html#number" class="topiclink">Number</a> or <a href="360009707032.html#money" class="topiclink">Money</a> type whose values will be used to create the bar chart.</li></ul></li></ul>
|
||
<p class="p_Normal" style="margin: 0 0 0 34px;">To see how a vertical bar chart with grouping by multiple values looks, see the <a href="chart.html#use-report" class="topiclink">Chart use cases</a> section.</p>
|
||
<h3 class="p_Heading3"><a id="custom-filters" class="hmanchor"></a><span class="f_Heading3">Custom Filters tab</span></h3>
|
||
<p class="p_Normal">If you are customizing a chart based on data from an app or report, you will see the <span style="font-weight: bold;">Custom Filters</span> tab. Click it to specify <span style="font-weight: bold;">Filter Fields</span>:<span style="font-weight: bold;"> </span>app properties that will be used as filters for building the chart.</p>
|
||
<h3 class="p_Heading3"><a id="status-display" class="hmanchor"></a><span class="f_Heading3">Statuses Display tab</span></h3>
|
||
<p style="text-align: justify; line-height: 1.20;">The tab will appear in the widget settings window if an app with <span style="color: #0000ff;"><a href="360009920611.html" class="topiclink">configured statuses</a></span> has been selected as the data source. To have the chart formed only by items with specific statuses, check them on the tab.</p>
|
||
<p style="text-align: justify; line-height: 1.20;"><span style="font-size: 13px; color: #000000;"> </span></p>
|
||
<p style="text-align: justify; line-height: 1.20;">For <span style="color: #0000ff;"><a href="leads.html" class="topiclink">Leads</a></span> and <span style="color: #0000ff;"><a href="360012680899.html" class="topiclink">Deals</a></span> apps, you can build a chart by the selected pipelines and the statuses configured in them. In this case, each pipeline will be displayed on a separate tab. To do this:</p>
|
||
<p style="text-align: justify; line-height: 1.20;"><span style="font-size: 13px; color: #000000;"> </span></p>
|
||
<ol style="list-style-type:decimal">
|
||
<li value="1" style="text-align: justify; line-height: 1.20; margin-top: 0; margin-right: 0; margin-bottom: 0;">On the <span style="font-weight: bold;">Status Display</span> tab, enable the <span style="font-weight: bold;">Show pipelines</span> option.</li><li value="2" style="text-align: justify; line-height: 1.20; margin-top: 0; margin-right: 0; margin-bottom: 0;">Check the pipelines that you want to add to the chart.</li><li value="3" style="text-align: justify; line-height: 1.20; margin-top: 0; margin-right: 0; margin-bottom: 0;">In each pipeline, select the statuses, by the items in which the chart will be generated.</li></ol>
|
||
<p style="text-align: justify; line-height: 1.20; margin: 0 0 0 34px;"><img alt="widget-chart-status" width="694" height="584" style="margin:0;width:694px;height:584px;border:none" src="widget-chart-status.png"/></p>
|
||
<h3 class="p_Heading3"><a id="display-settings" class="hmanchor"></a><span class="f_Heading3">Display Settings tab</span></h3>
|
||
<p style="line-height: 1.28; margin: 0 0 11px 0;"><a id="drill-down" class="hmanchor"></a>You can choose <span style="font-weight: bold;">Drilldown bar chart, vertical</span> and <span style="font-weight: bold;">Drilldown bar chart, horizontal</span>, <span style="font-weight: bold;">Pipeline with drill down</span>, and <span style="font-weight: bold;">Table with drill down</span> chart types when selecting <span style="font-weight: bold;">Report</span> or <span style="font-weight: bold;">App</span> data sources in the widget. Using them, you can view the list of items by which each column in the chart is built.</p>
|
||
<p style="text-align: justify; line-height: 1.20;">In the widget settings, on the <span style="font-weight: bold;">Display Settings</span> tab, you can select the source properties that will be shown in the item list. By default, only the item name is displayed in the table. To add properties to the list with detailed information, select them on the tab.</p>
|
||
<p style="text-align: justify; line-height: 1.20;"><span style="font-size: 13px; color: #000000;"> </span></p>
|
||
<p style="text-align: justify; line-height: 1.20;">To see what a drilldown bar chart will look like, refer to <span style="color: #0000ff;"><a href="chart.html#use-report" class="topiclink">Chart use cases</a></span>.</p>
|
||
<p style="text-align: justify; line-height: 1.20;"><span style="font-size: 13px; color: #000000;"> </span></p>
|
||
<p style="line-height: 1.20;">Once the chart is configured, click <span style="font-weight: bold;">Save</span>. After that, the layout of the chart with data will be displayed on the modeling canvas. If necessary, edit the widget settings to customize the chart.</p>
|
||
<p style="text-align: justify; line-height: 1.20;"><span style="font-size: 13px; color: #000000;"> </span></p>
|
||
<p style="line-height: 1.28; margin: 0 0 11px 0;">To make the configured form available to users, click <span style="font-weight: bold;">Save</span> and <span style="font-weight: bold;">Publish</span> in the top panel of the interface designer.</p>
|
||
<h2 class="p_Heading2"><a id="use-report" class="hmanchor"></a><span class="f_Heading2">Chart use cases</span></h2>
|
||
<h3 class="p_Heading3"><span class="f_Heading3">Data from an app</span></h3>
|
||
<p class="p_Normal">Let’s see how to use a chart with the <span style="font-weight: bold;">App</span> data source. In the examples, we’ll build reports for the <span style="font-weight: bold;">Deals</span> app from the <span style="font-weight: bold;">CRM</span> workspace.</p>
|
||
<h4 class="p_Heading4"><span class="f_Heading4">Example 1</span></h4>
|
||
<p style="text-align: justify; line-height: 1.20; margin: 7px 0 16px 0;">For the <span style="font-weight: bold;">Deals</span> and <span style="font-weight: bold;">Leads</span> apps, you can customize the chart to display item conversions by status. This will allow you to track what percentage of deals are closed successfully.</p>
|
||
<p style="line-height: 1.28; margin: 0 0 11px 0;">When building a report, you can select the <span style="font-weight: bold;">Pipeline with drill down</span>, <span style="font-weight: bold;">Drilldown bar chart, vertical</span>, or <span style="font-weight: bold;">Drilldown bar chart, horizontal</span> chart type. Then you will be able to see the list of items that have moved to each of the statuses in the chart. To do this, click on the value in any column in the chart.</p>
|
||
<p class="p_Normal"><img alt="conversion-report-3" width="883" height="543" style="margin:0;width:883px;height:543px;border:none" src="conversion-report-3.png"/></p>
|
||
<p style="line-height: 1.28; margin: 0 0 11px 0;">Read more about setting up such a report in the <span style="color: #0000ff;"><a href="closing_ratio.html" class="topiclink">Conversion of leads and deals</a></span> article.</p>
|
||
<h4 class="p_Heading4"><span class="f_Heading4">Example 2 </span></h4>
|
||
<p class="p_Normal">Create a chart to view the total revenue of the sales department and track the most profitable deals. Here’s how to do it:</p>
|
||
<ol style="list-style-type:upper-roman">
|
||
<li value="1" class="p_Normal">Place the <span style="font-weight: bold;">Chart</span> widget on a separate page.</li><li value="2" class="p_Normal">Choose the <span style="font-weight: bold;">Deals</span> app as the data source. In the <span style="font-weight: bold;">Category</span> field, specify the deal’s name, and in the <span style="font-weight: bold;">Value</span> field, its budget.</li><li value="3" class="p_Normal">Select the <span style="font-weight: bold;">Advanced Doughnut</span> type.</li><li value="4" class="p_Normal">On the <span style="font-weight: bold;">Custom Filters</span> tab, add deal fields by which you want to sort the data on the page, for example, <span style="font-weight: bold;">Assigned to</span>, <span style="font-weight: bold;">Estimated closing date</span>, and <span style="font-weight: bold;">Pipeline</span>.</li><li value="5" class="p_Normal">Save and publish the page.</li></ol>
|
||
<p class="p_Normal">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.</p>
|
||
<p class="p_Normal"><img alt="chart-example-2" width="1289" height="754" style="margin:0;width:1289px;height:754px;border:none" src="chart-example-2.png"/></p>
|
||
<h3 class="p_Heading3"><span class="f_Heading3">Data from a table</span></h3>
|
||
<p class="p_Normal">To create a chart with the <span style="font-weight: bold;">Table</span> data source, follow these steps:</p>
|
||
<ol style="list-style-type:upper-roman">
|
||
<li value="1" class="p_Normal"><a href="360009924451.html" class="topiclink">Create a page</a> and open it in the <a href="interface_designer.html" class="topiclink">interface designer</a>.</li><li value="2" class="p_Normal">Go to the <span style="font-weight: bold;">Context</span> tab. Create a property of the <a href="360010201779.html" class="topiclink">Table</a> type. In its settings, add columns.</li><li value="3" class="p_Normal">Return to the <span style="font-weight: bold;">Template</span> tab. On the right panel of the designer, click <span style="font-weight: bold;">Properties</span> and drag the created property onto the modeling canvas. This is necessary so that users can populate the table with data on the page.</li><li value="4" class="p_Normal">Place the <span style="font-weight: bold;">Chart</span> widget on the modeling canvas. In the <span style="font-weight: bold;">Data source</span> field, select the <span style="font-weight: bold;">Table</span> option and specify the name of the created variable from the context. Set the parameters for building the chart, its parameters, its type, color scheme, and size.</li><li value="5" class="p_Normal">Save and publish the page.</li></ol>
|
||
<h4 class="p_Heading4"><span class="f_Heading4">Example 1</span></h4>
|
||
<p class="p_Normal">The widget can be used to display statistics of completed orders on a separate page.</p>
|
||
<p class="p_Normal">When users fill in the table columns, in the <span style="font-weight: bold;">Gauge Chart</span>, the amount of each completed order is displayed, along with the company’s total revenue.</p>
|
||
<p class="p_Normal"><img alt="chart-example-3" width="1042" height="749" style="margin:0;width:1042px;height:749px;border:none" src="chart-example-3.png"/></p>
|
||
<h4 class="p_Heading4"><a id="group-by-multiple-indicators" class="hmanchor"></a><span class="f_Heading4">Example 2</span></h4>
|
||
<p class="p_Normal">Let’s take a look at how to use the <span style="font-weight: bold;">Group by several values</span> option.</p>
|
||
<p class="p_Normal">On a separate page, add a table that displays the profit from orders on specific dates and a <span style="font-weight: bold;">Vertical Bars</span> type chart. The amounts in the table will be distributed across columns depending on the order group: wholesale, retail, or other.</p>
|
||
<p class="p_Normal">To display the profit from different order groups in separate columns on the chart, enable the <span style="font-weight: bold;">Group by several values</span> option in the widget’s settings. Choose properties of the <span style="font-weight: bold;">Money</span> type from the table as values.</p>
|
||
<p class="p_Normal">When users fill 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.</p>
|
||
<p class="p_Normal"><img alt="chart-example-4" width="1087" height="875" style="margin:0;width:1087px;height:875px;border:none" src="chart-example-4.png"/></p>
|
||
<h3 class="p_Heading3"><a id="report-data-source" class="hmanchor"></a><span class="f_Heading3">Data from a report</span></h3>
|
||
<p class="p_Normal">Reports aggregate data from multiple source apps. The <span style="font-weight: bold;">Chart</span> widget allows you to visualize this data. Read more about reports in the <a href="report.html" class="topiclink">Report</a> section.</p>
|
||
<p class="p_Normal">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.</p>
|
||
<p class="p_Normal">Let’s look at how to create a chart for a report in which <span style="font-weight: bold;">Orders</span>, <span style="font-weight: bold;">Contracts</span>, and <span style="font-weight: bold;">Invoices </span>are selected as source apps. The report contains information about orders, including related contracts and the invoice amount for each contract.</p>
|
||
<p class="p_Normal">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 <span style="font-weight: bold;">Category</span> field and the contract amount in the <span style="font-weight: bold;">Value</span> field. Choose the <span style="font-weight: bold;">Multiple Doughnuts</span> type. This allows you to view metrics for each order individually.</p>
|
||
<p class="p_Normal">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.</p>
|
||
<p class="p_Normal"><img alt="chart-example-5" width="982" height="584" style="margin:0;width:982px;height:584px;border:none" src="chart-example-5.png"/></p>
|
||
<h3 class="p_Heading3"><a id="use-process-metrics" class="hmanchor"></a><span class="f_Heading3">Process indicator data</span></h3>
|
||
<p style="text-align: justify; line-height: 1.20; margin: 7px 0 16px 0;">The <span style="color: #0000ff;"><a href="business-process-metrics.html" class="topiclink">indicator</a></span> allows you to track the efficiency of business process execution. For example, to find out how much time passes between assigning a task and its completion. To fix the value during the process, the <span style="color: #0000ff;"><a href="set-process-metrics-value.html" class="topiclink">Set indicator’s value</a></span> activity is used on the process chart. You can display the data using the <span style="font-weight: bold;">Chart</span> widget.</p>
|
||
<p style="text-align: justify; line-height: 1.28; margin: 0 0 11px 0;">Let’s assume that a manager offers additional services to clients within a separate task when making a deal. An activity is placed on the process chart after the task to track the number of service refusals using the indicator. You can customize the chart and display how many refusals are received for a certain period during the execution of process instances.</p>
|
||
<p style="text-align: justify; line-height: 1.28; margin: 0 0 11px 0;">To do this:</p>
|
||
<ol style="list-style-type:decimal">
|
||
<li value="1" style="text-align: justify; line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;"><span style="color: #0000ff;"><a href="360009924451.html" class="topiclink">Create a page</a></span> and place the <span style="font-weight: bold;">Chart</span> widget.</li><li value="2" style="text-align: justify; line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;">In the settings, select <span style="font-weight: bold;">Indicator</span> as the data source.</li><li value="3" style="text-align: justify; line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;">In the <span style="font-weight: bold;">Category</span> field, specify the indicator property that corresponds to the process step parameter being analyzed. In this example, the variable is called <span style="font-weight: bold;">Value</span>.</li><li value="4" style="text-align: justify; line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;">In the <span style="font-weight: bold;">Chart indicator</span> field, specify the indicator property that contains the values obtained from the process. In this case, it is <span style="font-weight: bold;">Amount</span>.</li><li value="5" style="text-align: justify; line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;">You can leave the rest of the settings as default.</li><li value="6" style="text-align: justify; line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;">On the <span style="font-weight: bold;">Custom Filters</span> tab, select filtering by event time to see the number of instances with refused services for the period.</li><li value="7" style="text-align: justify; line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;">Save the widget and publish the page.</li></ol>
|
||
<p style="text-align: justify; line-height: 1.28; margin: 0 0 11px 0;"><img alt="charts-10" width="413" height="362" style="margin:0;width:413px;height:362px;border:none" src="charts-10.png"/></p>
|
||
|
||
<div class="bottom-nav">
|
||
|
||
<a id="prev-link" class="topic__navi_prev" href="todo-widget.html">
|
||
<span class="bottom-nav__arrow bottom-nav__arrow--prev"></span> <span
|
||
class="bottom-nav__link">todo-widget.html</span>
|
||
</a>
|
||
|
||
|
||
<a id="next-link" class="topic__navi_next" href="widget_reports.html">
|
||
<span class="bottom-nav__link">widget_reports.html</span> <span
|
||
class="bottom-nav__arrow bottom-nav__arrow--next"></span>
|
||
</a>
|
||
|
||
</div>
|
||
<!-- добавляет на страницу строку блок Была ли статья полезной? -->
|
||
<div class="feedback" id="feedback"><div class="feedback-help"><span><b>Was this helpful?</b></span><form action="" method="POST" class="feedback-form" id="feedback-form"><div class="feedback__popup feedback__popup-response" id="feedback__popup_thx" style="display: none;">Thanks for your feedback!</div><div class="feedback__popup" id="feedback__popup_why" style="display: none;"><div class="feedback__popup-header">Please specify why:</div><input type="radio" name="category" id="bad_recommendation" value="bad_recommendation"><label for="bad_recommendation">Recommendations did not help me</label><input type="radio" name="category" id="difficult_text" value="difficult_text"><label for="difficult_text">Article is hard to understand</label><input type="radio" name="category" id="no_answer" value="no_answer"><label for="no_answer">Didn`t answer my question</label><input type="radio" name="category" id="bad_header" value="bad_header"><label for="bad_header">Content does not match the topic</label><input type="radio" name="category" id="other_reason" value="other_reason"><label for="other_reason">Other</label></div><div class="feedback__popup" id="feedback__popup-other" style="display: none;"><div class="feedback__popup-header">How we can improve it?</div><textarea class="feedback__textarea" name="other" id=""></textarea><input type="submit" class="feedback__other-btn" value="Submit"></div><div class="feedback-form__btn-group"><input type="radio" name="useful" id="feedback__useful_yes" value="true"><label for="feedback__useful_yes"><img src="like.svg" class="small-img" alt="like"><spanclass="feedback-form__btn-group_yes-btn">Yes</spanclass="feedback-form__btn-group_yes-btn"></label><input type="radio" name="useful" id="feedback__useful_no" value="false"><label for="feedback__useful_no"><img src="dislike.svg" class="small-img" alt="dislike"><spanclass="feedback-form__btn-group_no-btn">No</spanclass="feedback-form__btn-group_no-btn"></label></div><select name="category"><option disabled="">Please specify why</option><option value="bad_recommendation" selected="">Recommendations did not help me</option><option value="difficult_text">Article is hard to understand</option><option value="no_answer">Didn`t answer my question</option><option value="bad_header">Content does not match the topic</option><option value="other_reason">Other</option></select><input type="submit"></form></div><div class="found_typo"><p style="margin: 0px; margin-top: 16px !important;"><span><b>Found a typo?</b></span> Select it and press <i>Ctrl+Enter</i> to send us feedback</p></div></div>
|
||
|
||
</section>
|
||
</div>
|
||
<aside class="article__sidebar" style="display:none">
|
||
<input type="checkbox" />
|
||
<div class="article__arrow"></div>
|
||
<div class="table-of-contents elma365-right" id="toc2Content">
|
||
<h3 class="h3-toc">In this topic</h3>
|
||
<nav id="toc2"></nav>
|
||
</div>
|
||
</aside>
|
||
</div>
|
||
</article>
|
||
</main>
|
||
<footer class="footer">
|
||
<div class="footer-container">
|
||
<div class="footer-mobile">
|
||
|
||
<ul class="footer-mobile__list"><li><a href="https://brix365.com/en/" target="_blank">BRIX</a></li><li><a href="https://tssdk.brix365.com/en/latest/" target="_blank">SDK</a></li><li><a href="https://api.brix365.com/en/" target="_blank">API</a></li></ul><ul class="footer-mobile__list"><li><a href="https://brix365.com/en/help/platform/get-trial.html">Platform</a></li><li><a href="https://brix365.com/en/help/ecm/ecm-functions.html">ECM</a></li><li><a href="https://brix365.com/en/help/service/service-functions.html">Service</a></li><li><a href="https://brix365.com/en/help/projects/projects-functions.html">Projects</a></li></ul>
|
||
|
||
|
||
</div>
|
||
<div class="footer-wrap">
|
||
|
||
<div><span class="mobile-question-popup">Send feedback</span><form method="POST" action class="question__popup question-xs" id="question__popup"><div class="question-wrap"><span class="close"></span><span class="title">Ask a question</span><label for="help_question" style="display: none;"></label><textarea name="help_question" id="help_question"></textarea><input type="submit" value="Send"></div></form><div class="hidden fade-in question-success-xs">Sent</div></div>
|
||
|
||
<div class="footer-flex-b">
|
||
<span class="footer-copy">© 2025 BRIX</span>
|
||
<ul class="footer-list">
|
||
|
||
<li class="footer-item">
|
||
<a href="#" class="arrow-top" style="display: block;"></a>
|
||
</li>
|
||
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</footer>
|
||
<iframe name="hmnavigation" style="display:none!important"></iframe>
|
||
<script src="./jquery-ui.js"></script>
|
||
<!--script src="//cdn.jsdelivr.net/npm/featherlight@1.7.14/release/featherlight.min.js" type="text/javascript" charset="utf-8"></script-->
|
||
<script src="./jquery.tocify.min.js"></script>
|
||
<script src="./TypoReporter.min.js"></script>
|
||
<script src="./google-search.js"></script>
|
||
<script src="./main.js"></script>
|
||
</body>
|
||
|
||
</html>
|