How to: Obtain a Dashboard Item's Client Data in the Web Viewer

Aug 03, 2020
4 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 following example demonstrates how to obtain client data corresponding to a particular visual element using ASPxDashboardViewer’s client-side API.

In this example, the ASPxClientDashboardViewer.ItemClick event is handled to obtain client data and invoke the dxPopup widget with the child dxChart.

In the event handler, the ASPxClientDashboardItemClickEventArgs.GetData method is called to obtain dashboard item’s client data. The ASPxClientDashboardItemClickEventArgs.GetAxisPoint method returns the axis point corresponding to the clicked card while the ASPxClientDashboardItemData.GetSlice method returns the slice of client data by this axis point. To obtain axis points belonging to the “Sparkline” data axis, the ASPxClientDashboardItemDataAxis.GetPoints method is used. Corresponding actual/target values are obtained using the ASPxClientDashboardItemData.GetDeltaValue method.

The dxChart is used to display the detailed chart showing a variation of actual/target values over time.

Note

A complete sample project is available at https://github.com/DevExpress-Examples/how-to-obtain-data-from-a-sparkline-field-corresponding-to-a-selected-row-or-card-t148767.

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

<%@ Register Assembly="DevExpress.Dashboard.v15.1.Web, Version=15.1.7.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 id="myPopup"></div>
    <div>
        <dx:ASPxDashboardViewer ID="ASPxDashboardViewer1" runat="server" 
            DashboardSource="<%# typeof(Dashboard_ClientDataCards_Web.Dashboard1) %>"
            ClientSideEvents-Init="function(s, e) { initPopup(); }" 
            ClientSideEvents-ItemClick="function(s, e) { getClientData(e); }"
            Width="1200"
            >
        </dx:ASPxDashboardViewer>
    </div>
    </form>
</body>
</html>

<script type="text/javascript" src="<%= Page.ResolveClientUrl("~/Scripts/ClientData.js") %>"></script>

function getClientData(args) {
    if (args.ItemName == "cardDashboardItem1") {
       var clientData = [],
           clientDataTable = [],
           clickedItemData,
           delta;
       var sparklineAxis = DashboardDataAxisNames.SparklineAxis,
           defaultAxis = DashboardDataAxisNames.Default;

        clientData = args.GetData();
        clickedPoint = args.GetAxisPoint(defaultAxis);
        clickedItemData = clientData.GetSlice(clickedPoint);
        delta = args.GetDeltas()[0];

        for (var i = 0; i < clickedItemData.GetAxis(sparklineAxis).GetPoints().length; i++) {
            var dataTableRow = {},
            axisPoint = clickedItemData.GetSlice(clickedItemData.GetAxis(sparklineAxis).GetPoints()[i]);

            dataTableRow["Argument"] = clickedItemData.GetAxis(sparklineAxis).GetPoints()[i].GetValue();
            if (axisPoint.GetDeltaValue(delta.Id).GetActualValue().GetValue() != null &&
                axisPoint.GetDeltaValue(delta.Id).GetTargetValue().GetValue() != null) {
                dataTableRow["Actual"] = axisPoint.GetDeltaValue(delta.Id).GetActualValue().GetValue();
                dataTableRow["Target"] = axisPoint.GetDeltaValue(delta.Id).GetTargetValue().GetValue();
            }
            else {
                dataTableRow["Actual"] = 0;
                dataTableRow["Target"] = 0;
            }
            clientDataTable.push(dataTableRow);
        }

        var $chart = $('<div/>');
        $chart.dxChart({
            height: 500,
            dataSource: clientDataTable,
            series: [{
                valueField: 'Actual', name: 'Actual'
            }, {
                valueField: 'Target', name: 'Target'
            }
        ],
            commonSeriesSettings: {
                type: 'splineArea',
                argumentField: 'Argument',
                ignoreEmptyPoints: true
            },
            argumentAxis: {
                showZero: false,
                type: 'discrete'
            },
            valueAxis: {
                showZero: false,
                type: 'continuous',
                label: { format: 'currency' }
            }
        });

        var popup = $("#myPopup").data("dxPopup");
        popup.option('title', clickedPoint.GetValue() + " - Details");
        $popupContent = popup.content();
        $popupContent.empty();
        $popupContent.append($chart);
        popup.show();
    };
}

function initPopup() {
    $("#myPopup").dxPopup({
        width: 800, height: 600,
        title: "Details",
        showCloseButton: true
    });
}

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

<%@ Register Assembly="DevExpress.Dashboard.v15.1.Web, Version=15.1.7.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 id="myPopup"></div>
    <div>
        <dx:ASPxDashboardViewer ID="ASPxDashboardViewer1" runat="server" 
            DashboardSource="<%#GetType(Dashboard_ClientDataCards_Web.Dashboard1)%>"
            ClientSideEvents-Init="function(s, e) { initPopup(); }" 
            ClientSideEvents-ItemClick="function(s, e) { getClientData(e); }"
            Width="1200"
            >
        </dx:ASPxDashboardViewer>
    </div>
    </form>
</body>
</html>

<script type="text/javascript" src="<%=Page.ResolveClientUrl("~/Scripts/ClientData.js")%>"></script>

function getClientData(args) {
    if (args.ItemName == "cardDashboardItem1") {
       var clientData = [],
           clientDataTable = [],
           clickedItemData,
           delta;
       var sparklineAxis = DashboardDataAxisNames.SparklineAxis,
           defaultAxis = DashboardDataAxisNames.Default;

        clientData = args.GetData();
        clickedPoint = args.GetAxisPoint(defaultAxis);
        clickedItemData = clientData.GetSlice(clickedPoint);
        delta = args.GetDeltas()[0];

        for (var i = 0; i < clickedItemData.GetAxis(sparklineAxis).GetPoints().length; i++) {
            var dataTableRow = {},
            axisPoint = clickedItemData.GetSlice(clickedItemData.GetAxis(sparklineAxis).GetPoints()[i]);

            dataTableRow["Argument"] = clickedItemData.GetAxis(sparklineAxis).GetPoints()[i].GetValue();
            if (axisPoint.GetDeltaValue(delta.Id).GetActualValue().GetValue() != null &&
                axisPoint.GetDeltaValue(delta.Id).GetTargetValue().GetValue() != null) {
                dataTableRow["Actual"] = axisPoint.GetDeltaValue(delta.Id).GetActualValue().GetValue();
                dataTableRow["Target"] = axisPoint.GetDeltaValue(delta.Id).GetTargetValue().GetValue();
            }
            else {
                dataTableRow["Actual"] = 0;
                dataTableRow["Target"] = 0;
            }
            clientDataTable.push(dataTableRow);
        }

        var $chart = $('<div/>');
        $chart.dxChart({
            height: 500,
            dataSource: clientDataTable,
            series: [{
                valueField: 'Actual', name: 'Actual'
            }, {
                valueField: 'Target', name: 'Target'
            }
        ],
            commonSeriesSettings: {
                type: 'splineArea',
                argumentField: 'Argument',
                ignoreEmptyPoints: true
            },
            argumentAxis: {
                showZero: false,
                type: 'discrete'
            },
            valueAxis: {
                showZero: false,
                type: 'continuous',
                label: { format: 'currency' }
            }
        });

        var popup = $("#myPopup").data("dxPopup");
        popup.option('title', clickedPoint.GetValue() + " - Details");
        $popupContent = popup.content();
        $popupContent.empty();
        $popupContent.append($chart);
        popup.show();
    };
}

function initPopup() {
    $("#myPopup").dxPopup({
        width: 800, height: 600,
        title: "Details",
        showCloseButton: true
    });
}

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode

Controls

Tools

Controls and Extensions

Tools

Maintenance Mode