ASPxClientDashboardItemData Class
Represents multidimensional data visualized in the dashboard item.
#Declaration
declare class ASPxClientDashboardItemData
#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. 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 Obtain Underlying and Displayed Data in ASP.NET Web Forms Dashboard Control topic.
Warning
A use of ASPx
API reduces flexibility when you configure the control. The DashboardASPx
object. The control provides access to all client settings and allows you to implement complex scenarios. We recommend that you use the Dashboard
API to configure the Web Dashboard on the client. More information: Client-Side Functionality.
#Example
The following example uses the DashboardControl‘s client-side API to obtain client data that corresponds to a particular visual element.
The ViewerApiExtensionOptions.onItemClick event is handled to obtain client data and invoke the dxPopup
component with the dxChart
.
In the event handler, the e.getData method call obtains dashboard item’s client data. The e.getAxisPoint method returns the axis point corresponding to the clicked card while the ItemData.getSlice method returns the slice of client data by this axis point.
The ItemDataAxis.getPoints method is used to obtain axis points that belongs to the “Sparkline” data axis. Corresponding actual/target values are obtained using the ItemData.getDeltaValue method.
When you click a card, the dxChart
displays the detailed chart and shows a variation of actual/target values over time.
function onBeforeRender(sender) {
var dashboardControl = sender.GetDashboardControl();
var viewerApiExtension = dashboardControl.findExtension('viewerApi');
if (viewerApiExtension)
viewerApiExtension.on('itemClick', onItemClick);
$("#myPopup").dxPopup({
width: 800, height: 600,
title: "Details",
showCloseButton: true
});
}
function onItemClick(args) {
if (args.itemName == "cardDashboardItem1") {
var clientData = [],
clientDataTable = [],
clickedItemData,
delta;
var sparklineAxis = "Sparkline",
defaultAxis = "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();
};
}
#Methods
#CreateTuple(values) Method
Creates a tuple based on the specified axes names and corresponding values.
#Declaration
CreateTuple(
values: any[] | ASPxClientDashboardItemDataAxisPoint[]
): ASPxClientDashboardItemDataAxisPointTuple
#Parameters
Name | Type | Description |
---|---|---|
values | any[] | ASPx |
An array of name-value pairs containing the axis name and corresponding values. |
#Returns
Type | Description |
---|---|
ASPx |
An ASPx |
#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
): ASPxClientDashboardItemDataAxis
#Parameters
Name | Type | Description |
---|---|---|
axis |
string | A string value returned by the Dashboard |
#Returns
Type | Description |
---|---|
ASPx |
A ASPx |
#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 |
---|---|
ASPx |
An array of ASPx |
#GetDeltaValue(deltaId) Method
Gets the summary value for the specified delta.
#Declaration
GetDeltaValue(
deltaId: string
): ASPxClientDashboardItemDataDeltaValue
#Parameters
Name | Type | Description |
---|---|---|
delta |
string | A String that is the data item identifier. |
#Returns
Type | Description |
---|---|
ASPx |
A ASPx |
#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 |
---|---|---|
axis |
string | A string value returned by the Dashboard |
#Returns
Type | Description |
---|---|
ASPx |
An array of ASPx |
#GetMeasures Method
Gets the measures for the current ASPxClientDashboardItemData
object.
#Declaration
GetMeasures(): ASPxClientDashboardItemDataMeasure[]
#Returns
Type | Description |
---|---|
ASPx |
An array of ASPx |
#GetMeasureValue(measureId) Method
Returns a total summary value for the specified measure.
#Declaration
GetMeasureValue(
measureId: string
): ASPxClientDashboardItemDataMeasureValue
#Parameters
Name | Type | Description |
---|---|---|
measure |
string | A String that is the measure identifier. |
#Returns
Type | Description |
---|---|
ASPx |
A ASPx |
#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
): ASPxClientDashboardItemData
#Parameters
Name | Type | Description |
---|---|---|
tuple | ASPx |
A ASPx |
#Returns
Type | Description |
---|---|
ASPx |
An |