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.
- 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
- 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