ASPxClientDashboardItemData Class
Represents multidimensional data visualized in the dashboard item.
Declaration
declare class ASPxClientDashboardItemDataRemarks
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. Use the ASPxClientDashboard.GetItemData method to obtain multidimensional data visualized in the specified dashboard item.
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 that is represented by the ASPxClientDashboardItemDataAxis class. For instance, a pivot grid has the “Row” and “Column” axes, a chart has the “Argument” and “Series” axes, etc.
Use the following methods to access the displayed data.
- The ASPxClientDashboardItemData.GetAxisNames property returns the names of available data axes. You can obtain the required axis using the ASPxClientDashboardItemData.GetAxis method.
- Use the ASPxClientDashboardItemDataAxis.GetPoints method to obtain the axis points that are placed on the obtained data axis.
- Finally, you can obtain the dimension value using the ASPxClientDashboardItemDataAxisPoint.GetDimensionValue method.
To learn more, see the Obtaining Underlying and Displayed Data topic.
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
});
}
Methods
CreateTuple(values) Method
Creates a tuple based on the specified axes names and corresponding values.
Declaration
CreateTuple(
values: any[] | ASPxClientDashboardItemDataAxisPoint[]
): ASPxClientDashboardItemDataAxisPointTupleParameters
| Name | Type | Description |
|---|---|---|
| values | any[] | ASPxClientDashboardItemDataAxisPoint[] | An array of name-value pairs containing the axis name and corresponding values. |
Returns
| Type | Description |
|---|---|
| ASPxClientDashboardItemDataAxisPointTuple | An ASPxClientDashboardItemDataAxisPointTuple object representing an axis point tuple. |
Remarks
For instance, you can use the following syntax to pass a name-value pair to the CreateTuple method.
var axisPointTuple = clientData.CreateTuple([{ AxisName: DashboardDataAxisNames.DefaultAxis, Value: ["UK", "Robert King"]}]);
GetAxis(axisName) Method
Returns the specified data axis.
Declaration
GetAxis(
axisName: string
): ASPxClientDashboardItemDataAxisParameters
| Name | Type | Description |
|---|---|---|
| axisName | string | A string value returned by the DashboardDataAxisNames class that specifies the name of the data axis. |
Returns
| Type | Description |
|---|---|
| ASPxClientDashboardItemDataAxis | A ASPxClientDashboardItemDataAxis object that contains data points corresponding to the specified value hierarchy. |
GetAxisNames Method
Gets the names of the axes that constitute the current ASPxClientDashboardItemData.
Declaration
GetAxisNames(): string[]Returns
| Type | Description |
|---|---|
| string[] | An array of String values that represent the names of the axes. |
Remarks
The DashboardDataAxisNames class exposes constants that identify possible types of data axes.
GetDataMembers Method
Returns an array of data members available in a data source.
Declaration
GetDataMembers(): string[]Returns
| Type | Description |
|---|---|
| string[] | An array of string values that represent data members available in a data source. |
GetDeltas Method
Gets the deltas for the current ASPxClientDashboardItemData object.
Declaration
GetDeltas(): ASPxClientDashboardItemDataDelta[]Returns
| Type | Description |
|---|---|
| ASPxClientDashboardItemDataDelta[] | An array of ASPxClientDashboardItemDataDelta objects containing the delta metadata. |
GetDeltaValue(deltaId) Method
Gets the summary value for the specified delta.
Declaration
GetDeltaValue(
deltaId: string
): ASPxClientDashboardItemDataDeltaValueParameters
| Name | Type | Description |
|---|---|---|
| deltaId | string | A String that is the data item identifier. |
Returns
| Type | Description |
|---|---|
| ASPxClientDashboardItemDataDeltaValue | A ASPxClientDashboardItemDataDeltaValue object providing delta element values. |
Remarks
Use the ASPxClientDashboardItemDataDelta.Id property to obtain the data item identifier passed to the GetDeltaValue method. The ASPxClientDashboardItemDataDelta class objects are returned by the following properties.
GetDimensions(axisName) Method
Gets the dimensions used to create a hierarchy of axis points for the specified axis.
Declaration
GetDimensions(
axisName: string
): ASPxClientDashboardItemDataDimension[]Parameters
| Name | Type | Description |
|---|---|---|
| axisName | string | A string value returned by the DashboardDataAxisNames class that specifies the name of the data axis. |
Returns
| Type | Description |
|---|---|
| ASPxClientDashboardItemDataDimension[] | An array of ASPxClientDashboardItemDataDimension objects containing the dimension metadata. |
GetMeasures Method
Gets the measures for the current ASPxClientDashboardItemData object.
Declaration
GetMeasures(): ASPxClientDashboardItemDataMeasure[]Returns
| Type | Description |
|---|---|
| ASPxClientDashboardItemDataMeasure[] | An array of ASPxClientDashboardItemDataMeasure objects containing the measure metadata. |
GetMeasureValue(measureId) Method
Returns a total summary value for the specified measure.
Declaration
GetMeasureValue(
measureId: string
): ASPxClientDashboardItemDataMeasureValueParameters
| Name | Type | Description |
|---|---|---|
| measureId | string | A String that is the measure identifier. |
Returns
| Type | Description |
|---|---|
| ASPxClientDashboardItemDataMeasureValue | A ASPxClientDashboardItemDataMeasureValue object providing the measure value and display text. |
Remarks
Use the ASPxClientDashboardItemDataMeasure.Id property to obtain the data item identifier passed to the GetMeasureValue method. The ASPxClientDashboardItemDataMeasure class objects are returned by the following properties.
GetSlice(tuple) Method
Gets the slice of the current ASPxClientDashboardItemData object by the specified axis point tuple.
Declaration
GetSlice(
tuple: ASPxClientDashboardItemDataAxisPointTuple | ASPxClientDashboardItemDataAxisPoint
): ASPxClientDashboardItemDataParameters
| Name | Type | Description |
|---|---|---|
| tuple | ASPxClientDashboardItemDataAxisPointTuple | ASPxClientDashboardItemDataAxisPoint | A ASPxClientDashboardItemDataAxisPointTuple object that is a tuple of axis points. |
Returns
| Type | Description |
|---|---|
ASPxClientDashboardItemData |
An |