--- url: /v6.2/en-us/dashboard.md --- # Visualization Content Visualization content is the ultimate form of data analysis presentation, serving as the final display of data analysis. ![](/images/dashboard/dashboard-intro-001.png) In HENGSHI SENSE, different application types offer various methods for creating visualizations. For analysis applications, users can create [Dashboards](dashboard-intro.md) to produce visualization content. Dashboards provide a wide range of control types and complex layout management to meet sophisticated visualization needs. For query applications, complex layouts are not necessary. We provide [Pages](dashboard-intro.md#pages) that allow users to configure them conveniently. For report applications, the process is even more simplified; users only need to configure the report and query condition controllers to complete the setup. Regardless of the type of application, HENGSHI SENSE abstracts certain concepts within visualizations. They are all composed of a [Canvas](#canvas) and various types of [Controls](#controls), with controls serving as the basic unit. ## Canvas The primary function of the canvas is to [layout](dashboard-layout.md) the controls, set the canvas style, and better present the visualized content. In the canvas, you can adjust the arrangement of controls through layer ordering. ![](/images/dashboard/dashboard-intro-007.png) Canvas style is equivalent to dashboard style. Users can set different [themes](theme.md) to display the dashboard in various styles. ![](/images/dashboard/dashboard-intro-012.png) The canvas supports two types of page layouts: adaptive and fixed size, catering to different display needs. ![](/images/dashboard/dashboard-intro-013.png) ## Controls There are many types of controls, including chart-type controls for displaying analytical data, display-type controls for showing images and text, as well as functional controls for exporting data, refreshing data, and filtering data. A complete dashboard is composed of various controls with different functionalities. All controls adhere to the [Control Settings](control-setting.md). ![](/images/dashboard/control-001.png) ### Control Types Based on whether the control displays analytical data, controls can be categorized into Chart Controls, Display Controls, and Functional Controls. #### Chart Controls Refers to various chart controls used to display analytical data, such as [Bar Chart](histogram.md), Donut Chart, Pie Chart, [Table](table-intro.md), [Map](map-introduction.md), and [Custom Charts](custom-charts.md), with nearly 50 types of charts in total. ![](/images/dashboard/dashboard-intro-004.png) #### Display Controls Generally, these do not include analytical data and are mainly used to display images, text, and other content to enhance the presentation of the dashboard. Examples include [Container](container.md), Image, Rich Text, [Shape Control](app-icons.md), [Web Control](iframe.md), [Button](button.md), etc. ![](/images/dashboard/dashboard-intro-005.png) #### Functional Controls Complete certain functions in the dashboard to assist users in obtaining analytical data, such as filtering data, exporting data, refreshing, and other functionalities, such as [Filters](filter-intro.md), [Parameter Controls](parameter-control.md). ![](/images/dashboard/dashboard-intro-006.png) #### Control Example The following example demonstrates the process of creating a chart control using a line chart. The process for creating other controls is similar. 1. Select the chart control from the menu bar (in this case, a line chart).\ ![](/images/dashboard/control-003.png) 2. Configure the control content, including settings for configuration, style, and interaction. * **Configuration**: Drag dimensions and measures into the configuration to generate aggregated chart data, displaying business information. In the example, the "Date" field (calculated by month, displayed in year/month format) is dragged into the dimensions, while "User Name," "Actual Order Delivery Days," and "Inventory Cycle Days" are dragged into the measures to generate the chart.\ ![](/images/dashboard/control-004.png) * **Style**: Set the display style of the control. In the example, a custom title is set, along with chart content color, size, x-axis, y-axis, legend, and other styles. The modified chart is shown below.\ ![](/images/dashboard/control-005.png) * **Interaction**: Configure the interactions within the chart control. In the example, the row limit is set to 1000, and the click interaction behavior in the chart is set to display a pop-up menu.\ ![](/images/dashboard/control-006.png) 3. Configure the control's appearance and interactions. In the example, the control's corner radius is adjusted, and the interaction with other controls is set to linked filtering of related charts.\ ![](/images/dashboard/control-007.png) 4. Complete the control creation and adjust its layout on the canvas.\ ![](/images/dashboard/control-008.png) From the example, it can be seen that creating a control involves configuring the control content and setting up the control's appearance and interactions. The following sections introduce these two aspects in detail. #### Control Content Control content includes control display content (analytical data, text content), control display style, and internal control interaction. These three parts are completed in Control Configuration, Style, and Interaction respectively. * Configuration In Configuration, you set up analytical data, including configuring and processing data. Configuring Data: This refers to dragging [Dataset Fields](dataset-field-management.md), [Parameters](parameter.md), [Metrics](dataset-metric-management.md), and user attributes into the configuration area to generate charts. See [Fields and Metrics](chart.md#fields-and-metrics) for details. Processing Data: Once data is dragged into the chart, it needs to be processed. For example, performing calculations such as sum, average, deduplication, percentage, year-over-year and month-over-month comparisons; setting decimal places, calculation units, and display formats; setting sorting styles; and applying data filters. See [Dimension Calculation](chart.md#calculation), [Measure Calculation](chart.md#calculation-1), [Sorting](chart.md#sorting), and [Filters](chart.md#filters) for details. * Style In Style, you adjust the display style of the control. On one hand, this makes the control more visually appealing and aligns it with the overall dashboard display style, such as configuring colors, font settings, and legend display. On the other hand, it highlights key content in the control, such as axis settings, reference line settings, and conditional formatting. See [Chart Style](chart.md#style) for details. * Interaction This mainly refers to the control's own interactive behaviors, such as the number of data rows displayed by the control, automatic refresh, range roaming, time roaming, and click interaction behavior after opening the chart. See [Chart Interaction](chart.md#interaction) for details. > \[!TIP] Tip > The options in Configuration, Style, and Interaction may vary for different controls. > Not all controls include Configuration, Style, and Interaction. Chart-type controls generally include all three, while display-type controls typically do not involve analytical data and lack configuration options. Functional controls generally do not involve interaction and lack interaction options. #### Control Layout When using multiple controls, you can arrange them through layer ordering, adjusting the control hierarchy, alignment, distribution, etc. ![](/images/dashboard/control-015.png)