The area chart is based on the line chart and has the section between the line and the coordinate axis in the line chart filled with color. The filled section is the area and the color highlights the trend better.  The same as the line chart, the area chart emphasizes the number changes over time, and is used to highlight the trend of the total number.  Both the line chart and the area chart are mostly used to indicate the trend and relationship, instead of the specific values.

Basic components

  • X axis (horizontal axis)
  • Y axis (vertical axis)
  • Area block

Configuration items

Configuration item Description
X axis Generally, the X axis is an ordered data type (time series).
Y axis You can configure one or more columns of data to correspond to the value interval of the Y axis.
Legend The location where the legend is in the graph. You can configure the legend to the top, bottom, left, or right of the graph.
Padding The distance between the coordinate axis and the graph boundary.

Procedure

  1. On the query page, enter the query statement in the search box, select the time interval, and then click Search.
  2. Select the area chart ( ).
  3. Configure the graph properties.
    Note The number of data records for a single area block in the area chart must be greater than two in case that the data trend cannot be analyzed. We also recommend that you have no more than five area blocks in an area chart.

Example

Simple area chart

The PV of IP 42.0.192.0 within the last day:

remote_addr: 42.0.192.0 | select date_format(date_trunc('hour', __time__), '%m-%d %H:%i') as time, count(1) as PV group by time order by time limit 1000

Select time as the X Axis and PV as the Y Axis.

Figure 1. Simple area chart


Stacked area chart

* | select date_format(date_trunc('hour', __time__), '%m-%d %H:%i') as time, count(1) as PV, approx_distinct(remote_addr) as UV group by time order by time limit 1000

Select time as the X Axis. Select PV and UV as the Y Axis.

Figure 2. Stacked area chart