ASPxClientDashboard.GetItemData(String) Method

Returns the client data for the specified dashboard item.

Namespace: DevExpress.DashboardWeb.Scripts

Assembly: DevExpress.Dashboard.v18.2.Web.WebForms.Scripts.dll

Declaration

C#

public ASPxClientDashboardItemData GetItemData(
    string itemName
)

VB.NET

Public Function GetItemData(
    itemName As String
) As ASPxClientDashboardItemData

Parameters

Name	Type	Description
itemName	String	A string that specifies the component name of the dashboard item.

Returns

Type	Description
ASPxClientDashboardItemData	An ASPxClientDashboardItemData object that represents multidimensional data visualized in the dashboard item.

Example

The following example demonstrates how to obtain client data corresponding to a particular visual element using ASPxDashboard‘s client-side API. In this example, the ASPxClientDashboard.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-a-dashboard-items-client-data-in-the-aspnet-dashboard-control-t492284.

ClientData.js (C#)

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

Default.aspx (C#)

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

<%@ 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 id="myPopup"></div>
    <div style="position:absolute; left:0; right:0; top:0; bottom:0;"> 
        <dx:ASPxDashboard ID="ASPxDashboard1" runat="server" 
            WorkingMode="Viewer" 
            ClientSideEvents-Init="function(s, e) { initPopup(); }" 
            ClientSideEvents-ItemClick="function(s, e) { getClientData(e); }"  
            Height="100%" Width="100%">
        </dx:ASPxDashboard>
    </div>
    </form>
</body>
</html>
<script type="text/javascript" src="<%= Page.ResolveClientUrl("~/Scripts/ClientData.js") %>"></script>

Default.aspx.cs

using System;

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

ClientData.js (VB.NET)

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

Default.aspx (VB.NET)

<%@ Page Language="vb" AutoEventWireup="true" CodeBehind="Default.aspx.vb" 
    Inherits="ASPxDashboard_ClientData.Default" %>

<%@ 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 id="myPopup"></div>
    <div style="position:absolute; left:0; right:0; top:0; bottom:0;"> 
        <dx:ASPxDashboard ID="ASPxDashboard1" runat="server" 
            WorkingMode="Viewer" 
            ClientSideEvents-Init="function(s, e) { initPopup(); }" 
            ClientSideEvents-ItemClick="function(s, e) { getClientData(e); }"  
            Height="100%" Width="100%">
        </dx:ASPxDashboard>
    </div>
    </form>
</body>
</html>
<script type="text/javascript" src="<%=Page.ResolveClientUrl("~/Scripts/ClientData.js")%>"></script>

Default.aspx.vb

Imports System

Namespace ASPxDashboard_ClientData
    Partial Public Class [Default]
        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