Contents

  1. Home
  2. Contents
  3. How to Create a Stacked Area Chart Widget
  4. Customizing the Stacked Area Chart Widget

Customizing the Stacked Area Chart Widget

My widget has now been created, but it looks a bit odd. There are two reasons for this.

 

The first is that the minimum temperature value is displayed in red while the maximum temperature value is displayed in blue. I would like to reverse this, so I need to navigate back to the “Values” box.

dashboard view shows the temperature with the assigned data

I can see that the “Max Temp” field currently sits atop the “Min Temp” field, and if I would like to reverse their appearance in the widget, I need to reverse their order in the “Values” box.

To do this, I am going to click the red “X” beside the “Min Temp” field to remove it. Then, I will drag the “Min Temp” field back over to the “Values” box, but this time, I will position it above the “Max Temp” field.

Value fields customized with Min and Max Temp fields

 

My widget has now changed its appearance so that the maximum temperature value is red and the minimum temperature value is blue.

widget explores the appearance so that the maximum temperature value is red and the minimum temperature value is blue

 

Now, I need to address the second reason that my widget looks a bit odd. My data source only contains temperature data for one month, August 2018, but my widget is displaying the date in a year format (rather than showing each individual day of August as I intended).

 

You may have noticed that though the “Dimensions” box contains a field called “Date,” the field’s name changed to “Year(Date)” when you dragged it over to the “Columns” box. This is because the widget shows data for the entire year by default.

 

This format would be helpful if I were comparing data across multiple years, but since I am only looking at one month of data, I need to revise my date display criteria. It does not make sense for my widget to supposedly display data for all of 2018 if I am only examining one month of temperature data.

 

 

To change the date settings for my widget, I need to navigate back to the “Columns” box and click the “Options” button beside the “Year(Date)” field. When I do, I see a list of different date display options: Date Time, Date, Year, Quarter, Month, Day, and More (clicking the “More” button will provide you with additional options).

More options shows to change the date settings

As we noted earlier, the “Year” option is selected by default. In order to see the maximum and minimum temperature data for each individual day of the month, I am going to click the “Day” option.

 

After I click “Day,” I can see that the name of the date field in the “Columns” box has been changed to “Day(Date),” and my widget’s appearance has been updated accordingly.

check maximum temperature data for each individual day of the month using the Day option

I can change the date increments along the bottom of my stacked area chart by dragging the chart’s edges to resize it. For example, if I make the widget smaller, it will display the dates in increments of six.

dashboard view shows the Day option result

However, if I make the widget larger, it will display the dates in increments of four.

dashboard view with the widget larger customization display the dates in increments of four

It is also worth noting that you can hover over any dot on the widget to see the minimum and maximum temperature data for that date. For example, I can see that on August 3, the high was 36°C  and the low was 28°C.

dashboard view shows the maximum and minimum temperature data for the date when hovering

dashboard view explores the result with the August 3, the high was 36°C and the low was 28°C

How can we help?