ASPxClientDashboardItemDataAxisPoint Class
A point on the data axis.
Namespace: DevExpress.DashboardWeb.Scripts
Assembly: DevExpress.Dashboard.v18.2.Web.WebForms.Scripts.dll
Declaration
Related API Members
The following members return ASPxClientDashboardItemDataAxisPoint objects:
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.
- ClientData.js (C#)
- Default.aspx (C#)
- Default.aspx.cs
- ClientData.js (VB.NET)
- Default.aspx (VB.NET)
- Default.aspx.vb
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
});
}