How to: Color Dashboard Item Elements in the ASP.NET Web Forms Dashboard Control

Aug 01, 2019
2 minutes to read

The following example demonstrates how to color dashboard item elements using the ASPxClientDashboard.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/aspxdashboard-how-to-color-dashboard-item-elements-t491831.

using System;

namespace ASPxDashboard_ElementCustomColor
{
    public partial class WebForm1 : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            ASPxDashboard1.DashboardXmlPath= Server.MapPath("App_Data/dashboard1.xml");
        }
    }
}

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");
    }   
};

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

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div style="position:absolute; left:0; right:0; top:0; bottom:0;">
        <dx:ASPxDashboard ID="ASPxDashboard1" runat="server" 
            WorkingMode="Viewer" 
            ClientInstanceName="webViewer"
            ClientSideEvents-ItemElementCustomColor="function(s, e) { setColors(e); }" 
            Height="100%" Width="100%">
        </dx:ASPxDashboard>
    </div>
    </form>
</body>
</html>
<script type="text/javascript" src="<%= Page.ResolveClientUrl("~/Scripts/ElementCustomColor.js") %>"></script>

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");
    }   
};

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

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div style="position:absolute; left:0; right:0; top:0; bottom:0;">
        <dx:ASPxDashboard ID="ASPxDashboard1" runat="server" 
            WorkingMode="Viewer" 
            ClientInstanceName="webViewer"
            ClientSideEvents-ItemElementCustomColor="function(s, e) { setColors(e); }" 
            Height="100%" Width="100%">
        </dx:ASPxDashboard>
    </div>
    </form>
</body>
</html>
<script type="text/javascript" src="<%=Page.ResolveClientUrl("~/Scripts/ElementCustomColor.js")%>"></script>

Imports System

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

        Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
            ASPxDashboard1.DashboardXmlPath= Server.MapPath("App_Data/dashboard1.xml")
        End Sub
    End Class
End Namespace

Was this page helpful?

Thanks for your feedback!

How can we improve this help topic?

Add an example/code snippet.

Improve topic clarity.

Improve organization/make it easier to find.

Include additional information/content.

Additional comments/thoughts:

If you have any questions, submit a ticket to our Support Center.

Your feedback is appreciated.

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode