This commit is contained in:
@ -1,19 +1,20 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html lang="ru">
|
||||
|
||||
<head>
|
||||
<title>Chart</title>
|
||||
<title>График</title>
|
||||
<meta name="generator" content="Help+Manual" />
|
||||
<meta name="keywords" content="" />
|
||||
<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="description" content="Виджет отображает данные в виде графика. В качестве источника данных можно выбрать:" />
|
||||
<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="" />
|
||||
<meta property="og:title" content="Cправка по Low-code платформе ELMA365" />
|
||||
<meta property="og:url" content="https://elma365.com/ru/help" />
|
||||
<meta property="og:image" content="" />
|
||||
<meta property="og:site_name" content="ELMA365" />
|
||||
<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" />
|
||||
@ -23,6 +24,7 @@
|
||||
<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>
|
||||
@ -34,16 +36,16 @@
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-M6ETBEC1R9"></script><script>window.dataLayer=window.dataLayer || []; function gtag(){dataLayer.push(arguments);}gtag('js', new Date()); gtag('config', 'G-M6ETBEC1R9');</script>
|
||||
<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 class="header__logo" href="https://elma365.com/ru/help">
|
||||
<img src="./logo.svg" alt="header logo">
|
||||
</a>
|
||||
<!-- <div class="hero__search-form" id="search-panel">
|
||||
<form class="search-form" onsubmit="ym(83180416,'reachGoal','poisk')">
|
||||
<form class="search-form" onsubmit="ym(83179930,'reachGoal','poisk')">
|
||||
<label class="search-form__label">
|
||||
<span id="reset-search" class="search__icon"></span>
|
||||
<input class="search-form__input" type="text">
|
||||
@ -63,7 +65,7 @@
|
||||
</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>
|
||||
<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://elma365.com/ru/help/platform/get-trial.html">Платформа</a></li><li><a class="project-link" href="https://elma365.com/ru/help/ecm/ecm-functions.html">ECM</a></li><li><a class="project-link" href="https://elma365.com/ru/help/crm/crm_overview.html">CRM</a></li><li><a class="project-link" href="https://elma365.com/ru/help/service/service-functions.html">Service</a></li><li><a class="project-link" href="https://elma365.com/ru/help/projects/projects-functions.html">Проекты</a></li><li><a class="project-link" href="https://elma365.com/ru/help/business_solutions/-elma365-store.html">Бизнес-решения</a></li></ul></span></li><li><a href="https://api.elma365.com/ru/"target="_blank">API</a></li><li><a href="https://tssdk.elma365.com/"target="_blank">SDK</a></li><li><a href="https://community.elma365.com/" target="_blank">Community</a></li><li><a href="https://elma-academy.com/ru/" target="_blank">Академия</a></li><li><a href="https://elma365.com/ru/" target="_blank">Сайт ELMA365</a></li></ul>
|
||||
|
||||
|
||||
</div>
|
||||
@ -78,8 +80,8 @@
|
||||
|
||||
<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 class="header__logo" href="https://elma365.com/ru/help">
|
||||
<img src="./logo-light.svg">
|
||||
</a>
|
||||
<span class="sidebar__close elma-365-close" id="close"></span>
|
||||
</div>
|
||||
@ -92,15 +94,15 @@
|
||||
<div class="article-inner">
|
||||
<div class="content">
|
||||
<header class="article__header">
|
||||
<div class="article__bread" style="display:flex; gap:10px;">
|
||||
<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>
|
||||
<p>Low-code дизайнер > <a href="interface_settings.html">Создание интерфейсов</a> > Типы виджетов > Виджеты отчётов / График</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="topic__title"><h1 class="p_Heading1"><span class="f_Heading1">Chart</span></h1>
|
||||
<div class="topic__title"><h1 class="p_Heading1"><span class="f_Heading1">График</span></h1>
|
||||
</div>
|
||||
|
||||
</header>
|
||||
@ -109,114 +111,114 @@
|
||||
<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>
|
||||
<p style="margin: 0 0 11px 0;">Виджет отображает данные в виде графика. В качестве источника данных можно выбрать:</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>
|
||||
<li style="margin-top: 0; margin-right: 0; margin-bottom: 11px;">приложение из любого раздела;</li><li style="margin-top: 0; margin-right: 0; margin-bottom: 11px;">переменную типа <a href="360010201779.html" class="topiclink">Таблица</a>, созданную в <span style="color: #0000ff;"><a href="context_types.html#widget-context" class="topiclink">контексте страницы</a></span>, на которой размещается график;</li><li style="margin-top: 0; margin-right: 0; margin-bottom: 11px;">компонент системы <a href="report.html" class="topiclink">Отчет</a>, который собирает информацию из нескольких приложений</li><li style="margin-top: 0; margin-right: 0; margin-bottom: 11px;">компонент <a href="business-process-metrics.html" class="topiclink">Показатель</a>, с помощью которого можно выявить эффективность выполнения определённых этапов бизнес-процесса. </li></ul>
|
||||
<p style="margin: 0 0 11px 0;">Например, с помощью виджета вы можете построить линейную диаграмму годового дохода компании или на круговом графике показать вклад каждого менеджера в общий объём продаж. </p>
|
||||
<h2 class="p_Heading2"><a id="settings" class="hmanchor"></a><span class="f_Heading2">Создание графика</span></h2>
|
||||
<p style="line-height: 1.28; margin: 0 0 11px 0;">Чтобы настроить виджет, откройте <a href="360009918011.html" class="topiclink">форму приложения</a> или <a href="360027211631.html" class="topiclink">страницу</a> в <a href="interface_designer.html" class="topiclink">дизайнере интерфейсов</a>. Перетащите виджет <span style="font-weight: bold;">График</span> с правой панели на поле для моделирования или нажмите кнопку <span style="font-weight: bold;">+ Виджет</span>. Откроется окно настроек.</p>
|
||||
<h3 class="p_Heading3"><span class="f_Heading3">Вкладка «График»</span></h3>
|
||||
<p style="line-height: 1.28; margin: 0 0 11px 0;">Укажите общие настройки графика:</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>
|
||||
<li value="1" class="p_Normal">В поле <span style="font-weight: bold;">Источник данных</span> выберите, какие данные вы хотите просматривать в виде графика:</li></ol>
|
||||
<p class="p_Normal" style="margin: 0 0 0 34px;"><img alt="widget-chart-1" width="676" height="410" style="margin:0;width:676px;height:410px;border:none" src="widget-chart-1.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>
|
||||
<li style="margin-top: 7px; margin-right: 0; margin-bottom: 7px;"><span style="font-weight: bold;">Приложение</span> — включите опцию, чтобы выбрать любое приложение и построить график по его данным. Ознакомьтесь с примером настройки графика в разделе <a href="chart.html#use-cases" class="topiclink">«Данные из приложения»</a>; </li><li style="margin-top: 7px; margin-right: 0; margin-bottom: 7px;"><span style="font-weight: bold;">Таблица</span> — опция доступна при размещении виджета на отдельной странице. Отметьте её, а затем укажите переменную типа <a href="360010201779.html" class="topiclink">Таблица</a> из <a href="context_types.html#widget-context" class="topiclink">контекста страницы</a>. График строится на основании данных из таблицы. Пример настройки графика приведён в разделе <a href="chart.html#group-by-several-indicators" class="topiclink">«Примеры использования графика»</a>;</li><li style="margin-top: 7px; margin-right: 0; margin-bottom: 7px;"><span style="font-weight: bold;">Отчет</span> — включите опцию, чтобы выбрать созданный отчёт, агрегирующий данные из нескольких приложений. Посмотрите пример настройки графика в разделе <a href="chart.html#use-report" class="topiclink">«Примеры использования графика»</a>;</li><li style="margin-top: 7px; margin-right: 0; margin-bottom: 7px;"><span style="font-weight: bold;">Показатель</span> — включите опцию и выберите опубликованный показатель, который применяется в бизнес-процессе для отслеживания данных. С примером настройки графика можно ознакомиться в разделе <a href="chart.html#use-process-metrics" class="topiclink">«Данные показателя процесса»</a>.</li></ul>
|
||||
<ol style="list-style-type:upper-roman" start="2">
|
||||
<li value="2">Укажите настройки графика:</li></ol>
|
||||
<p style="margin: 0 0 0 34px;"><img alt="widget-chart-2" width="910" height="762" style="margin:0;width:910px;height:762px;border:none" src="widget-chart-2.png"/></p>
|
||||
<ul style="list-style-type:disc">
|
||||
<li style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;"><span style="font-weight: bold;">Измерение</span> — выберите поле, по которому необходимо построить график. Если указать свойство типа <a href="360009707032.html#category" class="topiclink">Категория</a>, график сформируется по заданным в свойстве вариантам.</li></ul>
|
||||
<p style="line-height: 1.28; margin: 0 0 11px 34px;">Обратите внимание на особенности использования свойства типа <a href="360009707032.html#app" class="topiclink">Приложение</a> в качестве параметра измерения: </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>
|
||||
<li style="margin-top: 0; margin-right: 0; margin-bottom: 11px;">источник графика <span style="font-weight: bold;">Приложение</span> — если на форме есть поле типа <span style="font-weight: bold;">Приложение</span>, параметром измерения можно указать вложенные свойства этого приложения, но не ссылку на определённый элемент. Например, в сделке присутствует запись связанного с ней контакта. Вы можете выбрать любое поле из контекста приложения <span style="font-weight: bold;">Контакты</span> и построить по нему график;</li><li style="margin-top: 0; margin-right: 0; margin-bottom: 11px;">источник графика <span style="font-weight: bold;">Отчет</span> — в качестве параметра измерения можно использовать колонку отчёта, созданную из поля типа <span style="font-weight: bold;">Приложение</span>. В этом случае в графике будет отображаться название связанного элемента. Например, в отчёте из контекста заказа в виде колонки добавлена компания‑заказчик. Вы можете выбрать эту колонку и отображать в графике название компании;</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>
|
||||
<li style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;"><span style="font-weight: bold;">Показатель</span> — <span style="font-size: 13px; font-family: Inter;">выберите показатель,</span> по которому будет строиться график. <span style="font-size: 13px; font-family: Inter;">Укажите значение </span><span style="font-size: 13px; font-family: Inter; font-weight: bold;">Количество</span><span style="font-size: 13px; font-family: Inter;"> или свойство типа</span> <a href="360009707032.html#number" class="topiclink">Число</a>, <a href="360009707032.html#money" class="topiclink">Деньги</a>. <span style="font-size: 13px; font-family: Inter;">В зависимости от источника данных для выбора доступны: для приложения свойства из его контекста, для таблицы — её колонки, для отчёта — колонки таблицы, в которой агрегированы данные.</span></li></ul>
|
||||
<p style="line-height: 1.28; margin: 0 0 11px 34px;"><span style="font-size: 13px; font-family: Inter;">После выбора свойства напротив его названия укажите</span> параметр для построения графика: значение поля, сумму значений или минимальное, максимальное, среднее значение. Обратите внимание, если в поле <span style="font-weight: bold;">Измерение</span> выбрано свойство типа <span style="font-weight: bold;">Дата</span>, в качестве параметра для показателя нельзя указать опцию <span style="font-weight: bold;">Значение</span>;</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>
|
||||
<li style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;"><span style="font-weight: bold;">Дополнительный показатель (Ось Y)</span> — для линейных графиков укажите дополнительный показатель, который будет отображаться на оси Y;</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>
|
||||
<li style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;"><a id="conversion" class="hmanchor"></a><span style="font-size: 15px; font-family: Inter; font-weight: bold;">Тип расчета</span><span style="font-size: 15px; font-family: Inter;"> — настройка появляется, если в качестве измерения выбрано поле </span><span style="font-size: 15px; font-family: Inter; font-weight: bold;">Статус</span><span style="font-size: 15px; font-family: Inter;">, в качестве показателя — </span><span style="font-size: 15px; font-family: Inter; font-weight: bold;">Количество</span><span style="font-size: 15px; font-family: Inter;">:</span><ul style="list-style-type:circle">
|
||||
<li style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;"><span style="font-size: 15px; font-family: Inter; font-weight: bold;">Количество элементов </span><span style="font-size: 15px; font-family: Inter;">— показывается количество элементов, находящихся в каждом статусе;</span></li><li style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;"><span style="font-size: 15px; font-family: Inter; font-weight: bold;">Конверсия элементов</span><span style="font-size: 15px; font-family: Inter;">, </span><span style="font-size: 15px; font-family: Inter; font-weight: bold;">Конверсия элементов (продажи) </span><span style="font-size: 15px; font-family: Inter;">— отображается соотношение количества элементов, прошедших через каждый статус. Подробнее о настройке графиков по конверсии элементов читайте в статье </span><span style="font-size: 15px; font-family: Inter; color: #0563c1;"><a href="/ru/help/crm/closing_ratio.html" target="_blank" class="weblink">«Конверсия сделок и лидов»</a></span><span style="font-size: 15px; font-family: Inter;">.</span></li></ul>
|
||||
<li style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;"><span style="font-size: 15px; font-family: Inter; font-weight: bold;">Представление данных</span><span style="font-size: 15px; font-family: Inter;"> — выберите, как отображать значения по показателю графика:</span><ul style="list-style-type:circle">
|
||||
<li style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;"><span style="font-size: 15px; font-family: Inter; font-weight: bold;">Единицы </span><span style="font-size: 15px; font-family: Inter;">— как число, например, как количество элементов или сумму;</span></li><li style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;"><span style="font-size: 15px; font-family: Inter; font-weight: bold;">Проценты </span><span style="font-size: 15px; font-family: Inter;">— как процент, например, как долю от общего количества элементов или общей суммы.</span></li></ul>
|
||||
<li style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;"><span style="font-size: 15px; font-family: Inter; font-weight: bold;">Сортировка по показателю</span><span style="font-size: 15px; font-family: Inter;"> — по умолчанию в графике используется сортировка по значениям параметра измерения, например, по названию компании или статусу. Вы можете сделать основной сортировку по показателю, выбрав в поле </span><span style="font-size: 15px; font-family: Inter; font-weight: bold;">По возрастанию</span><span style="font-size: 15px; font-family: Inter;"> или </span><span style="font-size: 15px; font-family: Inter; font-weight: bold;">По убыванию</span><span style="font-size: 15px; font-family: Inter;">. Тогда сортировка по измерению будет использоваться как дополнительная. Например, если в качестве измерения выбрано название сделки, в качестве показателя — её бюджет, то значения будут сортироваться по указанной сумме и дополнительно по наименованию;</span></li><li style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;"><span style="font-size: 15px; font-family: Inter; font-weight: bold;">Отображать количество</span><span style="font-size: 15px; font-family: Inter;"> — вы можете ограничить объём отображаемых данных. Например, при настроенной сортировке по бюджету с помощью этой опции можно отобразить топ‑5 самых прибыльных сделок. Также это позволяет сделать график более компактным, если он размещён не на отдельной странице.</span></li></ul>
|
||||
<p style="line-height: 1.28; margin: 0 0 11px 34px;"><span style="font-size: 15px; font-family: Inter;">Для настройки ограничения укажите в поле число, которое определит, сколько в графике будет столбцов, строк и т. п., в зависимости от его типа. Чтобы в график включались данные по всем элементам, оставьте поле пустым;</span></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>
|
||||
<li style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;"><span style="font-weight: bold;">Тип графика </span>— укажите тип графика:<ul style="list-style-type:circle">
|
||||
<li style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;"><span style="font-weight: bold;">Столбчатый вертикальный</span>;</li><li style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;"><span style="font-weight: bold;">Столбчатый горизонтальный</span>;</li><li style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;"><span style="font-weight: bold;">Линейный</span>;</li><li style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;"><span style="font-weight: bold;">Линейный с областью</span>;</li><li style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;"><span style="font-weight: bold;">Круговой</span>;</li><li style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;"><span style="font-weight: bold;">Кольцевой</span>;</li><li style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;"><span style="font-weight: bold;">Продвинутый круговой</span>;</li><li style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;"><span style="font-weight: bold;">Сетка из круговых</span>;</li><li style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;"><span style="font-weight: bold;">Числовые карты</span>;</li><li style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;"><span style="font-weight: bold;">Древовидная карта</span>;</li><li style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;"><span style="font-weight: bold;">Спидометр</span>;</li><li style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;"><span style="font-weight: bold;">Столбчатый вертикальный с drill down</span>;</li><li style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;"><span style="font-weight: bold;">Столбчатый горизонтальный с drill down</span>;</li><li style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;"><span style="font-size: 15px; font-family: Inter; font-weight: bold;">Воронка с drill down</span><span style="font-size: 15px; font-family: Inter;"> — доступен только для графиков по </span><span style="font-size: 15px; font-family: Calibri,Vectora,'Droid Sans','Open Sans',Frutiger,sans-serif; color: #0563c1;"><a href="chart.html#conversion" class="topiclink">конверсии элементов</a></span><span style="font-size: 15px; font-family: Inter;">;</span></li><li style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;"><span style="font-size: 15px; font-family: Inter; font-weight: bold;">Таблица с drill down</span><span style="font-size: 15px; font-family: Inter;">.</span></li></ul></li></ul>
|
||||
<p class="p_CodeExample" style="page-break-inside: avoid;"><span class="f_CodeExample">Начало внимание</span></p>
|
||||
<p style="line-height: 1.28; margin: 0 0 11px 0;"><a href="chart.html#drill-down" class="topiclink">Типы графиков с drill down</a> применяются для источников данных <span style="font-weight: bold;">Отчет</span> и <span style="font-weight: bold;">Приложение</span> и доступны только для пользователей с <a href="licenses-crm.html" class="topiclink">лицензией решения CRM</a>, в котором включены приложения <a href="leads.html" class="topiclink">Лиды</a> и <a href="360012680899.html" class="topiclink">Сделки</a>.</p>
|
||||
<p class="p_CodeExample" style="page-break-inside: avoid;"><span class="f_CodeExample">Конец внимание</span></p>
|
||||
<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>
|
||||
<li style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;"><span style="font-weight: bold;">Цветовая схема </span>— выберите цветовое отображение графика;</li><li style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;"><span style="font-weight: bold;">Размер графика</span> — выберите одну из доступных опций:<ul style="list-style-type:circle">
|
||||
<li style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;"><span style="font-weight: bold;">Динамический</span> — размер графика подстраивается под объём отображаемых данных;</li><li style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;"><span style="font-weight: bold;">Фиксированный</span> — укажите<span style="font-weight: bold;"> </span>ширину и высоту графика в пикселях. </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>
|
||||
<li value="3" style="line-height: 1.28; margin-top: 0; margin-right: 0; margin-bottom: 11px;">При выборе таблицы в качестве источника данных вы можете построить график по нескольким показателям. Для этого укажите дополнительные настройки:</li></ol>
|
||||
<p style="line-height: 1.28; margin: 0 0 11px 34px;"><img alt="widget-chart-3" width="674" height="818" style="margin:0;width:674px;height:818px;border:none" src="widget-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>
|
||||
<li style="margin-top: 0; margin-right: 0; margin-bottom: 7px;"><span style="font-weight: bold;">Группировка по нескольким показателям</span> — опция появляется, если вы настраиваете <span style="font-weight: bold;">Столбчатый вертикальный</span> или <span style="font-weight: bold;">Столбчатый горизонтальный</span> график. Отметьте её, чтобы указать несколько показателей, которые будут отображаться на оси X; <ul style="list-style-type:circle">
|
||||
<li style="margin-top: 0; margin-right: 0; margin-bottom: 0;"><span style="font-weight: bold;">Название оси показателей</span> — укажите название для оси Y;</li><li style="margin-top: 7px; margin-right: 0; margin-bottom: 7px;"><span style="font-weight: bold;">Показатели</span> — выберите свойства таблицы типа <a href="360009707032.html" class="topiclink">Число</a> или <a href="360009707032.html" class="topiclink">Деньги</a>, по значениям которых будет построен столбчатый график. </li></ul></li></ul>
|
||||
<p style="margin: 7px 0 7px 0;">Как будет выглядеть столбчатый график с группировкой по нескольким показателям, смотрите в разделе <a href="chart.html#use-table" class="topiclink">«Примеры использования графика»</a>.</p>
|
||||
<h3 class="p_Heading3"><a id="custom-filters" class="hmanchor"></a><span class="f_Heading3">Вкладка «Пользовательские фильтры»</span></h3>
|
||||
<p style="line-height: 1.28; margin: 0 0 11px 0;">Если вы настраиваете график по данным из приложения, отчёта или показателя, вы увидите вкладку <span style="font-weight: bold;">Пользовательские фильтры</span>. Перейдите на неё, чтобы указать <span style="font-weight: bold;">Поля для фильтрации </span>— свойства приложения, которые будут использоваться в качестве фильтров для построения графика.</p>
|
||||
<h3 class="p_Heading3"><a id="status-display" class="hmanchor"></a><span class="f_Heading3">Вкладка «Отображение статусов»</span></h3>
|
||||
<p style="margin: 7px 0 7px 0;">Вкладка появится в окне настроек виджета, если в качестве источника данных было выбрано приложение с <a href="360009920611.html" class="topiclink">настроенными статусами</a>. Чтобы график формировался только по элементам в определённых статусах, отметьте их на вкладке. </p>
|
||||
<p style="margin: 7px 0 7px 0;">Для приложений <a href="leads.html" class="topiclink">Лиды</a> и <a href="360012680899.html" class="topiclink">Сделки</a> график можно построить по выбранным воронкам и настроенным в них статусам. При этом каждая воронка будет отображаться на отдельной вкладке. Для этого:</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>
|
||||
<li value="1" style="margin-top: 7px; margin-right: 0; margin-bottom: 7px;">На вкладке <span style="font-weight: bold;">Отображение статусов</span> включите опцию <span style="font-weight: bold;">Отображать воронки</span>.</li><li value="2" style="margin-top: 7px; margin-right: 0; margin-bottom: 7px;">Отметьте воронки, которые нужно добавить в график.</li><li value="3" style="margin-top: 7px; margin-right: 0; margin-bottom: 7px;">В каждой воронке выберите статусы, по элементам в которых будет формироваться график.</li></ol>
|
||||
<p style="margin: 7px 0 7px 35px;"><img alt="widget-chart-status" width="1071" height="566" style="margin:0;width:1071px;height:566px;border:none" src="widget-chart-status.png"/></p>
|
||||
<h3 class="p_Heading3"><a id="display-settings" class="hmanchor"></a><span class="f_Heading3">Вкладка «Настройки отображения»</span></h3>
|
||||
<p style="margin: 7px 0 7px 0;"><a id="drill-down" class="hmanchor"></a>С <a href="licenses-crm.html" class="topiclink">лицензией решения CRM</a>, включающего в себя приложения <span style="font-weight: bold;">Лиды</span> и <span style="font-weight: bold;">Сделки</span>, и при выборе источников данных <span style="font-weight: bold;">Отчет</span> или <span style="font-weight: bold;">Приложение</span> в виджете доступны типы графиков <span style="font-weight: bold;">Столбчатый вертикальный с drill down</span>, <span style="font-weight: bold;">Столбчатый горизонтальный с drill down</span>, <span style="font-size: 15px; font-family: Inter; font-weight: bold;">Воронка с drill down</span><span style="font-size: 15px; font-family: Inter;"> и </span><span style="font-size: 15px; font-family: Inter; font-weight: bold;">Таблица с drill down</span>. С их помощью можно просмотреть список элементов, по которым построен каждый столбец в готовом графике. </p>
|
||||
<p style="margin: 7px 0 7px 0;">В настройках виджета на вкладке <span style="font-weight: bold;">Настройки отображения</span> выбираются свойства источника, которые будут показаны в списке элементов. По умолчанию в таблице отображается только название элемента. Чтобы добавить свойства в список с детальной информацией, выберите их на вкладке. </p>
|
||||
<p style="margin: 7px 0 7px 0;">Как будет выглядеть столбчатый график с drill down, смотрите <span style="color: #394149;">в разделе </span><a href="chart.html#use-cases" class="topiclink">«Примеры использования графика»</a><span style="color: #394149;">.</span></p>
|
||||
<p class="p_Normal">Для завершения настроек графика нажмите <span style="font-weight: bold;">Сохранить</span>. После этого на поле для моделирования отобразится макет графика с данными. <span style="font-family: Inter; color: #394149;">При необходимости отредактируйте настройки виджета, чтобы изменить график.</span></p>
|
||||
<p class="p_Normal"><span style="color: #212529; background-color: #ffffff;">Чтобы настроенная форма стала доступна пользователям, нажмите </span><span style="font-weight: bold; color: #212529; background-color: #ffffff;">Сохранить</span><span style="color: #212529; background-color: #ffffff;"> и </span><span style="font-weight: bold; color: #212529; background-color: #ffffff;">Опубликовать </span><span style="color: #212529; background-color: #ffffff;">на верхней панели дизайнера интерфейсов</span>.</p>
|
||||
<h2 class="p_Heading2"><a id="use-cases" class="hmanchor"></a><span class="f_Heading2">Примеры использования графика</span></h2>
|
||||
<h3 class="p_Heading3"><span class="f_Heading3">Данные из приложения</span></h3>
|
||||
<p style="line-height: 1.28; margin: 0 0 11px 0;"><span style="font-family: Inter; color: #394149;">Рассмотрим, как построить график с источником данных </span><span style="font-family: Inter; font-weight: bold; color: #394149;">Приложение</span><span style="font-family: Inter; color: #394149;">, на примере отчётов по приложению </span><span style="font-family: Inter; font-weight: bold; color: #394149;">Сделки</span><span style="font-family: Inter; color: #394149;">.</span></p>
|
||||
<p class="p_CodeExample" style="page-break-inside: avoid;"><span class="f_CodeExample">начало внимание</span></p>
|
||||
<p style="line-height: 1.28; margin: 0 0 11px 0;"><span style="font-family: Inter; color: #394149;">Использовать приложения </span><span style="font-family: Inter; font-weight: bold; color: #394149;">Лиды</span><span style="font-family: Inter; color: #394149;"> и</span><span style="font-family: Inter; font-weight: bold; color: #394149;"> Сделки</span><span style="font-family: Inter; color: #394149;"> в виджете </span><span style="font-family: Inter; font-weight: bold; color: #394149;">График</span><span style="font-family: Inter; color: #394149;"> можно только при наличии </span><span style="font-family: Inter; color: #0000ff;"><a href="licenses-crm.html" class="topiclink">лицензии решения CRM</a></span><span style="font-size: 15px; color: #394149;">, в котором включены эти приложения.</span></p>
|
||||
<p class="p_CodeExample" style="page-break-inside: avoid;"><span class="f_CodeExample">конец внимание</span></p>
|
||||
<h4 class="p_Heading4"><span class="f_Heading4">Пример 1</span></h4>
|
||||
<p style="margin: 0 0 11px 0;"><span style="color: #394149;">Для приложений </span><span style="font-weight: bold; color: #394149;">Сделки</span><span style="color: #394149;"> и </span><span style="font-weight: bold; color: #394149;">Лиды</span><span style="color: #394149;"> вы можете настроить график для отображения конверсии элементов по статусам. Это позволит отследить, какой процент сделок закрывается успешно.</span></p>
|
||||
<p style="line-height: 1.28; margin: 0 0 11px 0;"><span style="font-size: 15px; color: #394149;">При настройке отчёта вы можете выбрать тип графика </span><span style="font-size: 15px; font-weight: bold; color: #394149;">Воронка с drill down</span><span style="font-size: 15px; color: #394149;">, </span><span style="font-size: 15px; font-weight: bold; color: #394149;">Столбчатый горизонтальный с drill down </span><span style="font-size: 15px; color: #394149;">или </span><span style="font-size: 15px; font-weight: bold; color: #394149;">Столбчатый вертикальный с drill down</span><span style="font-size: 15px; color: #394149;">. Тогда появится возможность посмотреть список элементов, перешедших в каждый из статусов на графике. Для этого в готовом графике нажмите на значение в любом столбце.</span></p>
|
||||
<p style="line-height: 1.28; margin: 0 0 11px 0;"><img alt="closing_ratio-2" width="1010" height="512" style="margin:0;width:1010px;height:512px;border:none" src="closing_ratio-2.png"/></p>
|
||||
<p class="p_Normal"><span style="font-family: Inter; color: #394149;">Подробнее о настройке такого отчёта читайте в статье</span> <a href="closing_ratio.html" class="topiclink">«Конверсия сделок и лидов»</a>.</p>
|
||||
<h4 class="p_Heading4"><span class="f_Heading4">Пример 2</span></h4>
|
||||
<p style="margin: 0 0 11px 0;"><span style="font-size: 13px; font-family: Inter; color: #394149;">Постройте график для просмотра общей выручки отдела продаж и отслеживания наиболее прибыльных сделок. Для этого:</span></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>
|
||||
<li value="1" style="margin-top: 0; margin-right: 0; margin-bottom: 11px;"><span style="font-size: 13px; font-family: Inter; color: #394149;">Разместите виджет </span><span style="font-size: 13px; font-family: Inter; font-weight: bold; color: #394149;">График</span><span style="font-size: 13px; font-family: Inter; color: #394149;"> на отдельной странице. </span></li><li value="2" style="margin-top: 0; margin-right: 0; margin-bottom: 11px;"><span style="font-size: 13px; font-family: Inter; color: #394149;">В качестве источника данных выберите приложение </span><span style="font-size: 13px; font-family: Inter; font-weight: bold; color: #394149;">Сделки</span><span style="font-size: 13px; font-family: Inter; color: #394149;">. В поле </span><span style="font-size: 13px; font-family: Inter; font-weight: bold; color: #394149;">Измерение</span><span style="font-size: 13px; font-family: Inter; color: #394149;"> укажите название сделки, а в поле </span><span style="font-size: 13px; font-family: Inter; font-weight: bold; color: #394149;">Показатель </span><span style="font-size: 13px; font-family: Inter; color: #394149;">— её бюджет. </span></li><li value="3" style="margin-top: 0; margin-right: 0; margin-bottom: 11px;"><span style="font-size: 13px; font-family: Inter; color: #394149;">Выберите тип графика </span><span style="font-size: 13px; font-family: Inter; font-weight: bold; color: #394149;">Продвинутый круговой</span><span style="font-size: 13px; font-family: Inter; color: #394149;">. </span></li><li value="4" style="margin-top: 0; margin-right: 0; margin-bottom: 11px;"><span style="font-size: 13px; font-family: Inter; color: #394149;">На вкладке </span><span style="font-size: 13px; font-family: Inter; font-weight: bold; color: #394149;">Пользовательские фильтры</span><span style="font-size: 13px; font-family: Inter; color: #394149;"> добавьте поля сделки, по которым можно будет сортировать данные на странице, например, </span><span style="font-size: 13px; font-family: Inter; font-weight: bold; color: #394149;">Ответственный</span><span style="font-size: 13px; font-family: Inter; color: #394149;">, </span><span style="font-size: 13px; font-family: Inter; font-weight: bold; color: #394149;">Дата поставки</span><span style="font-size: 13px; font-family: Inter; color: #394149;">, </span><span style="font-size: 13px; font-family: Inter; font-weight: bold; color: #394149;">Воронка</span><span style="font-size: 13px; font-family: Inter; color: #394149;">.</span></li><li value="5" style="margin-top: 0; margin-right: 0; margin-bottom: 11px;"><span style="font-size: 13px; font-family: Inter; color: #394149;">Сохраните и опубликуйте страницу. </span></li></ol>
|
||||
<p style="line-height: 1.28; margin: 0 0 11px 0;"><span style="font-size: 13px; font-family: Inter; color: #394149;">Вы увидите на графике всю прибыль компании, бюджет каждой сделки, а также процентное соотношение этой суммы и общей выручки.</span></p>
|
||||
<p style="margin: 0 0 11px 0;"><img alt="chart-2" width="948" height="499" style="margin:0;width:948px;height:499px;border:none" src="chart-2.png"/></p>
|
||||
<h3 class="p_Heading3"><a id="use-table" class="hmanchor"></a><span class="f_Heading3">Данные из таблицы</span></h3>
|
||||
<p style="margin: 0 0 11px 0;"><span style="font-size: 13px; font-family: Inter; color: #394149;">Для построения графика с источником данных </span><span style="font-size: 13px; font-family: Inter; font-weight: bold; color: #394149;">Таблица </span><span style="font-size: 13px; font-family: Inter; color: #394149;">выполните следующие действия:</span></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>
|
||||
<li value="1" style="margin-top: 0; margin-right: 0; margin-bottom: 11px;"><a href="360009924451.html" class="topiclink">Создайте страницу</a> и откройте её в <a href="interface_designer.html" class="topiclink">дизайнере интерфейсов</a>.</li><li value="2" style="margin-top: 0; margin-right: 0; margin-bottom: 11px;">Откройте вкладку <span style="font-weight: bold;">Контекст</span>. Создайте свойство типа <a href="360010201779.html" class="topiclink">Таблица</a>, перейдите в его настройки и добавьте колонки. </li><li value="3" style="margin-top: 0; margin-right: 0; margin-bottom: 11px;">Вернитесь на вкладку <span style="font-weight: bold;">Шаблон</span>. На правой панели конструктора нажмите <span style="font-weight: bold;">Свойства </span>и <span style="font-size: 13px; font-family: Inter; color: #394149;">перетащите созданное свойство на поле для моделирования. Это необходимо, чтобы на странице пользователи могли заполнять таблицу данными</span>.</li><li value="4" style="margin-top: 0; margin-right: 0; margin-bottom: 11px;">Вынесите на поле виджет <span style="font-weight: bold;">График</span>. В настройках в поле <span style="font-weight: bold;">Источник данных </span>выберите опцию <span style="font-weight: bold;">Таблица </span>и укажите название созданной переменной из контекста. Задайте показатели для построения графика, его параметры, тип, цветовую схему и размер.</li><li value="5" style="margin-top: 0; margin-right: 0; margin-bottom: 11px;">Сохраните и опубликуйте страницу.</li></ol>
|
||||
<h4 class="p_Heading4"><span class="f_Heading4">Пример 1</span></h4>
|
||||
<p style="margin: 0 0 8px 0;"><span style="font-size: 13px; font-family: Inter;">Виджет можно использовать для отображения статистики готовых заказов на отдельной странице.</span></p>
|
||||
<p style="margin: 0 0 8px 0;"><span style="font-size: 13px; font-family: Inter; color: #394149;">Когда пользователи заполняют колонки таблицы, в графике типа </span><span style="font-size: 13px; font-family: Inter; font-weight: bold; color: #394149;">Спидометр</span><span style="font-size: 13px; font-family: Inter; color: #394149;"> показывается сумма каждого выполненного заказа, а также общий доход компании.</span></p>
|
||||
<p class="p_Normal"><img alt="chart-3" width="946" height="626" style="margin:0;width:946px;height:626px;border:none" src="chart-3.png"/></p>
|
||||
<h4 class="p_Heading4"><a id="group-by-several-indicators" class="hmanchor"></a><span class="f_Heading4">Пример 2</span></h4>
|
||||
<p style="margin: 0 0 8px 0;"><span style="font-size: 13px; font-family: Inter; color: #394149;">Рассмотрим, как работает опция </span><span style="font-size: 13px; font-family: Inter; font-weight: bold; color: #394149;">Группировка по нескольким показателям</span><span style="font-size: 13px; font-family: Inter; color: #394149;">.</span></p>
|
||||
<p style="margin: 0 0 8px 0;"><span style="font-size: 13px; font-family: Inter; color: #394149;">Например, на отдельную страницу добавьте таблицу, которая показывает прибыль от заказов на указанную дату, и график типа </span><span style="font-size: 13px; font-family: Inter; font-weight: bold; color: #394149;">Столбчатый вертикальный</span><span style="font-size: 13px; font-family: Inter; color: #394149;">. Суммы в таблице будут распределены по колонкам в зависимости от группы заказов: опт, розница или заказы от ИП.</span></p>
|
||||
<p style="margin: 0 0 8px 0;"><span style="font-size: 13px; font-family: Inter; color: #394149;">Чтобы в графике прибыль от разных групп заказов отображалась в виде отдельных столбцов, в настройках виджета включите опцию </span><span style="font-size: 13px; font-family: Inter; font-weight: bold; color: #394149;">Группировка по нескольким показателям</span><span style="font-size: 13px; font-family: Inter; color: #394149;">. В качестве показателей выберите свойства типа </span><span style="font-size: 13px; font-family: Inter; font-weight: bold; color: #394149;">Деньги</span><span style="font-size: 13px; font-family: Inter; color: #394149;"> из таблицы.</span></p>
|
||||
<p style="line-height: 1.28; margin: 0 0 11px 0;"><span style="font-size: 13px; font-family: Inter; color: #394149;">Когда пользователи заполняют таблицу данными, строится график, в котором сумма по каждой группе заказов отображается в отдельном столбце. Это позволяет сравнить доходы и оценить, какая из групп приносит компании наибольшую выручку.</span></p>
|
||||
<p><img alt="widget-chart-7" width="961" height="619" style="margin:0;width:961px;height:619px;border:none" src="widget-chart-7.png"/></p>
|
||||
<h3 class="p_Heading3"><a id="use-report" class="hmanchor"></a><span class="f_Heading3">Данные из отчёта</span></h3>
|
||||
<p style="line-height: 1.28; margin: 0 0 11px 0;"><span style="font-size: 13px; font-family: Inter; color: #394149;">Отчёты агрегируют данные из нескольких приложений-источников. Виджет </span><span style="font-size: 13px; font-family: Inter; font-weight: bold; color: #394149;">График</span><span style="font-size: 13px; font-family: Inter; color: #394149;"> позволяет визуализировать эти данные. Подробнее о том, как настроить и использовать отчёт, читайте в разделе</span> <a href="report.html" class="topiclink">«Отчет»</a>. </p>
|
||||
<p style="margin: 0 0 11px 0;"><span style="font-size: 13px; font-family: Inter; color: #394149;">В отчёте информация представлена в виде таблицы. Колонки этой таблицы можно указать в качестве показателей, по которым строится график.</span> </p>
|
||||
<p style="margin: 0 0 11px 0;"><span style="font-size: 13px; font-family: Inter; color: #394149;">Рассмотрим, как построить график для отчёта, в котором в качестве источников выбраны приложения </span><span style="font-size: 13px; font-family: Inter; font-weight: bold; color: #394149;">Заказы</span><span style="font-size: 13px; font-family: Inter; color: #394149;">, </span><span style="font-size: 13px; font-family: Inter; font-weight: bold; color: #394149;">Договоры </span><span style="font-size: 13px; font-family: Inter; color: #394149;">и </span><span style="font-size: 13px; font-family: Inter; font-weight: bold; color: #394149;">Счета</span><span style="font-size: 13px; font-family: Inter; color: #394149;">. Отчёт содержит информацию о заказах, включая связанные с ними договоры и сумму счетов по каждому договору.</span></p>
|
||||
<p style="margin: 0 0 11px 0;"><span style="font-size: 13px; font-family: Inter; color: #394149;">С помощью графика можно отслеживать, какой процент от общей выручки компании составляет сумма каждого заказа. Для этого в поле </span><span style="font-size: 13px; font-family: Inter; font-weight: bold; color: #394149;">Измерение</span><span style="font-size: 13px; font-family: Inter; color: #394149;"> выберите название заказа, а в поле </span><span style="font-size: 13px; font-family: Inter; font-weight: bold; color: #394149;">Показатель</span><span style="font-size: 13px; font-family: Inter; color: #394149;"> — сумму по договору. Укажите тип графика </span><span style="font-size: 13px; font-family: Inter; font-weight: bold; color: #394149;">Сетка из круговых</span><span style="font-size: 13px; font-family: Inter; color: #394149;">. Это позволит просматривать показатели по каждому заказу в отдельности.</span></p>
|
||||
<p style="line-height: 1.28; margin: 0 0 11px 0;"><span style="font-size: 13px; font-family: Inter; color: #394149;">Сохраните настройки и опубликуйте страницу. Теперь на ней отображаются круговые графики для каждого заказа. В них указано название заказа, сумма по договору и процент от общей прибыли компании.</span></p>
|
||||
<p class="p_Normal"><img alt="widget-chart-8" width="953" height="586" style="margin:0;width:953px;height:586px;border:none" src="widget-chart-8.png"/></p>
|
||||
<h3 class="p_Heading3"><a id="use-process-metrics" class="hmanchor"></a><span class="f_Heading3">Данные показателя процесса</span></h3>
|
||||
<p class="p_Normal"><a href="business-process-metrics.html" class="topiclink">Показатель</a> позволяет отслеживать эффективность исполнения этапов бизнес-процесса. Например, выяснить, сколько времени проходит между назначением задачи и её завершением. Чтобы фиксировать значение в ходе процесса, на его схеме используется графический элемент <a href="set-process-metrics-value.html" class="topiclink">Установить значение показателя</a>. Отображать данные можно с помощью виджета <span style="font-weight: bold;">График</span>. </p>
|
||||
<p class="p_Normal">Допустим, при оформлении сделки менеджер в рамках отдельной задачи предлагает клиентам дополнительные услуги. На схеме процесса после задачи размещён графический элемент, чтобы с помощью показателя отслеживать количество отказов от услуг. Вы можете настроить график и отобразить, сколько отказов получено за определённый период при исполнении экземпляров процесса. </p>
|
||||
<p class="p_Normal">Для этого:</p>
|
||||
<ul style="list-style-type:disc"><ol style="list-style-type:decimal">
|
||||
<li value="1" class="p_Normal"><a href="360009924451.html" class="topiclink">Создайте страницу</a> и разместите на ней виджет <span style="font-weight: bold;">График</span>. </li><li value="2" class="p_Normal">В настройках графика в качестве источника данных выберите <span style="font-weight: bold;">Показатель</span>.</li><li value="3" class="p_Normal">В поле <span style="font-weight: bold;">Измерение</span> укажите свойство показателя, которое соответствует анализируемому параметру этапа процесса. В данном примере переменная называется <span style="font-weight: bold;">Значение</span>. </li><li value="4" class="p_Normal">В поле <span style="font-weight: bold;">Показатель графика</span> укажите свойство показателя, которое содержит значения, полученные из процесса. В данном случае это <span style="font-weight: bold;">Количество</span>. </li><li value="5" class="p_Normal">Остальные настройки можно оставить по умолчанию. </li><li value="6" class="p_Normal">На вкладке <span style="font-weight: bold;">Пользовательские фильтры</span> выберите фильтрацию по времени события, чтобы видеть количество экземпляров с отказом от услуг за период. </li><li value="7" class="p_Normal">Сохраните виджет и опубликуйте страницу. </li></ol></li></ul>
|
||||
<p class="p_Normal"><img alt="charts-10" width="467" height="372" style="margin:0;width:467px;height:372px;border:none" src="charts-10.png"/></p>
|
||||
|
||||
<div class="bottom-nav">
|
||||
|
||||
@ -233,7 +235,7 @@
|
||||
|
||||
</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>
|
||||
<div class="feedback-wrap"><div class="feedback" id="feedback"><span><b>Была ли статья полезной?</b></span><form action="" method="POST" class="feedback-form" id="feedback-form"><div class="feedback__popup feedback__popup-response" id="feedback__popup_thx">Спасибо за ваш отзыв!</div><div id="feedback-success-popup"><div class="wrap"><button type="button" class="feedback-popup-close">×</button><svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0_212_2187)"><path d="M22 0.6875C10.2294 0.6875 0.6875 10.2294 0.6875 22C0.6875 33.7706 10.2294 43.3125 22 43.3125C33.7706 43.3125 43.3125 33.7706 43.3125 22C43.3125 10.2294 33.7706 0.6875 22 0.6875ZM22 40.5625C11.8023 40.5625 3.4375 32.3078 3.4375 22C3.4375 11.8024 11.6922 3.4375 22 3.4375C32.1977 3.4375 40.5625 11.6922 40.5625 22C40.5625 32.1976 32.3078 40.5625 22 40.5625ZM34.1713 16.933L18.6613 32.3186C18.257 32.7197 17.604 32.7171 17.203 32.3128L9.82283 24.873C9.42176 24.4686 9.42434 23.8157 9.82867 23.4146L10.5609 22.6884C10.9652 22.2873 11.6181 22.2899 12.0192 22.6942L17.9468 28.6697L31.9926 14.7366C32.3969 14.3356 33.0498 14.3382 33.4509 14.7425L34.1772 15.4747C34.5783 15.879 34.5757 16.532 34.1713 16.933Z" fill="#27AE60"></path></g><defs><clipPath id="clip0_212_2187"><rect width="44" height="44" fill="white"></rect></clipPath></defs></svg><p>Ваш отзыв успешно отправлен!</p><span>Спасибо за обратную связь.</span></div></div><div class="feedback__popup" id="feedback__popup_why"><button type="button" class="feedback-popup-close">×</button><div class="feedback__popup-header">Уточните, почему:</div><input type="radio" name="category" id="bad_recommendation" value="bad_recommendation"><label for="bad_recommendation">Рекомендации не помогли</label><input type="radio" name="category" id="difficult_text" value="difficult_text"><label for="difficult_text">Текст трудно понять</label><input type="radio" name="category" id="no_answer" value="no_answer"><label for="no_answer">Нет ответа на мой вопрос</label><input type="radio" name="category" id="bad_header" value="bad_header"><label for="bad_header">Содержание статьи не соответствует заголовку</label><input type="radio" name="category" id="other_reason" value="other_reason"><label for="other_reason">Другая причина</label></div><div class="feedback__popup" id="feedback__popup-other"><button type="button" class="feedback-popup-close">×</button> <div class="feedback__popup-header">Расскажите, что вам не понравилось в статье:</div><textarea class="feedback__textarea" name="other" id=""></textarea><input type="submit" class="feedback__other-btn" value="Отправить"></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"/><span class="feedback-form__btn-group_yes-btn">Да</span></label><input type="radio" name="useful" id="feedback__useful_no" value="false"><label for="feedback__useful_no"><img src="dislike.svg"/><span class="feedback-form__btn-group_no-btn">Нет</span></label></div><select name="category"><option disabled>Выберите вариант</option><option value="bad_recommendation" selected>Рекомендации не помогли</option><option value="difficult_text">Текст трудно понять</option><option value="no_answer">Нет ответа на мой вопрос</option><option value="bad_header">Содержание статьи не соответствует заголовку</option><option value="other_reason">Другая причина</option></select><input type="submit"></form></div></div>
|
||||
|
||||
</section>
|
||||
</div>
|
||||
@ -241,7 +243,7 @@
|
||||
<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>
|
||||
<h3 class="h3-toc">В этой статье</h3>
|
||||
<nav id="toc2"></nav>
|
||||
</div>
|
||||
</aside>
|
||||
@ -252,30 +254,63 @@
|
||||
<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>
|
||||
<ul class="footer-mobile__list"><li><a href="https://api.elma365.com/ru/" target="_blank">API</a></li><li><a href="https://tssdk.elma365.com/" target="_blank">TS SDK</a></li><li><a href="https://community.elma365.com/" target="_blank">Community</a></li><li><a href="https://elma-academy.com/ru/elma365" target="_blank">Академия</a></li></ul><ul class="footer-mobile__list"><li><a href="https://elma365.com/ru/help/platform/get-trial.html">Платформа</a></li><li><a href="https://elma365.com/ru/help/ecm/ecm-functions.html">ECM</a></li><li><a href="https://elma365.com/ru/help/service/service-functions.html">Service</a></li><li><a href="https://elma365.com/ru/help/projects/projects-functions.html">Проекты</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 class="container">
|
||||
<div class="footer-wrap">
|
||||
|
||||
<div><span class="mobile-question-popup">Отправить фидбэк</span><form method="POST" action class="question__popup question-xs" id="question__popup"><div class="question-wrap"><span class="close"></span><span class="title">Задать вопрос</span><label for="help_question" style="display: none;"></label><textarea name="help_question" id="help_question"></textarea><input type="submit" value="Отправить"></div></form><div class="hidden fade-in question-success-xs">Ваш фидбэк отправлен.</div></div>
|
||||
|
||||
<div class="footer-flex-b">
|
||||
<div class="footer-top">
|
||||
<span class="footer-copy">© 2025
|
||||
ELMA365
|
||||
|
||||
|
||||
</span>
|
||||
|
||||
<a href="https://navigator.sk.ru/orn/1122971" target="_blank">
|
||||
<img src="sk-resident.svg" alt="sk icon" class="footer-img" width="117" height="34">
|
||||
</a>
|
||||
|
||||
</div>
|
||||
<div class="footer-line">
|
||||
|
||||
<div class="footer-line-copy">
|
||||
<span class="footer-copy">© 2025
|
||||
ELMA365
|
||||
|
||||
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<ul class="footer-list">
|
||||
|
||||
<li class="footer-item"><a href="https://elma365.com/ru/" target="_blank" class="footer-link" style="color: #0D4A75;"><img src="browse.svg" alt="browse icon" class="footer-img">elma365.com</a></li><li class="footer-item"><a href="https://www.youtube.com/user/ELMABPM" target="_blank" class="footer-link"><img src="yt.svg" alt="youtube icon" class="footer-img"></a></li><li class="footer-item"><a href="https://vk.com/elma_bpm" target="_blank" class="footer-link"><img src="vk.svg" alt="vk icon" class="footer-img"></a></li><li class="footer-item"><a href="https://t.me/elmaday" target="_blank" class="footer-link"><img src="tg.svg" alt="telegram icon" class="footer-img"></a></li><li class="footer-item"><a href="https://dzen.ru/elma" target="_blank" class="footer-link"><img src="dzen.svg" alt="dzen icon" class="footer-img"></a></li>
|
||||
|
||||
|
||||
<li class="footer-item">
|
||||
<a href="https://navigator.sk.ru/orn/1122971" target="_blank">
|
||||
<img src="sk-resident.svg" alt="sk icon" class="footer-img" width="117" height="34">
|
||||
</a>
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<a href="#" class="arrow-top"></a>
|
||||
</div>
|
||||
|
||||
</footer>
|
||||
<!-- <script type="text/javascript" src="jquery1.min.js"></script>-->
|
||||
<iframe name="hmnavigation" style="display:none!important"></iframe>
|
||||
<script src="./jquery-ui.js"></script>
|
||||
<!--<script src="./jquery-ui.js"></script> -->
|
||||
<script src="./jquery-ui.min.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>
|
||||
|
||||
Reference in New Issue
Block a user