Live Chat Icon For mobile
Live Chat Icon

Bold Reports

Add Gauges to Reports Using Bold Reports Designer

We are excited to announce that the Report Designer supports an gauge report item as of the March 2020 Bold Reports release.

Gauges are used to visualize key performance indicators (KPIs) that track the progress made toward achieving a target or goal. When placed inside a tablix or matrix, gauges can illustrate values inside every cell. In Bold Reports, we have provided radial and linear gauges with pointer and range properties. The pointer indicates the gauge’s current value. The range indicates the status of values on the gauge, and they are defined by start and end values.

Radial gauge

Radial gauges are circular visualizations for representing key performance indicators. In Bold Reports, we have provided a radial gauge widget with half circle and auto variants. The auto type is used to provide custom start and sweep angles.

The radial gauge has three pointer types: needle, marker, and bar. The marker pointer has a variety of marker styles that can be used, including circle, rectangle, diamond, and triangle. The needle pointer has a cap, which can be displayed or hidden. The radial and half circle gauges are shown in the following screenshot.

Radial and half circle gauge
Radial and half circle gauge

Linear Gauge

Linear gauges are rectangular in shape and present key performance indicators. In Bold Reports, we have provided a linear gauge with horizontal, vertical, and auto orientations. The auto type customizes the orientation based on the height and width of the gauge.

The linear gauge has two pointer types: marker and bar. The marker pointer has marker styles that include circle, rectangle, diamond, and triangle. The horizontal and vertical linear gauges are shown in the following screenshot.

Horizontal and vertical linear gauge
Horizontal and vertical linear gauge

The gauges can be used in a wide range of report scenarios, such as:

  • Sales: target vs. achieved.
  • Consumer Packaged Goods: demand vs. production.
  • Retail: goods vs. sold.
  • Rainfall: predicted vs. accumulated.

In this blog, we are going to design a company revenue report that analyzes estimated versus actual revenue per year for five consecutive years. We are going to visualize the actual revenue using radial and linear gauges with the following conditions:

ConditionColor
Actual Revenue < 50% Estimated RevenueRed
50% Estimated Revenue > Actual Revenue < 75% Estimated RevenueOrange
Actual Revenue > 75% Estimated RevenueGreen

Now, let’s dive into creating a revenue report using Bold Reports Designer.

Populate the revenue data in a table

Follow these steps to populate the revenue table:

  1. Navigate to the Bold Report Designer.
  2. Add a datasource and a dataset to connect revenue data.

    Note: Refer to this tutorial to connect a database and query a SQL Server instance. You can download the script to create the revenue database used in this blog from Syncfusion.

  3. In this blog we connected the data source and data set with the Year, EstimatedRevenue, and ActualRevenue table headers.
  4. Drag and drop the Table report item from the Widgets panel and click the settings icon of the table cell.

    Table cell settings
    Table cell settings
  5. The Settings button opens a context menu and displays the available data set’s column names. Choose Year for the first cell, EstimatedRevenue for the second cell and ActualRevenue for the third cell. The data set will automatically be mapped for this table.

    Mapping columns to the table
    Mapping columns to the table
  6. To edit the table header, click the settings icon in the header cell and then choose the Add Text option, which will display an Add Text dialog where you can provide your desired header text.

    Edit table header text
    Edit table header text
  7. You can customize the table text font style, font size, text alignment, vertical alignment using the Properties panel.

Add a radial gauge to a table cell

In this section, we are going to add a radial gauge in a table cell.

  1. Insert a new column by right-clicking on a column gripper and selecting Insert Column > Right. Then, add header text.

    Insert new column
    Insert new column
  2. Drag a radial gauge report item from Deviation category of the Widgets panel into a table cell and resize it according to your layout.

    Drag and drop radial gauge into table
    Drag and drop radial gauge into table
  3. After dropping the radial gauge item in to the table cell, the gauge’s properties will be listed in the Properties panel.

    Radial type configuration
    Radial type configuration

Assign values to radial gauge

  1. To assign values to the gauge, click on the cell the radial gauge is in and navigate to Maximum Range under the Data category in properties panel. Click the icon next to the Maximum button and click Maximum under Expression to set the maximum value of the radial gauge using the Expression Builder.

    Maximum range configuaration
    Maximum range configuaration
  2. The Expression dialog will open for the maximum range. Now, map the EstimatedRevenue field =Fields!EstimatedRevenue.Value.

    Maximum range expression
    Maximum range expression
  3. Click the icon next to Value and click the Expression button to set the pointer value using the Expression Builder.

    Pointer value configuration
    Pointer value configuration
  4. The Expression dialog will open for the value. Now, map the ActualRevenue field =Fields!ActualRevenue.Value.
  5. Enter the Interval under the Data category as $13000 to avoid over lapping of labels.

    Set interval value
    Set interval value

Assign values to pointer and range

  1. To assign cap values in the Pointer category, click the icon next to the Cap property and select Advance. Assign the following values in the Pointer
    PropertiesValues
    PlacementInside
    TypeNeedle
    Width13
    Cap -> Width20
  2. Click the icon next to Color under the Pointer category and Advanced Options and then click the Expression button to set the pointer and cap colors using the Expression Builder. The Expression dialog will open for the pointer and cap colors. Enter the following expression in the dialog to differentiate between achieved and unachieved targets:  =iif(Fields!ActualRevenue.Value < (0.5 * Fields!EstimatedRevenue.Value), "Red",
    iif(Fields!ActualRevenue.Value < (0.75 * Fields!EstimatedRevenue.Value), "Orange", "Green"))

    Pointer properties configuration
    Pointer properties configuration
  3. In the Range category, click the icon next to Enable Range and assign these values:
    PropertiesValues
    PlacementCross
    Start Range0
    Width30
  4. Click the icon next to the End Range button and click End under Expression to set the end value of the range using the Expression Builder. The Expression dialog will open for the end range. Enter the following expression: =Fields!ActualRevenue
  5. Click the icon next to the Color property and click the Expression button to set the range color using the Expression Builder. The Expression dialog will open for the range color. Enter the following expression: =iif(Fields!ActualRevenue.Value < (0.5 * Fields!EstimatedRevenue.Value), "Red",
    iif(Fields!ActualRevenue.Value < (0.75 * Fields!EstimatedRevenue.Value), "Orange", "Green"))

    Range properties configuration
    Range properties configuration
  6. Click the Preview button to view the radial gauges. Your report should look like the following:
Revenue report using radial gauge
Revenue report using radial gauge

In the above screenshot, the radial gauge in the first row is red because the actual revenue is much less than the estimated revenue (i.e. ActualRevenue < 50% EstimatedRevenue). The radial gauges in the second and third rows are orange because the actual revenue is moderate compared to the estimated revenue (i.e. 50% EstimatedRevenue > ActualRevenue < 75% EstimatedRevenue). The radial gauges in the last two rows are green because the actual revenue is more than 75% of estimated revenue (i.e. ActualRevenue > 75% EstimatedRevenue).

Now, we have seen how to populate revenue data in table, insert radial gauges in that table, and assign values to the radial gauges.

Add linear gauge to table cell

We can also create the revenue report using linear gauges to display the same values in another representation.

  1. Drag a linear gauge report item from the Deviation category of the Widgetspanel into a table cell and resize it according to your layout. Assign values to linear gauge as listed in the following table:
    PropertiesValues
    Data
    Value=Fields!ActualRevenue.Value
    Range > Maximum=Fields!EstimatedRevenue.Value
    Interval13000
    Pointer
    PlacementInside
    TypeMarker
    Width25
    Color=iif(Fields!ActualRevenue.Value < (0.5 * Fields!EstimatedRevenue.Value), “Red”,
    iif(Fields!ActualRevenue.Value < (0.75 * Fields!EstimatedRevenue.Value), “Orange”, “Green”))
    Range
    PlacementCross
    Range > Start0
    Range > End=Fields!ActualRevenue.Value
    Width > Start, Width > End30
    Color=iif(Fields!ActualRevenue.Value < (0.5 * Fields!EstimatedRevenue.Value), “Red”, iif(Fields!ActualRevenue.Value < (0.75 * Fields!EstimatedRevenue.Value), “Orange”, “Green”))

    Linear gauge into table
    Linear gauge into table
  2. Click Preview. Your report will look like the following:
Revenue report using linear gauge
Revenue report using linear gauge

Thus, we have designed the revenue report with linear gauges instead of radial gauges to visualize the estimated versus actual revenue of the company for five consecutive years.

Conclusion

I hope this blog provided a clear overview the radial and linear gauges, how to insert them in a tablix report, and how to configure revenue data using Bold Reports Designer. For more information about customizing gauges, refer to our documentation.

If you have any questions, please post them in the comments section below. You can also contact us by submitting your queries through our contact page, or if you already have an account, you can log in to submit your support questions. Feel free to check out the Bold Reports Embedded demos and our documentation to explore the tools and their various customization features.

Bold Reports now comes with a 15-day free trial with no credit card information required. We welcome you to start a free trial and experience Bold Reports for yourself. Give it a try and let us know what you think!

Tags: Bold Reports,create-gauge-reports,create-radial-gauge-reports,create-linear-gauge-reports,radial-gauge report,linear-gauge report,reporting-tools,web-based report-designer

Leave a Reply