How to: Add Custom Interactivity to a Dashboard Displayed in the ASP.NET Web Forms Dashboard Control
- 3 minutes to read
The Web Dashboard allows you to add a custom interactivity to dashboards using the ASPxClientDashboard.ItemVisualInteractivity event. This example demonstrates the following capabilities.
- The Grid dashboard item allows you to select categories and visualize a corresponding product quantity using the dxBarGauge widget. Note that the hidden ‘Quantity’ measure is used to pass the required values to the client.
- The Chart dashboard item highlights bars corresponding to a hovered argument value.
Note
A complete sample project is available at https://github.com/DevExpress-Examples/aspxdashboard-how-to-add-custom-interactivity-to-a-dashboard-t495562.
var defaultAxis = DashboardDataAxisNames.DefaultAxis,
argumentAxis = DashboardDataAxisNames.ChartArgumentAxis;
function addCustomInteractivity(args) {
if (args.ItemName == "gridDashboardItem1") {
args.SetTargetAxes([defaultAxis]);
args.SetSelectionMode("Multiple");
}
if (args.ItemName == "chartDashboardItem1") {
args.SetTargetAxes([argumentAxis]);
args.EnableHighlighting(true);
}
}
function createControls() {
$('#barGauge').dxBarGauge({
startValue: 0,
endValue: 10000,
values: getAllValues(),
label: {
format: 'fixedPoint',
precision: 0
}
});
}
function applyCurrentSelection(args) {
var quantityValues = [];
if (args.ItemName == "gridDashboardItem1" & args.GetCurrentSelection().length != 0) {
var clientData = webViewer.GetItemData("gridDashboardItem1");
for (var i = 0; i < args.GetCurrentSelection().length; i++) {
var currentTuple = args.GetCurrentSelection()[i],
slice = clientData.GetSlice(currentTuple.GetAxisPoint()),
quantity = (slice.GetMeasureValue(clientData.GetMeasures()[0].Id)).GetValue();
quantityValues.push(quantity);
}
} else {
quantityValues = getAllValues();
}
$('#barGauge').data("dxBarGauge").values(quantityValues);
}
function getAllValues() {
var quantityValues = [],
clientData = webViewer.GetItemData("gridDashboardItem1");
for (var i = 0; i < clientData.GetAxis(defaultAxis).GetPoints().length; i++) {
var slice = clientData.GetSlice(clientData.GetAxis(defaultAxis).GetPoints()[i]),
quantity = (slice.GetMeasureValue(clientData.GetMeasures()[0].Id)).GetValue();
quantityValues.push(quantity);
}
return quantityValues;
}