Clicks and Hover
The following events allow you to respond to mouse clicks on various elements of the Chart.
You can handle mouse hover events for points and series of the Chart.
When implementing a handling function, use the object passed to it as its parameter. Among the fields of this object, you can find the element whose state (click, hover) has been changed.
<dx:BootstrapChart ID="ClicksAndHoverChart" runat="server" DataSourceUrl="~/jsondata/architecture.json">
<ClientSideEvents
ArgumentAxisClick="onArgumentAxisClick"
LegendClick="onLegendClick"
PointClick="onPointClick"
PointHoverChanged="onPointHoverChanged"
SeriesClick="onSeriesClick"
SeriesHoverChanged="onSeriesHoverChanged" />
<ArgumentAxis DiscreteAxisDivisionMode="CrossLabels" GridVisible="true" TickInterval="1" />
<SettingsCommonSeries ArgumentField="year" />
<SeriesCollection>
<dx:BootstrapChartSplineSeries ValueField="smp" Name="SMP" />
<dx:BootstrapChartSplineSeries ValueField="mmp" Name="MMP" />
<dx:BootstrapChartSplineSeries ValueField="cnstl" Name="Cnstl" />
<dx:BootstrapChartSplineSeries ValueField="cluster" Name="Cluster" />
</SeriesCollection>
<SettingsLegend VerticalAlignment="Top" HorizontalAlignment="Right" />
</dx:BootstrapChart>
function onArgumentAxisClick(s, e) {
dxbsDemo.eventMonitor.trace(s, e, 'ArgumentAxisClick');
}
function onLegendClick(s, e) {
dxbsDemo.eventMonitor.trace(s, e, 'LegendClick');
}
function onPointClick(s, e) {
dxbsDemo.eventMonitor.trace(s, e, 'PointClick');
}
function onPointHoverChanged(s, e) {
dxbsDemo.eventMonitor.trace(s, e, 'PointHoverChanged');
}
function onSeriesClick(s, e) {
dxbsDemo.eventMonitor.trace(s, e, 'SeriesClick');
}
function onSeriesHoverChanged(s, e) {
dxbsDemo.eventMonitor.trace(s, e, 'SeriesHoverChanged');
}
Selection
The Chart supports selection of points and series with a mouse click, to which you can respond using the following events.
When implementing a handling function, use the object passed to it as its parameter. Among the fields of this object, you can find the element whose selection has been changed.
<dx:BootstrapChart ID="SelectionChart" runat="server" DataSourceUrl="~/jsondata/architecture.json">
<ClientSideEvents
PointClick="onPointClickSel"
PointSelectionChanged="onPointSelectionChanged"
SeriesClick="onSeriesClickSel"
SeriesSelectionChanged="onSeriesSelectionChanged" />
<ArgumentAxis DiscreteAxisDivisionMode="CrossLabels" GridVisible="true" TickInterval="1" />
<SettingsCommonSeries ArgumentField="year" />
<SeriesCollection>
<dx:BootstrapChartSplineSeries ValueField="smp" Name="SMP" />
<dx:BootstrapChartSplineSeries ValueField="mmp" Name="MMP" />
<dx:BootstrapChartSplineSeries ValueField="cnstl" Name="Cnstl" />
<dx:BootstrapChartSplineSeries ValueField="cluster" Name="Cluster" />
</SeriesCollection>
<SettingsLegend VerticalAlignment="Top" HorizontalAlignment="Right" />
</dx:BootstrapChart>
function onPointClickSel(s, e) {
var clickedPoint = e.target;
clickedPoint.isSelected() ? clickedPoint.clearSelection() : clickedPoint.select();
}
function onPointSelectionChanged(s, e) {
dxbsDemo.eventMonitor.trace(s, e, 'PointSelectionChanged')
}
function onSeriesClickSel(s, e) {
var clickedSeries = e.target;
clickedSeries.isSelected() ? clickedSeries.clearSelection() : clickedSeries.select();
}
function onSeriesSelectionChanged(s, e) {
dxbsDemo.eventMonitor.trace(s, e, 'SeriesSelectionChanged');
}
A point's tooltip appears when a user moves the mouse cursor over the point. When a tooltip appears, you can perform specific actions by handling the TooltipShown event. Additionally, when a tooltip is hidden, you can perform specific actions by handling the TooltipHidden event. The event parameter object provides access to the series point whose tooltip has been shown/hidden.
<dx:BootstrapChart ID="TooltipsChart" runat="server" DataSourceUrl="~/jsondata/architecture.json">
<SettingsToolTip Enabled="true" />
<ClientSideEvents
TooltipHidden="onTooltipHidden"
TooltipShown="onTooltipShown" />
<ArgumentAxis DiscreteAxisDivisionMode="CrossLabels" GridVisible="true" TickInterval="1" />
<SettingsCommonSeries ArgumentField="year" />
<SeriesCollection>
<dx:BootstrapChartSplineSeries ValueField="smp" Name="SMP" />
<dx:BootstrapChartSplineSeries ValueField="mmp" Name="MMP" />
<dx:BootstrapChartSplineSeries ValueField="cnstl" Name="Cnstl" />
<dx:BootstrapChartSplineSeries ValueField="cluster" Name="Cluster" />
</SeriesCollection>
<SettingsLegend VerticalAlignment="Top" HorizontalAlignment="Right" />
</dx:BootstrapChart>
function onTooltipHidden(s, e) {
dxbsDemo.eventMonitor.trace(s, e, 'TooltipHidden');
}
function onTooltipShown(s, e) {
dxbsDemo.eventMonitor.trace(s, e, 'TooltipShown');
}
Chart Control State
This demo illustrates the usage of client-side events provided by the Chart control.
Handle the Disposing event to perform a custom action when the widget is being removed.
The Done event fires when the Series and Point chart elements are ready to be accessed.
When an error or warning appears, the widget notifies you by passing a message to the browser console. This message contains the ID of the incident, a brief description, and a link to the Errors and Warnings document where further information about this incident can be found. However, you can handle errors and warnings the way you require. To do this, implement a client-side function performing the required actions and assign it to the IncidentOccurred event. Within this function, you have access to the information about an occurred incident. This information can be accessed from the Target field of the object passed to the callback function as a parameter. This information includes the following.
- id - Contains the ID of an incident. The full list of IDs can be found in the Errors and Warnings document.
- type - Contains the type of an incident. This field equals 'error' for errors or 'warning' for warnings.
- args - Contains the argument of an incident's message. The content of this field varies greatly, depending on the incident. For example, it may contain the name of a data source field that has not been specified correctly, or the name of an option that has not been set properly.
- text - Contains text passed to the browser console. This text includes the content of the args field if there is any.
- widget - Contains the name of a widget that produced the error or warning.
- version - Contains the currently used version of the ChartJS library.
<div class="mb-3">
<dx:BootstrapButton runat="server" Text="Refresh Chart" AutoPostBack="false">
<ClientSideEvents Click="refreshChart" />
</dx:BootstrapButton>
<dx:BootstrapButton runat="server" Text="Force Error" AutoPostBack="false">
<ClientSideEvents Click="forceError" />
</dx:BootstrapButton>
</div>
<br />
<dx:BootstrapCallbackPanel runat="server" ClientInstanceName="cp">
<ContentCollection>
<dx:ContentControl>
<dx:BootstrapPolarChart ID="ChartControlStateChart" runat="server" ClientInstanceName="polarChart" DataSourceUrl="~/jsondata/fruit.json" UseSpiderWeb="true">
<ClientSideEvents
Done="onDone"
Disposing="onDisposing"
IncidentOccurred="onIncidentOccurred" />
<SettingsCommonSeries ArgumentField="country" />
<SeriesCollection>
<dx:BootstrapPolarChartLineSeries ValueField="apples" Name="Apples" />
<dx:BootstrapPolarChartLineSeries ValueField="grapes" Name="Grapes" />
<dx:BootstrapPolarChartLineSeries ValueField="lemons" Name="Lemons" />
<dx:BootstrapPolarChartLineSeries ValueField="oranges" Name="Oranges" />
</SeriesCollection>
</dx:BootstrapPolarChart>
</dx:ContentControl>
</ContentCollection>
</dx:BootstrapCallbackPanel>
function onDone(s, e) {
dxbsDemo.eventMonitor.trace(s, e, 'Done');
}
function onDisposing(s, e) {
dxbsDemo.eventMonitor.trace(s, e, 'Disposing');
}
function onIncidentOccurred(s, e) {
dxbsDemo.eventMonitor.trace(s, e, 'IncidentOccurred');
}
function refreshChart() {
cp.PerformCallback();
}
function forceError() {
polarChart.GetInstance().option({ argumentAxis: { argumentType: "datetime" } });
}
Exporting
To perform a custom action before Chart data is exported, assign a client-side function to the Exporting event. For example, you can cancel exporting using the Cancel field of the event parameter object.
Assign a client-side function to the Exported event if you need to perform a custom action after Chart data is exported. For example, this function can notify the user that the exporting has completed.
To perform a custom action before a file with exported data is saved on the user's local storage, assign a client-side function to the FileSaving event. Using the Cancel field of the event parameter object, you can cancel file saving.
<dx:BootstrapChart ID="ExportingChart" runat="server" TitleSettings-Text="Stock Price" DataSourceUrl="~/jsondata/stockprice.json">
<SettingsExport Enabled="true" FileName="stock_chart" />
<ClientSideEvents
Exporting="onExporting"
Exported="onExported"
FileSaving="onFileSaving" />
<ArgumentAxis ArgumentType="System.DateTime" Visible="true" TickSettings-Visible="true" Label-Format-Type="ShortDate" />
<ValueAxisCollection>
<dx:BootstrapChartValueAxis TitleSettings-Text="US dollars" TickInterval="1" Label-Format-Type="Currency" />
</ValueAxisCollection>
<SeriesCollection>
<dx:BootstrapChartCandleStickSeries ArgumentField="date" OpenValueField="o" HighValueField="h" LowValueField="l" CloseValueField="c" />
</SeriesCollection>
<SettingsLegend Visible="false" />
</dx:BootstrapChart>
function onExporting(s, e) {
dxbsDemo.eventMonitor.trace(s, e, 'Exporting');
}
function onExported(s, e) {
dxbsDemo.eventMonitor.trace(s, e, 'Exported');
}
function onFileSaving(s, e) {
dxbsDemo.eventMonitor.trace(s, e, 'FileSaving');
}
Zoom
When you deal with a large amount of data, providing an efficient way of navigating this data is essential. The Chart control allows you to enable built-in scrolling and zooming. You can use the mouse wheel or the "pinch" gesture for zooming and the horizontal slide gesture across the chart (using mouse or touch interface) for scrolling. Write a handler for the ZoomStart (ZoomEnd) event to perform specific operations when zooming or scrolling begins (ends).
<dx:BootstrapChart ID="ChartZoom" runat="server" DataSourceUrl="~/jsondata/architecture.json" >
<SettingsZoomAndPan AllowTouchGestures="true" AllowMouseWheel="true" PanKey="Shift" ArgumentAxis="Both" ValueAxis="Zoom" DragToZoom="true">
<DragBoxStyle Color="YellowGreen" Opacity="0.5"/>
</SettingsZoomAndPan>
<SettingsScrollBar Visible="true" Position="Bottom"/>
<ClientSideEvents
ZoomStart="onZoomStart"
ZoomEnd="onZoomEnd" />
<ArgumentAxis DiscreteAxisDivisionMode="CrossLabels" GridVisible="true" TickInterval="1" />
<SettingsCommonSeries ArgumentField="year" />
<SeriesCollection>
<dx:BootstrapChartSplineSeries ValueField="smp" Name="SMP" />
<dx:BootstrapChartSplineSeries ValueField="mmp" Name="MMP" />
<dx:BootstrapChartSplineSeries ValueField="cnstl" Name="Cnstl" />
<dx:BootstrapChartSplineSeries ValueField="cluster" Name="Cluster" />
</SeriesCollection>
<SettingsLegend VerticalAlignment="Top" HorizontalAlignment="Right" />
</dx:BootstrapChart>
function onZoomStart(s, e) {
dxbsDemo.eventMonitor.trace(s, e, 'ZoomStart');
}
function onZoomEnd(s, e) {
dxbsDemo.eventMonitor.trace(s, e, 'ZoomEnd');
}