All Products
Search
Document Center

Appendix - Charts

Last Updated: Jul 29, 2020

Pivot table

Pivot tables are used for regular data pivoting and transposition of data from rows to columns. In pivot tables, measures can be color-coded to represent different groups.
1

If you configure multiple measures for a pivot table, you can drag the metric name field to the Row area. In this way, the names of the measures are displayed as second-level row headers and the values of the multiple measures each belong to the corresponding row.
2

To configure different charts for multiple measures in a pivot table, click the icon to the left of each measure name and select a chart type in the Measure area.
3

Table chart

Table charts are created by encapsulating tabular components provided by Ant Design. You can perform the following operations to stylize a table chart:

  • Set a header style.
  • Merge headers at multiple levels and adjust the order of headers except for first-level headers.
  • Fix headers.
  • Configure column styles.
  • Sort columns.
  • Set conditions for column styles.
  • Fix columns on the left or right side.
  • Set a row height and border style.
  • Merge cells that have the same values in dimension columns.
  • Configure paging.
  • Use raw data.

After you set conditions for column styles, the background color, text font, and horizontal bar of a cell are determined by the cell value and the conditions that you set. Multiple conditions may take effect at the same time.
4

After you enable a table chart to use raw data, the table chart will no longer group dimensions or aggregate measures. Instead, the table chart will display the dataset, that is, the detailed data returned for the SQL statement.

You need to press the Enter key to confirm a shared column name after you merge columns.

Ticker board (similar to indicator card)

For a ticker board, you need to configure one to three measures. No dimension is needed. You can set fonts, prefixes, and suffixes for measure values. The display format is fixed. The text size may vary with the size of the ticker board on a dashboard or a big screen.
5

Line chart

For a line chart, you need to configure one dimension and one or more measures. You can perform the following operations to stylize a line chart:

  • Display trends in smoothed or straight lines.
  • Set axes.
  • Set tags.
  • Set the legend.
  • Set dividers.

6

Bar chart

Bar charts support the following display modes:

  • Regular: one dimension and one or more measures.
  • Comparison of measures: no dimension and two or more measures.

You can perform the following operations to stylize a bar chart:

  • Rotate the chart 90 degrees to convert it to a horizontal bar chart.
  • Create stacked bars.
    • Group measures.
    • Display percentages.
    • Display totals.
  • Set a bar style.
  • Set axes.
  • Set tags.
  • Set the legend.
  • Set dividers.

7

Scatter chart

For a scatter chart, you need to configure two measures and any number of dimensions. You can perform the following operations to stylize a scatter chart:

  • Set axes.
  • Set tags.
  • Set the legend.
  • Set dividers.

8

Pie chart

Pie charts support the following display modes:

  • Regular: one measure and multiple dimensions represented by color-coded slices
  • Comparison of measures: two or more measures

You can perform the following operations to stylize a pie chart:

  • Display as a circular chart.
  • Display as a polar area chart.
  • Set tags.
  • Set the legend.

9

Funnel chart

Funnel charts support the following display modes:

  • Regular: one measure and multiple dimensions represented by color-coded horizontal bars
  • Comparison of measures: two or more measures

You can perform the following operations to stylize a funnel chart:

  • Set a sorting method.
  • Configure spacing and alignment.
  • Set tags.
  • Set the legend.

10

Radar chart

Radar charts support the following display modes:

  • Regular: one dimension and one or more measures
  • Comparison of measures: no dimension and two or more measures

You can perform the following operations to stylize a radar chart:

  • Set the shape.
  • Set the number of axis segments.
  • Set internal and external tags.
  • Set the legend.

11

Sankey diagram

For a Sankey diagram, you need to configure two or more dimensions and one measure. You can perform the following operations to stylize a Sankey diagram:

  • Set nodes.
    • Drag nodes.
    • Set the layout direction of nodes.
    • Set the width of bands.
  • Set tags.

12

Parallel coordinate chart

For a parallel coordinate chart, you need to configure one or more dimensions and one or more measures. You can perform the following operations to stylize a parallel coordinate chart:

  • Set a line style.
  • Set axes.
  • Arrange axes.
  • Select the data to be displayed.

13

Word cloud

For a word cloud, you need to configure one dimension and one measure.
14

Waterfall chart

For a waterfall chart, you need to configure one dimension and one measure. You can perform the following operations to stylize a waterfall chart:

  • Set axes.
  • Set tags.
  • Set dividers.

15

Embedded webpage

You do not need to configure dimensions or measures for an embedded webpage. You only need to enter the address of the embedded webpage on the Style tab.
16

Rich text

Rich texts are not highly dependent on dimensions or measures. You can perform the following operations to customize text styles:

  • Set the text size, font, style, and color.
  • Set a list style.
  • Align texts.
  • Set hyperlinks.
  • Set images.
  • Clear formatting.

To dynamically display dimensions and measures in a rich text, move the pointer over the rightmost icon in the rich text toolbar and select corresponding fields. The dimensions and measures that you select will be inserted to the rich text in the form of placeholders.
17

To preview a rich text, click Preview in the lower-right corner.
18

Note: If a dimension field that you select has multiple values, the values will be separated with commas (,). If a measure field that you select has multiple values, the values will be grouped.
1920

Dual Y-axis chart

For a dual Y-axis chart, you need to configure one dimension and two or more measures. You can perform the following operations to stylize a dual Y-axis chart:

  • Select a Y-axis graph.
  • Set axes.
  • Display trends in smoothed or straight lines.
  • Create stacked bars.
  • Set the legend.
  • Set dividers.

21