The example uses the Dashboard Control's client-side API to obtain client data that corresponds to a particular visual element. When you click a card, dxChart displays the detailed chart and shows a variation of actual/target values over time.
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 is called to obtain dashboard item's client data. The e.getAxisPoint method returns the axis point that corresponds 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 belong to the "Sparkline" data axis. Corresponding actual/target values are obtained using the ItemData.getDeltaValue(deltaId) method.
Files to Review
Documentation
- Client-Side API Overview for ASP.NET Core Dashboard
- Obtain Underlying and Displayed Data in the ASP.NET Core Dashboard Control
- Obtain Underlying and Displayed Data in Dashboard Control for JavaScript Applications
More Examples
- Dashboard for ASP.NET Core - How to obtain a dashboard item's underlying data for a clicked visual element
- Dashboard for ASP.NET Core - How to obtain underlying data for the specified dashboard item
- Dashboard for MVC - How to obtain a dashboard item's client data
- Dashboard for MVC - How to obtain underlying data for the specified dashboard item
- Dashboard for MVC - How to obtain a dashboard item's underlying data for a clicked visual element
- Dashboard for Web Forms - How to obtain a dashboard item's client data
- Dashboard for Web Forms - How to obtain a dashboard item's underlying data for a clicked visual element
- Dashboard for Web Forms - How to obtain underlying data for the specified dashboard item
Does this example address your development requirements/objectives?
(you will be redirected to DevExpress.com to submit your response)
Example Code
AspNetCoreDashboard_ClientData/wwwroot/js/ClientData.js
JavaScriptfunction onBeforeRender(sender) {
var dashboardControl = sender;
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();
};
}
AspNetCoreDashboard_ClientData/Pages/_Layout.cshtml
Razor<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Dashboard Web Application</title>
<link href="css/site.min.css" rel="stylesheet" />
</head>
<body>
@RenderBody()
<script src="js/site.min.js"></script>
<script src="js/ClientData.js"></script>
</body>
</html>
AspNetCoreDashboard_ClientData/Pages/Index.cshtml
Razor@page
<div id="myPopup"></div>
<div style="position: absolute; left: 0; top: 0; right: 0; bottom: 0;">
@(Html.DevExpress().Dashboard("dashboardControl1")
.ControllerName("DefaultDashboard")
.Width("100%")
.Height("100%")
.OnBeforeRender("onBeforeRender")
)
</div>