Whether in a large screen or a report, you can click to select a chart, drag the chart with the mouse to change its position, and you can also drag the mouse to adjust the size of the chart:
Chart Control Panel
Chart is the basic unit of data visualization. In Sugar BI's large screen and report page, charts are combined one by one. Users can filter and display data by binding data sources to charts and cooperating with interactive filter conditions.In edit mode, click the chart to configure the chart in the right control panel, which is generally divided into "Basic", "Data", "Advanced", "Interaction" and other configuration parts:
Basics
In this section, you can configure the basic display options of the chart, such as chart name, chart description, chart size, etc.
data
The data settings of the chart can be configured to bind to the data of the chart. The binding method is detailed in:
The advanced settings of each chart are different. We will introduce the drawing methods and special advanced configurations of various charts one by one in the following chapters.
Debugging is a very useful tool. Almost all problems that occur when binding data and need to verify the correctness of data can be located here.Be sure to use moreDebugging, Debugging, Debugging
Click the "Debug" button in the "Data" tab of the chart control panel to open the debugging pop-up box.
Debugging of data model binding chart data
When you bind chart data using the data model method, click Debug to see the following debug window, which is mainly to see the executed SQL statements, so as to verify whether the data query meets the expectations.
Debugging of SQL Modeling Mode Binding Chart Data
When binding chart data in SQL mode, click Debug to see the following debug window:
The SQL debugging pop-up is divided into the following parts:
Data debugging conclusion: the information here represents whether the existing SQL data binding configuration can successfully pull data. If there is a problem, an error message will be provided
SQL statement: displays the SQL statements written by the user (some pseudo syntax supported in Sugar BI may be used), as well as the standard SQL statements finally generated
SQL query results: the original results queried by the SQL statement and the query time are shown here
Intermediate results: This shows the transformation of the original query results by Sugar BI, including the results after row to column and data completion
Formatted result: Here is the result of Sugar BI formatting data into chart related data JSON structure
Debugging API Binding Chart Data
When binding chart data in API mode, click Debug to see the following debug window:
The API debugging pop-up includes the following parts:
Data debugging conclusion: the information here represents whether the existing SQL data binding configuration can successfully pull data. If there is a problem, an error message will be provided
API request address: displays the address of the specific API you bind requested by Sugar BI at the back end
Request Header: displays the request from POST to your APIHeaderContent, including the currently logged in user's mailbox andToken information
API return results: Here you can see the API return results bound by the user and the time consumed by the API request
Automatic refresh of chart data
In both the report and the large screen, you can set the chart in the page to automatically refresh data every certain time, so as to maintain real-time synchronization of data.The report is configured as a whole page, seeOverview of report production。In the large screen, the automatic refresh interval can be configured separately for each chart in a more granular way. For each chart that can bind dynamic data, you can set whether to automatically refresh regularly:
Customize the background, border and other styles of the chart
Charts in large screens and reports can customize their own background color, title color, border, shadow and other styles, which can be used in conjunction with the following "Chart Custom Color", or in reportsReport page background coloruse.
Custom Color Books for Charts
The overall color theme of the page can be set on both the large screen and the report page (seeReport Page Color Themeas well asLarge screen page color theme)In addition to the overall page settings, the color of each chart can also be customized. You can choose to use the color system of the report theme or customize the color of each part of a chart. For example, the following figure configures the color of text, axis and two lines for polylines:
Dynamization of chart names
The dynamic chart name means that the chart name in the report changes according to user interaction. You can embed the report's Filter Criteria, Drill Down Parameters, and Linkage Parameters into the chart name.
Embedded filter condition in chart name
The effect of embedding the filter criteria of the report into the chart name is shown in the following figure:
The syntax for embedding filter conditions in chart names is:{conditions.key}, wherekeyRefers to the "Query key value」。
Run in parameters embedded in chart name
For the drill down chart, it also supports embedding the "drill down parameter" into the name of the lower drill down chart, as shown in the following figure:
The syntax for embedding drill in parameters in chart names is:
{drillDowns}
{drillDowns.key}
{drillDowns(0).key}
{drillDowns(first).key}
amongzeroandfirstIt is the level of drilling in. When drilling in multiple layers, the parameters of each layer can be obtained. If it is not written, the upper level will be obtained by default.keyIs the name of a field in the drill down parameter item of each layer.The syntax here is similarHard embedded drilling parameters in SQL。
Embedded linkage parameter in chart name
If a chart has linkage set, its linked child chart supports embedding "Linkage Parameter" into the chart name, as shown in the following figure:
The syntax for embedding linkage parameters in chart names is:
{dependence}
{dependence || defaultValue}
{dependence.key}
{dependence.key || defaultValue}
amongkeyIs the name of a field in the linkage parameter item, if not writtenkeyThe default linkage parameter is taken,defaultValueIt is the default value displayed when the linkage is not triggered or the linkage parameter does not exist.The syntax here is similarHard embedded linkage parameters in SQL。
Embed URL parameter in chart name
The chart name supports embedding parameters in the current url, as shown in the following figure:
The syntax for embedding URL parameters in chart names is:
{querys.key}
{querys.key || defaultValue}
amongkeyIs the name of the parameter in the URL,defaultValueIt is the default value displayed when the parameter is not in the URL.The syntax here is similarEmbed URL parameters in SQL
Macro definition variable embedded in chart name
The chart name supports embedded macro definition variables, as shown in the following figure:
The syntax for embedding macro definition variables in chart names is:
${NAME}
${NAME} || defaultValue}
amongNAMEIs a macro variable defined in Sugar BI,defaultValueWhen there is no definition in Sugar BINAMEMacro variable, the default value displayed.Syntax reference of this sectionMacro definition variable
Embedded date macro definition in chart name
The chart name supports embedded date macro definitions, as shown in the following figure:
The syntax for embedding date macro definitions in chart names is:
{DATE}
amongDATEIt is the fixed date macro definition in Sugar BI. The syntax of this section refers toMacro definition variable
Enlarge Chart
When there is too much chart display information in the large screen or report, when the current large screen or report page needs to zoom in the chart, you can right-click ->Zoom in Chart to zoom in on the chart (in the report, you can also zoom in on the chart through the Top Toolbar ->Zoom in Chart).
Note: The zoom in setting is turned on by default for all charts, and the zoomed in charts are displayed in full screen and center by default.
You can set chart maximization in Interactive ->Chart Enlargement.
Note: The zoomed in chart background has been distinguished between the large screen and the report, but if the zoomed in chart background does not match the current report or the large screen background, you can set the pop-up background color in Interaction ->Zoom in Chart ->Pop up Background Color.
Chart Refresh
Support chart level data refresh operation. When a chart uses data model or SQL modeling for data binding, and data cache is enabled, if you want to see the latest data, you can use the refresh chart operation to update the cache;For charts without cache, data is pulled directly.You can right-click Refresh Chart or Refresh Chart (Update Cache). The second copy means that the data cache is enabled for the chart.(In the report, you can also refresh the chart through Top Toolbar ->Refresh Chart or Refresh Chart (Update Cache).).
SVG rendering
Echarts related charts support SVG rendering. Generally speaking, SVG has better performance on mobile terminals, or it is also recommended to use SVG when the number of charts in the page exceeds 10. However, if there is a lot of data in the chart (more than 1000), it is better not to start it.
SVG rendering has the advantage that the SVG format vector image will be downloaded, which can be magnified infinitely, and is suitable for embedding charts into documents and printing them out.
Start Sugar BI nowFree trial, unlock more industry components and large screen templates!
Chart zoom settings
The chart supports setting X axis/Y axis scaling. You can enable Enable X axis scaling/Start Y axis scaling in Control Panel Advanced X axis settings/Y axis settings. The scaling axis will appear below/on the right side of the chart. You can customize the scale and style of the scaling axis.
The charts supporting zoom axis are: histogram, broken line chart, histogram, K-line chart, pictogram, peak histogram, river chart, Gantt chart (both X-axis and Y-axis support zoom setting).
You can configure the following functions:
Scale
Scaling supports two modes:
Percentage form: set according to the overall percentage, such as 60% - 100%
Numerical form: set according to the number of categories on the x-axis. The rules are as follows:
At the same time, set two values of "default zoom start number" and "default zoom end number":
From front to back, for example, 1 to 3, indicates that the first to third digits of the X axis are zoomed;
From the back to the front, for example: - 2 to 0, it indicates that the X axis is zoomed to display the last 3 digits of the countdown.
Set one value in the Default Zoom Start Sequence Number or Default Zoom End Sequence Number:
From front to back, for example, "null value" to 3 indicates that the first 3 digits of X axis are displayed in zoom mode;
From front to back, for example, "null value" to - 3 indicates that the first digit of X axis is zoomed to the third digit from the bottom;
From back to front, for example, from 3 to "null value", it indicates that the third digit of X axis is zoomed to the last digit;
From back to front, for example: - 3 to "null value", it means that the last three digits of the X axis are displayed.
Scale Axis Style
After X-axis/Y-axis zoom is enabled, Sugar BI supports the style of user-defined zoom axis. You can set the height, border color, background color, text color, line color, shadow color, drag and drop handle button color of the zoom axis to achieve better visual presentation effect.