Customize Dashboard Colors

• Aug 03, 2020
• 5 minutes to read

Important

This documentation applies to v16.2. Starting with v17.1, the ASPxDashboardViewer control is in maintenance mode. In v19.1, the new Web Dashboard Control replaces the old Web Dashboard Viewer. This means that the Web Dashboard Viewer will not be included in our installation packages. See our blog post for more information.

Refer to the following KB articles to learn how to migrate to ASPxDashboard / ASP.NET MVC Dashboard:

• ASPxDashboardViewer -> ASPxDashboard

  How to migrate from ASPxDashboardViewer to ASPxDashboard working in the ViewerOnly mode

• MVCxDashboardViewer -> MVCxDashboard

  How to migrate from DashboardViewerExtension to DashboardExtension working in the ViewerOnly mode

The Dashboard Designer provides the capability to manage the coloring of dashboard item elements. To learn more, see Coloring.

The ASPxClientDashboardViewer allows you to color specified dashboard item elements (for instance, chart series points, pie segments or scatter chart points) at runtime by handling the ASPxClientDashboardViewer.ItemElementCustomColor event. For instance, this can be used to color specified elements based on their values. The image below illustrates the Chart dashboard item whose bars are colored based on the their values: values that exceed 200k are colored in green, values below 100k are colored in red, and values that fall into the range between 100k and 200k are colored in gray.

The ASPxClientDashboardItemElementCustomColorEventArgs class exposes the following members that allow you to color the required element.

• Use the ASPxClientDashboardItemElementCustomColorEventArgs.ItemName property to obtain the component name of the dashboard item for which the event was raised.

• The ASPxClientDashboardItemElementCustomColorEventArgs.GetTargetElement method returns the axis point tuple that corresponds to the current dashboard item element.

  The ASPxClientDashboardItemElementCustomColorEventArgs.GetMeasures method returns measures corresponding to the current dashboard item element. Use the ASPxClientDashboardViewer.GetItemData method to create the required tuple (using the ASPxClientDashboardItemData.CreateTuple method) and to obtain dashboard item measures (using the ASPxClientDashboardItemData.GetMeasures method).

• Use the ASPxClientDashboardItemElementCustomColorEventArgs.SetColor method to set the color of the current dashboard item element.

Note

By default, the Chart dashboard item colors lines (or fills areas) for the Line/Area series types using the color of the first series point. For these lines/areas, the ASPxClientDashboardItemElementCustomColorEventArgs.GetTargetElement method returns a tuple that does not contain the ASPxClientDashboardItemDataAxisPoint on the DashboardDataAxisNames.ChartArgumentAxis.

Example

The following example demonstrates how to color dashboard item elements using the ASPxClientDashboardViewer.ItemElementCustomColor event.

In this example, chart series points, whose values exceed specified thresholds, are colored in green. Chart series points, whose values fall below specified thresholds, are colored in red.

Pie segments, whose contributions in total fall below the specified threshold, are colored in orange.

Note

A complete sample project is available at https://github.com/DevExpress-Examples/how-to-color-dashboard-item-elements-in-the-web-viewer-t198119.

WebForm1.aspx.vb

Imports System
Imports DevExpress.DashboardWeb
Imports DevExpress.DataAccess.ConnectionParameters

Namespace Dashboard_ElementCustomColor_Web
    Partial Public Class WebForm1
        Inherits System.Web.UI.Page

        Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)

        End Sub

        Protected Sub ASPxDashboardViewer1_ConfigureDataConnection(ByVal sender As Object, _
                                           ByVal e As ConfigureDataConnectionWebEventArgs)
            If e.ConnectionName = "nwindConnection" Then

                ' Gets connection parameters used to establish a connection to the database.
                Dim parameters As Access97ConnectionParameters =
                    CType(e.ConnectionParameters, Access97ConnectionParameters)
                Dim databasePath As String = Server.MapPath("App_Data/nwind.mdb")

                ' Specifies the path to a database file.                    
                parameters.FileName = databasePath
            End If
        End Sub
    End Class
End Namespace

ElementCustomColor.js (VB.NET)

var argumentAxis = DashboardDataAxisNames.ChartArgumentAxis,
    seriesAxis = DashboardDataAxisNames.ChartSeriesAxis;

function setColors(args) {
    var chartClientData = webViewer.GetItemData("chartDashboardItem1"),
        pieClientData = webViewer.GetItemData("pieDashboardItem1");
    var currentElement = args.GetTargetElement();

    if (args.ItemName == "chartDashboardItem1") {
        var country = currentElement.GetAxisPoint(DashboardDataAxisNames.ChartSeriesAxis).GetValue();
        var value = chartClientData.GetSlice(currentElement.GetAxisPoint(argumentAxis)).
                                    GetSlice(currentElement.GetAxisPoint(seriesAxis)).
                                    GetMeasureValue(chartClientData.GetMeasures()[0].Id).GetValue();
        if (country == "UK" && value > 50000 || country == "USA" && value > 100000)
            args.SetColor("#33CC66");
        else
            args.SetColor("#CC6633");
    }

    if (args.ItemName == "pieDashboardItem1") {
        var value = pieClientData.GetSlice(currentElement.GetAxisPoint(argumentAxis)).
                                  GetMeasureValue(pieClientData.GetMeasures()[0].Id).GetValue();
        if (value < 100000)
            args.SetColor("#FFCC66");
    }   
};

WebForm1.aspx (VB.NET)

<%@ Page Language="vb" AutoEventWireup="true" CodeBehind="WebForm1.aspx.vb" 
         Inherits="Dashboard_ElementCustomColor_Web.WebForm1" %>

<%@ Register Assembly="DevExpress.Dashboard.v14.2.Web, Version=14.2.4.0, 
                                                       Culture=neutral, 
                                                       PublicKeyToken=b88d1754d700e49a"
    Namespace="DevExpress.DashboardWeb" TagPrefix="dx" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <dx:ASPxDashboardViewer ID="ASPxDashboardViewer1" runat="server" 
            ClientInstanceName="webViewer"
            ClientSideEvents-ItemElementCustomColor="function(s, e) { setColors(e); }"
            DashboardSource="~/App_Data/Dashboard.xml"
            onconfiguredataconnection="ASPxDashboardViewer1_ConfigureDataConnection"
            Height="600px" Width="1200px">
        </dx:ASPxDashboardViewer>
    </div>
    </form>
</body>
</html>
<script type="text/javascript" src="<%=Page.ResolveClientUrl("~/Scripts/ElementCustomColor.js")%>">
</script>

ElementCustomColor.js (C#)

var argumentAxis = DashboardDataAxisNames.ChartArgumentAxis,
    seriesAxis = DashboardDataAxisNames.ChartSeriesAxis;

function setColors(args) {
    var chartClientData = webViewer.GetItemData("chartDashboardItem1"),
        pieClientData = webViewer.GetItemData("pieDashboardItem1");
    var currentElement = args.GetTargetElement();

    if (args.ItemName == "chartDashboardItem1") {
        var country = currentElement.GetAxisPoint(DashboardDataAxisNames.ChartSeriesAxis).GetValue();
        var value = chartClientData.GetSlice(currentElement.GetAxisPoint(argumentAxis)).
                                    GetSlice(currentElement.GetAxisPoint(seriesAxis)).
                                    GetMeasureValue(chartClientData.GetMeasures()[0].Id).GetValue();
        if (country == "UK" && value > 50000 || country == "USA" && value > 100000)
            args.SetColor("#33CC66");
        else
            args.SetColor("#CC6633");
    }

    if (args.ItemName == "pieDashboardItem1") {
        var value = pieClientData.GetSlice(currentElement.GetAxisPoint(argumentAxis)).
                                  GetMeasureValue(pieClientData.GetMeasures()[0].Id).GetValue();
        if (value < 100000)
            args.SetColor("#FFCC66");
    }   
};

WebForm1.aspx.cs

using System;
using DevExpress.DashboardWeb;
using DevExpress.DataAccess.ConnectionParameters;

namespace Dashboard_ElementCustomColor_Web {
    public partial class WebForm1 : System.Web.UI.Page {
        protected void Page_Load(object sender, EventArgs e) {

        }

        protected void ASPxDashboardViewer1_ConfigureDataConnection(object sender, 
            ConfigureDataConnectionWebEventArgs e) {
            if (e.ConnectionName == "nwindConnection") {

                // Gets connection parameters used to establish a connection to the database.
                Access97ConnectionParameters parameters =
                    (Access97ConnectionParameters)e.ConnectionParameters;
                string databasePath = Server.MapPath("App_Data/nwind.mdb");

                // Specifies the path to a database file.                    
                parameters.FileName = databasePath;
            }
        }
    }
}

WebForm1.aspx (C#)

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" 
         Inherits="Dashboard_ElementCustomColor_Web.WebForm1" %>

<%@ Register Assembly="DevExpress.Dashboard.v14.2.Web, Version=14.2.6.0, 
                                                       Culture=neutral, 
                                                       PublicKeyToken=b88d1754d700e49a"
    Namespace="DevExpress.DashboardWeb" TagPrefix="dx" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <dx:ASPxDashboardViewer ID="ASPxDashboardViewer1" runat="server" 
            ClientInstanceName="webViewer"
            ClientSideEvents-ItemElementCustomColor="function(s, e) { setColors(e); }"
            DashboardSource="~/App_Data/Dashboard.xml"
            onconfiguredataconnection="ASPxDashboardViewer1_ConfigureDataConnection"
            Height="600px" Width="1200px">
        </dx:ASPxDashboardViewer>
    </div>
    </form>
</body>
</html>
<script type="text/javascript" src="<%= Page.ResolveClientUrl("~/Scripts/ElementCustomColor.js") %>">
</script>