ASPxClientDashboardItemDataAxisPoint Class

A point on the data axis.

Declaration

declare class ASPxClientDashboardItemDataAxisPoint

Remarks

Each data-bound dashboard item uses a multidimensional representation of data (the ASPxClientDashboardItemData class). This provides the capability to visualize information hierarchically. For instance, the pivot grid allows end-users to expand or collapse column/row field values to view data at different detail levels. The Drill-Down feature provides a common way to move between different detail levels in different dashboard items.

The value corresponding to a specific hierarchy level is stored in the ASPxClientDashboardItemDataAxisPoint class that defines a data point in a multidimensional space. Such data points are placed on a specific data axis, represented by the ASPxClientDashboardItemDataAxis class. For instance, the pivot grid has the “Row” and “Column” axes, the chart has the “Argument” and “Series” axes, etc.

To obtain the parent point for the current axis point, use the ASPxClientDashboardItemDataAxisPoint.GetParent method. The ASPxClientDashboardItemDataAxisPoint.GetChildren method returns the collection of child axis points.

To obtain axis point values, use the ASPxClientDashboardItemDataAxisPoint.GetDimensionValue method.

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.

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="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>

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

<%@ 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>

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

See Also

Obtain Underlying and Displayed Data

Methods

GetAxisName Method

Gets the name of the axis to which the current axis point belongs.

Declaration

GetAxisName(): string

Returns

Type	Description
string	A String that in the name of the axis.

Remarks

The DashboardDataAxisNames class exposes constants that identify possible types of data axes.

GetChildren Method

Gets the child axis points for the current axis point.

Declaration

GetChildren(): ASPxClientDashboardItemDataAxisPoint[]

Returns

Type	Description
ASPxClientDashboardItemDataAxisPoint[]	An array of `ASPxClientDashboardItemDataAxisPoint` objects representing child axis points.

See Also

GetParent

GetDimension Method

Gets the last level dimension corresponding to the current axis point.

Declaration

GetDimension(): ASPxClientDashboardItemDataDimension

Returns

Type	Description
ASPxClientDashboardItemDataDimension	A ASPxClientDashboardItemDataDimension object that contains the dimension metadata.

See Also

GetDimensions

GetDimensions Method

Gets the collection of dimensions used to create a hierarchy of axis points from the root point to the current axis point.

Declaration

GetDimensions(): ASPxClientDashboardItemDataDimension[]

Returns

Type	Description
ASPxClientDashboardItemDataDimension[]	An array of ASPxClientDashboardItemDataDimension objects that contain the dimension metadata.

GetDimensionValue Method

Gets the dimension values at the specified axis point.

Declaration

GetDimensionValue(
    dimensionId?: string
): ASPxClientDashboardItemDataDimensionValue

Parameters

Name	Type
dimensionId	string

Returns

Type	Description
ASPxClientDashboardItemDataDimensionValue	A ASPxClientDashboardItemDataDimensionValue object that contains the dimension values at the specified axis point.

GetDisplayText Method

Gets the display text corresponding to the current axis point.

Declaration

GetDisplayText(): string

Returns

Type	Description
string	A String that is the display text corresponding to the current axis point.

See Also

GetValue

GetUniqueValue

GetParent Method

Gets the parent axis point for the current axis point.

Declaration

GetParent(): ASPxClientDashboardItemDataAxisPoint

Returns

Type	Description
`ASPxClientDashboardItemDataAxisPoint`	An `ASPxClientDashboardItemDataAxisPoint` object representing the parent axis point.

See Also

GetChildren

GetUniqueValue Method

Gets the unique value corresponding to the current axis point.

Declaration

GetUniqueValue(): any

Returns

Type	Description
any	The unique value corresponding to the current axis point.

See Also

GetValue

GetDisplayText

GetValue Method

Gets the value corresponding to the current axis point.

Declaration

GetValue(): any

Returns

Type	Description
any	The value corresponding to the current axis point.

See Also

GetUniqueValue

GetDisplayText