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 Obtain Underlying and Displayed Data in ASP.NET Web Forms Dashboard Control topic.
Warning
A use of ASPxClientDashboard API reduces flexibility when you configure the control. The DashboardControl underlies the ASPxClientDashboard object. The control provides access to all client settings and allows you to implement complex scenarios. We recommend that you use the DashboardControl 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('viewer-api');
if (viewerApiExtension)
viewerApiExtension.on('itemClick', onItemClick);
}
function onItemClick(args) {
if (args.itemName == "cardDashboardItem1") {
var clientData = [],
clientDataTable = [],
clickedItemData,
delta;
var sparklineAxis = DashboardDataAxisNames.SparklineAxis,
defaultAxis = DashboardDataAxisNames.DefaultAxis;
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(sender) {
$("#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 |