Introduction

BI, short for Business Intelligence, is a platform that effectively integrates existing data within an organization. It helps enterprises, organizations, and individuals better understand their business situation, identify problems, and make decisions. BI products commonly utilize visualization techniques to help users analyze and present data in a more intuitive, efficient, and intelligent manner, thereby enhancing data-driven decision-making capabilities and providing timely and accurate reports for decision-making.

DataWind is an all-in-one data analysis and collaboration platform that supports self-service analysis of billions of data. It seamlessly integrates data access, data integration, query analysis, and collaborative sharing, enabling business users to gain intelligent insights and realize the value of data through visual forms such as data portals, digital dashboards, and management cockpits.

This article focuses on the core visualization capabilities of DataWind products and reveals its implementation principles.

Rich visualization presentation options

Charts are one of the most commonly used data visualization tools in BI products. With charts, users can have a more intuitive understanding of data trends, relationships, and distributions. Common types of charts include line charts, bar charts, pie charts, scatter plots, and more. Different types of charts are suitable for different data types and analytical purposes. For example, line charts can showcase the trend of time series data, bar charts can compare data across different categories, pie charts can display the proportion of data, and so on. Choosing the appropriate chart type is crucial for users to comprehend the data effectively.

Visual representation

1. Statistical charts

In DataWind product, a wide range of chart types are available for users, including bar charts, column charts, line charts, area charts, dual-axis charts, pie charts, donut charts, rose charts, scatter plots, filled maps, scatter maps, word cloud charts, histogram charts, radar charts, funnel charts, scorecards, gauge charts, progress charts, waterfall charts, and Sankey diagrams for network visualizations.

One of the distinctive features of DataWind is the ability to create combination charts and pivot tables.

Combination charts in DataWind allow users to display multiple charts with Cartesian coordinate systems side by side. This facilitates the comparison and observation of different metrics under the same dimension. By providing the combination of basic chart types, as well as the combination with dual-axis charts, DataWind empowers users to effectively analyze and visualize data from different perspectives.

Pivot tables, on the other hand, are used to observe the breakdown of aggregated data across multiple dimensions. This is reflected in the chart as a hierarchical or tree-like structure. By introducing segmented dimensions, users can observe the characteristics and trends of data in different facets, allowing for a more granular understanding of the information contained within the data. Pivot tables provide a flexible and interactive way to analyze data from various angles and gain insights into different levels of detail.

（Pviot Chart & Combination Chart）

2. Tables

In DataWind, in addition to the basic rendering of two-dimensional tables, users are provided with the ability to apply conditional formatting within cells. This includes rendering icon sets, color scales, data bars, etc. Users can also customize cell rendering by displaying images, videos, links, mini-charts, and other elements. Furthermore, DataWind supports features such as sorting data, freezing columns, and configuring fields from the menu options available in table headers. These functionalities enhance the flexibility and usability of tables in DataWind, allowing users to effectively visualize and interact with their data.

DataWind supports the creation of pivot tables, which summarize and present data based on column and row dimensions. By configuring column dimensions, row dimensions, and measures, users can easily create pivot tables. Compared to regular tables, pivot tables differentiate dimensions into rows and columns, making it easier to present data in a multi-dimensional context. Additionally, pivot tables in DataWind support features such as conditional formatting and content rendering, which are commonly used in two-dimensional tables. These features further enhance the versatility and functionality of pivot tables in DataWind.

In addition, DataWind also provides users with the functionality of trend analysis tables. The trend analysis tables allow users to view aggregated data for core metrics based on different date granularities. Users can further compare individual metrics, observe trends, and calculate averages.

3. GIS Maps

DataWind provides GIS maps to support Location-Based Services (LBS) requirements. These maps include various types such as heat maps, scatter maps, flow maps, and bar charts.

Revealing the implementation

The rich visual presentation in DataWind is due to the open source visualization solution VisActor. DataWind heavily uses the chart component VChart and the multi-dimensional table component library VTable.

At the same time, DataWind’s R&D team deeply cooperates with the VisActor team, participating in open-source development, which allows some personalized needs to be quickly met. VChart covers nearly all commonly used statistical chart types, and also provides rich extension interfaces. This makes it very easy for DataWind to expand chart types and enhance chart abilities based on user feedback.

（VChart Gallery：https://www.visactor.io/vchart/example）

In terms of tables, the VTable component fully meets the requirements of the business by using Canvas for high-performance rendering of the tables. In addition to the ability to implement two-dimensional tables, pivot tables, and pivot views, it also supports custom cell rendering, rendering of mini-charts in cells, tree display, pivot analysis, and other advanced features.

（online example：https://www.visactor.io/vtable/example）

The implementation of combined charts and pivot tables combines the advantages and features of both VChart and VTable. Thanks to the unified underlying rendering implementation of VisActor, it is easy to use the layout capability of VTable and nest the chart rendering capability of VChart to achieve combined charts and pivot tables.

By registering the VChart chart component on VTable, and utilizing the pivot table layout capability of VTable, the VChart chart component is rendered within the cells. VTable is responsible for maintaining the chart instances and updating events.

For example, the demonstrated perspective view table above is fully implemented：https://codesandbox.io/s/pivotchart-with-vtable-p8d6f6

The code structure is as follows：

From the code, we can see that by defining rows and columns and configuring the data, we can express the pivot structure of the data. Additionally, components such as axes, legends, and annotations used in statistical charts can be seamlessly integrated into the table, greatly enhancing the visualization and extensibility of the table.

Due to the complexity of BI systems and the need for custom visualization capabilities beyond generic charts and tables, DataWind has built a visualization encapsulation layer specifically for BI systems, building upon the extension mechanism of VisActor. The architectural design is as follows:

Through the above encapsulation, it is possible to quickly implement a BI system or a similar BI metric reporting platform.

Adaptable to different scenarios, styles, and customizable themes.

In DataWind products, different chart designs are often used for different business objects. A good chart should have a clear structure, readable labels and axes, appropriate colors and fonts, and should be tailored to the characteristics of the current business.

Chart styles and theme configuration in DataWind

DataWind supports flexible configuration of chart styles at multiple levels.

At the chart level, it supports one-click replacement of the chart’s data color palette：

At the dashboard level, it supports setting a unified theme style for the entire dashboard.

DataWind’s chart theme design follows the following principles:

• Structure and layout of charts: The structure of charts should be clear and uncluttered, without too many elements and noise. For example, there should be sufficient spacing between bars in a bar chart to facilitate easier differentiation of different data.
• Design of labels and axis lines: Labels and axis lines should be easy to read and understand. Labels should be clear and axis lines should have appropriate scales and labels. For example, a timeline should have suitable time intervals and labels to help users better understand the temporal trends of the data.
• Selection of colors and fonts: Colors and fonts should be appropriate for the style and theme of the chart. Colors should have appropriate contrast and saturation, and fonts should be easy to read and understand. For example, certain charts may require different colors to distinguish different data, while others may require similar colors to highlight the relationships within the data.

Revealing the implementation

VisActor provides a rich configuration of chart styles. It not only allows customizing color themes but also provides high customization options such as adaptive text, layout arrangement, and animation configuration to accommodate complex visualization needs in DataWind products.

Let’s take the theme palette feature of VChart as an example. Color is a crucial element in visualizing data. Choosing appropriate colors for charts to highlight data features and achieve a harmonious combination is an art in data visualization. VChart provides powerful and flexible palette functionality to meet various color requirements in different application scenarios.

VChart supports two types of palettes:

1. Data Palette: It assigns colors to data items based on their categories. The data palette is a sequence of multiple colors.
2. Semantic Palette: It supports semantically meaningful color values that can be used throughout the chart to maintain a consistent color style. In other words, colors are assigned meaningful names, making it easier to maintain and modify them.
3. Among them, the data palette allows multiple sets of palette schemes to coexist. The specific palette to be used depends on specific conditions (such as the number of data categories). As a result, VChart can easily meet flexible design requirements：

The code for registering and applying themes in VChart is simple and straightforward：

    const theme = {  
      name: "dark",  
      background: "#202020",  
      colorScheme: {  
        default: {  
          palette: {  
            titleFontColor: "#e2e3e6",  
            labelFontColor: "#888c93",  
            labelReverseFontColor: "#202020",  
            axisGridColor: "#404349",  
            axisDomainColor: "#55595f",  
            backgroundColor: "#202020"  
          }  
        }  
      }  
    };

    // registering theme  
    VChart.ThemeManager.registerTheme("dark_tmp", theme);const vchart = new VChart(spec, { dom: "container" });  
    vchart.renderAsync();// hot update  
    vchart.setCurrentTheme("dark_tmp");

（VChart Theme Demo：https://codesandbox.io/s/dark-theme-whm775）

Simple and easy-to-use interaction

DataWind interaction

In addition to well-designed charts, the interactivity of charts is also crucial. Through the interactive features of charts, users can gain a deeper understanding of the data and engage in more complex analysis and exploration.

1. Prompt information

When the user hovers the mouse over the chart, it can display detailed information and labels about the data. This is known as triggering chart tooltip. DataWind supports rich-text rendering for tooltips, and even has the ability to render charts within tooltips.

2. Zooming and panning

Users can zoom in and pan the chart to view more detailed data.

3. Selection and Filtering

Users can select specific data points or areas and filter the data.

4. Zooming and Drilling

Many components in VisActor allow for interactive actions defined by the business, such as clicking, selecting, hovering over chart elements; zooming and selecting on axes; displaying and customizing tooltips; selecting and deselecting legends, etc.

Through the chart events provided by VisActor, DataWind has implemented exploratory analysis features for the chart. For example, zooming in and drilling down, chart annotations, reference alerts, and more.

Revealing the implementation

Most of the interactive features in DataWind are based on various custom extension capabilities provided by VisActor. Examples are given below to illustrate this.

VisActor has built-in support for tooltips with certain customization capabilities. It also supports completely custom rendering of tooltips. DataWind utilizes this capability for advanced tooltip customization.

By leveraging the comprehensive and detailed interactive events provided by VisActor, DataWind is able to develop corresponding data exploration and analysis workflows based on these events.

    // register events  
    chart.on(event: string, callback: (params: EventParams) => void): void;  
    chart.on(event: string, query: EventQuery, callback: (params: EventParams) => void): void;  
    // unregister eventes  
    chart.off(event: string, callback: (params: EventParams) => void): void;

As shown in the above interface: Lock the component that interacts through the query parameter, and specify the type of interaction event through the event parameter. By using the above interface, you can obtain the specific interactive behavior performed by the user on the chart. For detailed settings, refer to the VisActor Event Introduction: https://visactor.io/vchart/api/API/event.

he following demonstrates the ability to draw custom tooltips by handling mouse hover events. By registering events triggered by the Tooltip within the chart, you can receive messages for drawing or updating the tooltip, and parse the message to obtain specific information about the chart’s hover.

Example code is as follows:

    vchart.setTooltipHandler({  
      showTooltip: (activeType, tooltipData, params) => {  
        const tooltip = document.getElementById('tooltip');  
        tooltip.style.left = params.event.x + 'px';  
        tooltip.style.top = params.event.y + 'px';  
        let data = [];  
        if (activeType === 'dimension') {  
          data = tooltipData[0]?.data[0]?.datum ?? [];  
        } else if (activeType === 'mark') {  
          data = tooltipData[0]?.datum ?? [];  
        }  
        tooltipChart.updateData(  
          'tooltipData',  
          data.map(({ type, value, month }) => ({ type, value, month }))  
        );  
        tooltip.style.visibility = 'visible';  
      },  
      hideTooltip: () => {  
        const tooltip = document.getElementById('tooltip');  
        tooltip.style.visibility = 'hidden';  
      },  
      release: () => {  
        tooltipChart.release();  
        const tooltip = document.getElementById('tooltip');  
        tooltip.remove();  
      }  
    });

The result is as follows:

（Complete example:https://visactor.io/vchart/demo/tooltip/custom-tooltip-handler）

In business intelligence (BI), it is necessary to translate user actions into specific business actions. For example, the specific actions triggered by clicking on an element may include various functionalities such as chart linking, drill-up/drill-down, dimension drill-down, chart annotation, and redirection. By extracting specific parameters from the events and defining the priorities among multiple events, one can establish rules for triggering events. In addition, some business actions are composed of a combination of multiple actions. For example, to achieve chart drill-down behavior, both the change of chart dimension and the filtering of the range need to be performed simultaneously when the interaction event is triggered. Therefore, complex business actions can be achieved through the combination and overlay of multiple basic events. This not only makes the interaction logic clear but also reduces ongoing maintenance costs.

Flexible and vivid narrative effects

DataWind Narrative

DataWind enables flexible visual storytelling through its dashboard. In a single chart, DataWind’s narrative primarily focuses on data annotation. By using data annotations, the cost for users to read charts, reports, or dashboards is significantly reduced, allowing them to quickly gain insights.

Revealing the implementation

VisActor’s powerful narrative capabilities support this. For example, custom data annotations can be added to charts:

The core code is as follows:

 const spec = {  
      type: 'line',  
      markPoint: [  
        {  
          coordinate: {  
            year: '1878',  
            population: 100  
          },  
          itemContent: {//text annotations  
            offsetY: -100,  
            type: 'richText',  
            autoRotate: false,  
            richText: {  
              （...rich text config）  
            }  
          },  
          itemLine: {// Mark line  
          ...  
        },  
        {  
          (...)  
        }  
      ],  
    ...  
    };  
    const vchart = new VChart(spec, { dom: CONTAINER_ID });  
    vchart.renderAsync();

（Link to the complete example code：https://www.visactor.io/vchart/demo/marker/mark-point-basic）

“VisActor” can also tell independent narratives through dynamic charts and animations. For example, using a chart with an autoplay progress bar to represent data changing over time:

（Link to the complete example code：https://www.visactor.io/vchart/demo/storytelling/timeline-scatter)

Moreover, when combined with VRender, it can present more complex chart narratives:

（Link to the complete example code：https://www.visactor.io)

Intelligent recommendations that understand data and users

DataWind chart recommendations

Intelligence is the trend in BI products. Once the fields in a chart are determined, selecting the appropriate chart type for data presentation is crucial in quickly gaining insights. DataWind’s chart recommendations include recommendations for chart types and chart fields. The former suggests the most suitable chart type for data display based on the selected dimensions and metrics, while the latter automatically assigns data fields to appropriate visual channels when users switch chart types. This greatly enhances users’ exploratory analysis capabilities, making it easy to create visual reports.

（DataWind Chart Recommend）

Revealing the implementation

@VisActor/VChart provides a complete end-to-end solution from data to visualization, with “visual storytelling” and “intelligence” as its core competencies. The powerful generation capability of large language models provides VChart with a natural language interaction interface, allowing users to call upon VChart’s capabilities through natural language, making chart generation and editing simple, fast, and of high quality.

@VisActor/VMind is a chart intelligence module based on VChart and large language models. It offers capabilities such as intelligent chart recommendations, intelligent coloring, and conversational chart editing. It greatly reduces the learning curve of using VChart and improves the efficiency of users in creating data visualizations.

The chart intelligence recommendation feature in VMind can generate data charts from scratch based on data characteristics and user intentions, including field selection, chart type recommendations, visual channel mappings, and chart coloring.

A code example for invoking the VMind component is as follows:：

import VMind from '@visactor/VMind'  
    const vmind = new VMind(openAIKey) //Your openAI key  
    const data=`Brand Name,Market Share,Average Price,Net Profit  
    Apple,0.5,7068,314531  
    Samsung,0.2,6059,362345  
    Vivo,0.05,3406,234512  
    Nokia,0.01,1064,-1345  
    Xiaomi,0.1,4087,131345  
    `  
    const describe="Display market share of each brand, forest style"  
    ////Input data in CSV format and chart description, return chart spec and animation duration.  
    const { spec, time } = await vmind.generateChart(data, describe);   
    //Call VChart for rendering.  
    const vchart = new VChart(spec, { dom: CONTAINER_ID });  
    vchart.renderAsync();

Pursuing Ultimate Performance

VisActor Performance Experience

With the superior performance of the visual rendering engine VRender and various optimization strategies, VChart and VTable provide excellent rendering performance and smooth interactive experience.

VChart offers the LTTB downsampling scheme, which maintains the visual characteristics of the original data with fewer data points, thereby reducing the computational burden of rendering.

In addition, VChart also supports progressive rendering to avoid page lag caused by rendering a large number of graphics. By splitting rendering tasks, VChart places created graphic elements within multiple frames for rendering, avoiding long synchronous computational tasks from blocking page logic and ensuring smooth chart presentation. VChart supports enabling progressive rendering configuration in any chart, as illustrated in the following image:

The core code for this example is as follows:

    const spec = {  
      type: 'common',  
      data: [  
    ...  
      ],  
      series: [  
        {  
          data: {  
            id: 'data0'  
          },  
          type: 'bar',  
          xField: 'time',  
          yField: 'value',  
          /** Whether to enable big data rendering mode, enabling it will reduce rendering precision.*/  
          large: false,  
          /** Set the threshold for enabling big data rendering optimization based on the length of the data; recommende largeThreshold < progressiveThreshold  */  
          largeThreshold: 500,  
          /** Segment length*/  
          progressiveStep: 100,  
          /** Set the threshold for enabling segmented rendering based on the length of data for a single series. */  
          progressiveThreshold: 1000,  
        },  
     ...  
      ],  
    };

（Link to the complete example code：https://visactor.bytedance.net/vchart/guide/tutorial_docs/Progressive_Render）

VTable supports millisecond-level rendering for large data volumes, enabling rapid visualization of massive data content. Even when dealing with data in the order of millions, VTable can provide efficient rendering and a seamless interactive experience.

（demo：https://visactor.io/vtable/demo/performance/100W）

DataWind Performance Optimization Solution

In addition to the high-performance rendering of VisActor itself, VisActor also provides Web Worker and chart scheduling technologies to improve the parallel rendering capability of charts and prevent blocking that can cause frame drops and lagging in the webpage.

To fully utilize the CPU’s multi-core performance, VisActor supports parallel chart rendering using Web Workers. By using Web Workers, not only can client performance be fully utilized, but page blocking can also be avoided at its root. On top of this, DataWind encapsulates the Worker Pool component, which simulates the concept of a thread pool and implements the scheduling and reuse of Workers.

Furthermore, DataWind has developed a chart scheduler for asynchronous scheduling of chart rendering tasks. When a large number of rendering tasks enter the page within a short period of time, the chart scheduler will schedule and allocate rendering tasks in an orderly manner based on the chart priority and internal strategies. It will also cancel or merge repetitive and invalid rendering tasks to reduce rendering performance overhead.

User-friendly and smooth cross-platform experience

With the prevalence of mobile devices, an increasing number of users need to use BI products on their mobile devices. BI products in the mobile environment need to consider the following factors:

• Responsive design: The UI of BI products should have responsive design to adapt to screens of different sizes on mobile devices. The elements within the charts also need to be responsive.
• Mobile adaptation: Rendering and event handling in BI products, among other things, need to be specifically adapted for mobile devices.
• Mobile optimization: The UI and functionality of BI products should be optimized for mobile devices. For example, the presentation format of data in the charts and the layout of various components need to be specifically optimized for mobile devices.

DataWind mobile experience

The charts and dashboards in DataWind are perfectly adapted for mobile scenarios, allowing users to access and view data reports anytime and anywhere, breaking the barriers of time and space.

Revealing the implementation

Thanks to the powerful cross-platform rendering capability provided by the VRender graphics rendering library, VChart supports multiple scenarios such as web, node, h5, and mini-programs. In cross-platform scenarios, charts may have different interactive responses and features, adapting to the interaction methods and events of touchscreens and other mobile devices.

VChart provides wrappers such as lark-vchart and taro-vchart, making it more convenient and simple to use VChart in different cross-platform scenarios.

For web scenarios, VChart provides the React-VChart wrapper, which offers a range of easy-to-use React components for creating various types of charts in the React development environment. The components are highly customizable and extensible, allowing different chart effects to be achieved by passing different parameters and configurations, enabling the quick creation of various types of charts.

Whether in web, mobile, or other scenarios, VChart chart library can provide high-quality chart rendering and interactive effects, meeting users’ needs for data visualization.

aking Feishu mini-program (widget) as an example, users can quickly embed charts into a widget using the provided template by VChart:

Below is a code example from the mini-program:

    Page({  
      data: {  
        canvasId: 'chartId', // canvasId  
        events: [], // custom events  
        styles: `  
          height: 50vh;  
          width: 100%  
        `,  
        // chart spec  
        spec: {  
          type: 'pie',  
          data: [  
            {  
              id: 'data1',  
              values: [  
               ...]  
            }  
          ],  
        }  
      },  
      onLoad: function (options) {}  
    });

（demo:https://www.visactor.io/vchart/guide/tutorial_docs/Cross-terminal_and_Developer_Ecology/mini-app/lark）

Summary

In the future, with the development of technology and the continuous growth of user demand, the requirements for visualization in BI products will continue to evolve in terms of interaction, usability, intelligence, and narrative features, demanding higher standards.

VisActor, as a free and open-source visualization solution, has undergone validation and refinement through extensive real-user scenarios with the Volcano Engine. It has achieved excellent results in functionality, aesthetics, performance, and cross-platform support, effectively enhancing and implementing the visualization capabilities for businesses.

DataWind embraces openness and works closely with VisActor, cooperating to demonstrate the successful adoption of open-source products in commercial environments.

Feel free to reach out

We are willing to have more in-depth discussions and exchanges with data product managers, designers, and developers regarding data products:

1. If you are interested in a particular aspect of the solution and would like to further discuss it, you can contact us.
2. If you would like to share your products, scenarios, and experiences, you can get in touch with us.
3. If you encounter challenging problems during the visualization application process, we can collaborate in discussing and researching them together.

Contact information:

1. VisActor Discord Community: https://discord.gg/3wPyxVyH6m
2. VisActor Official Website and GitHub:

https://www.visactor.io/

github.com

1. Twitter:https://twitter.com/xuanhun1