Dashboard Design Idea

  • Last update:December 08, 2020
  • You will learn
    • Determine the Chart Style

    • Define hardware parameters

    • Prepare data

    • Design and typesetting

    • Production and debugging

    I. Determine the Chart Style

    A large number of charts are used to visualize data in dashboards, so it is necessary to determine the types of charts according to the display purposes and indicators of dashboards. The basic idea is:

    Data relation

    Example scenario

    Applicable chart types

    Compare

    Compare the sales of different products

    Column chart/bubble chart/stacked area chart/rectangular tree diagram/radar chart/word cloud

    Distribution

    Relationship between employee education and salary

    Scatter plot/distribution chart/bubble chart

    Map

    Number of users in stores across the country

    Heat Maps

    Proportion

    The proportion of a product in total sales

    Doughnut chart/pie chart/stacked column chart/rectangular tree diagram

    Section

    Target sales achievement

    Meter diagram/stacked area drawing

    Time

    Sales growth over time

    Line chart/spiral chart/area chart

    II. Define hardware parameters

    After the dashboard is made, it will be displayed on a large screen, so the size and text size of the dashboard should be set according to the parameters of hardware. For example, parameters such as screen size and resolution need to be determined.

    III. Prepare data

    The final display on the large screen is simple and intuitive, but it is usually based on a large amount of data. In order to reduce the calculation amount of the report, it is suggested to preprocess the data in advance and store it in the database. When presenting the dashboard, the system only needs to simply pull the data, which can greatly improve the presentation efficiency.

    IV. Design and typesetting

    After determining the theme, indicators and charts for display, design and typesetting can be carried out. There may be multiple charts displayed on the dashboard, but the information displayed is also divided into primary, secondary and auxiliary information. It is recommended to refer to the following method to design and typeset

    • Primary information: core business indicators are arranged in the middle position, occupying a large area, and most of them are maps with rich dynamic effects

    • Secondary information: secondary indicators, mostly various charts, are located on both sides of the screen

    • Auxiliary information: the content of auxiliary analysis, which can be displayed by drill-down linkage and carousel

     


    V. Production and debugging

    1) After determining the canvas size, chart type, layout and data, you can add components, configure data and set styles on the canvas.

    2) It is necessary to constantly preview the report and adjust the visual effects of the report, including whether the key visual elements, font size, page dynamic effects, graphics and charts are displayed as expected, whether there is deformation, misalignment, etc.

    3) Repeated debugging and optimization are needed to ensure: smooth graphics and chart animation; no abnormalities in data loading and refreshing; pages will not crash or freeze after a long time display; the background control system can normally switch the display of the front page.

     

     


    Attachment List


    Theme: FineVis Data Visualization
    Already the First
    Already the Last
    • Helpful
    • Not helpful
    • Only read

    滑鼠選中內容,快速回饋問題

    滑鼠選中存在疑惑的內容,即可快速回饋問題,我們將會跟進處理。

    不再提示

    10s後關閉

    Get
    Help
    Online Support
    Professional technical support is provided to quickly help you solve problems.
    Online support is available from 9:00-12:00 and 13:30-17:30 on weekdays.
    Page Feedback
    You can provide suggestions and feedback for the current web page.
    Pre-Sales Consultation
    Business Consultation
    Business: international@fanruan.com
    Support: support@fanruan.com
    Page Feedback
    *Problem Type
    Cannot be empty
    Problem Description
    0/1000
    Cannot be empty

    Submitted successfully

    Network busy