Skip to main content
All CollectionsUser Guides
Create Rose Chart Widgets
Create Rose Chart Widgets

Learn how to create Rose Chart widgets in Ubidots to display polar-parameterized histogram data.

David Sepúlveda avatar
Written by David Sepúlveda
Updated over a week ago

Use the Rose Chart widget to display polar-parameterized data in the form of histograms. While Rose charts may serve different purposes, their are commonly used to plot wind direction and speed simultaneously - no wonder why it is also known as a Wind Rose graph. In such case, the Rose Chart parameters would be:

  • Polar variable: Wind direction

  • Magnitude variable: Wind speed

For each cardinal direction, the chart displays a speed histogram over a given time period:

Requirements

Table of Contents

  1. Modes of Operation.

  2. Create a Static Rose Chart Widget.

  3. Create a Dynamic Rose Chart Widget.

1. Modes of Operation

The Rose Chart widget needs to be fed with 2 data sources; one for the polar direction, and another one for the magnitude variable, which is used to create a histogram for each polar direction.

While magnitude is the typical Ubidots time-series variable, the polar direction can be specified in two ways: within the context of the magnitude variable, or as a separate variable. In either case, the unit of the polar variable must be in degrees.

  1. Polar direction as context: Both magnitude and polar direction, will be extracted from a single variable. The Rose Chart widget allows to extract data from the variable value, as well as from its context. For instance, here's an example of how data should be sent in order to be understood by the widget in this mode:

{"velocity":{"value":40, "context":{"direction": 230}}}

As seen, the magnitude corresponds to the "velocity" value while the direction is embedded in the variable context under the "direction" key. In the widget settings, it would look like this:

2. Polar direction as an independent variable: 2 separate variables supply the data to the widget; one for magnitude and the other one for direction. 

IMPORTANT: Both variables must have the same timestamp, which means data should be sent in the same payload:

{
 "velocity": 40,
 "direction": 230
}

In this sample payload, both variables will have the same timestamp and hence, will be compatible with the Rose Chart widget. 

To use the widget in this mode, unselect the option "Get angle from variable's context", then select the Polar variable:

2. Create a Static Rose Chart Widget

After getting your direction-parameterized data to Ubidots in any of the 2 mentioned formats, head to the "Devices" dropdown in the Navigation bar, then "Dashboards", and select the appropriate dashboard to be working on. Next, follow the  steps below to create a static Rose chart widget:

Step 1: Click on the top-right "+" button
Step 2: Select the Rose chart widget option
Step 3: Add the Magnitude and Angle data source based on mode (section 1.)
Step 4: Choose a color in the color picker next to the magnitude variable
Moving to the Appearance section:
Step 5: Set all the available fields:
Name you Rose chart widget
– Choose a Font Family
– Set the Number of bins for each of the direction-based histograms
– Select the Polar axes to 4, 8 or 16
– Enter the expected Magnitude range
– Set the Decimal places
– If any, enter a Custom Style for your widget's 

3. Create a Dynamic Rose Chart Widget

Similar to section 2, head to the "Devices" dropdown in the Navigation bar, then "Dashboards", and select the appropriate dashboard to be working on, in this case, it should be a Dynamic Dashboard. Next, follow the steps below to create a Dynamic Rose chart widget:

Step 1: Click on the top-right "+" button
Step 2: Select the Rose chart widget option
Step 3: Add the Magnitude and Angle variable based on mode (section 1.) by entering the respective variables labels
Moving to the Appearance section:
Step 4: Set all the available fields:
Name you Rose chart widget
– Choose a Font Family
– Set the Number of bins for each of the direction-based histograms
– Select the Polar axes to 4, 8 or 16
– Enter the expected Magnitude range
– Set the Decimal places
– If any, enter a Custom Style for your widget

People also visited:

Did this answer your question?