Range Area Chart

Version

Expected Effect

The area chart can be set to display the data range, as shown in the following figure.

Implementation Method

You can add a condition attribute to a chart, set the color and line style for the chart to display the data range by area, and customize the label and prompt as needed through JS.

Data Preparation

Choose File > New General Report, and create a built-in dataset ds1 on the lower left of the designer, as shown in the following figure. 

Chart Insertion

Merge required cells, click the Insert Chart icon on the upper toolbar, and select Stacked Area Chart, as shown in the following figure. 

Chart Data

Select the area chart and bind the data, as shown in the following figure.

Chart Attribute Setting

1. Prerequisite

If you need to set the opacity by adding condition attributes, you first need to set Gradient Style to Off under Style > Series. Otherwise, the opacity cannot be set.

2. Procedure

Choose Special Effect > Condition Display, click xxx, and add a condition attribute Series Index Equal to 1, as shown in the following figure.

Chart Style Setting

1. Choose Style > Label, select Use Label, and select Custom for the returned content. Through the JavaScript codes, the label value displayed for the Difference series is the sum of the values of the Difference and Lowest series.

Enter the following JavaScript codes.

   function(){
 if(this.seriesName=="Difference"){
      return (this.points[0].value+this.points[1].value).toFixed(1); //If the series is Difference, the system returns the sum of the values of the Difference and Lowest series, with one decimal place kept.
      };
      return this.value; //The actual value, namely, the value of the Lowest series, is returned
.}

2. Choose Style > Prompt, select Use Tooltip, and select Custom for the returned content. Enter the following JavaScript codes.

   function(){   
  var value="<font color='white'>"+this.category+"<br>Lowest："+this.points[0].value+"<br>Highest："+(this.points[0].value+this.points[1].value).toFixed(1)+"</font>";
  return value;
}

3. Choose Style > Prompt, and select Display All Series to display all data tooltips of all series connected by lines.

Effect Display

PC

Save the report and click Pagination Preview. The following figure shows the preview effect.

Mobile Terminal

The report can be previewed on both the DataAnalyst app and H5 terminal. The following figure shows the effect.

Note: On the mobile terminal, the labels are displayed normally. However, the tooltip does not show the highest value but still displays the difference.

For details, you can download the template Range Area Chart.cpt