Single Selection
The Chart control supports selection of points and series with a mouse click. To allow selecting a single item at a time, set the Chart control's PointSelectionMode (for points) or SeriesSelectionMode (for series) property to Single.
This demo illustrates the use of the PointSelectionMode property and the client-side PointClick event to implement single item selection in the Chart. In the PointClick event handler, the clicked point is accessed through the e.target property. The point is then selected using its select method. Refer to the Point document for more information on the API available for a point object.
Country:
Selected value:
Economy - Statistics leaders of the European Union export
<dx:BootstrapChart runat="server" TitleSettings-Text="Economy - Statistics leaders of the European Union export" DataSourceUrl="~/jsondata/export.json"
PointSelectionMode="Single">
<ClientSideEvents PointClick="onPointClick" Init="onChartPointAction" PointSelectionChanged="onChartPointAction" />
<SettingsCommonSeries ArgumentField="country" />
<ValueAxisCollection>
<dx:BootstrapChartValueAxis TickInterval="2000">
<Label>
<Format Type="Currency" Precision="1" />
</Label>
</dx:BootstrapChartValueAxis>
</ValueAxisCollection>
<SeriesCollection>
<dx:BootstrapChartBarSeries ValueField="year2013" Name="2013" />
<dx:BootstrapChartBarSeries ValueField="year2014" Name="2014" />
<dx:BootstrapChartBarSeries ValueField="year2015" Name="2015" />
<dx:BootstrapChartBarSeries ValueField="year2016" Name="2016" />
</SeriesCollection>
<SettingsLegend VerticalAlignment="Bottom" HorizontalAlignment="Center" />
<SettingsToolTip Enabled="true">
<Format Type="Currency" Precision="1" />
</SettingsToolTip>
</dx:BootstrapChart>
function onPointClick(s, e) {
e.target.select();
}
function onChartPointAction(s, e) {
var country = e.target && e.target.originalArgument;
var value = e.target && Globalize.formatCurrency(e.target.originalValue, "USD");
$("#lblCountry").html(country ? country : "not selected");
$("#lblSelectedValue").html(value ? value : "");
}
Multiple Selection
To allow multiple item selection, set the Chart control's PointSelectionMode (for points) or SeriesSelectionMode (for series) property to Multiple.
This demo illustrates the use of the SeriesSelectionMode property and the client-side SeriesClick event to implement multiple item selection in the Chart. In the SeriesClick event handler, the clicked series is accessed through the e.target property. The series is then selected or unselected depending on its current state using the select and clearSelection methods. The isSelected method is used to determine whether or not the item is currently selected. Refer to the Series document for more information on the API available for a series object.
Total series selected:
Internet Explorer Statistics
<dx:BootstrapChart runat="server" TitleSettings-Text="Internet Explorer Statistics" DataSourceUrl="~/jsondata/ie.json"
SeriesSelectionMode="Multiple">
<ClientSideEvents SeriesClick="onSeriesClick" Done="onChartSeriesAction" SeriesSelectionChanged="onChartSeriesAction" />
<ArgumentAxis Type="Discrete" />
<SettingsCommonSeries ArgumentField="year" />
<ValueAxisCollection>
<dx:BootstrapChartValueAxis TickInterval="0.04">
<Label>
<Format Type="Percent" Precision="1" />
</Label>
</dx:BootstrapChartValueAxis>
</ValueAxisCollection>
<SeriesCollection>
<dx:BootstrapChartStackedAreaSeries ValueField="IE7" Name="Internet Explorer 7" />
<dx:BootstrapChartStackedAreaSeries ValueField="IE8" Name="Internet Explorer 8" />
<dx:BootstrapChartStackedAreaSeries ValueField="IE9" Name="Internet Explorer 9" />
<dx:BootstrapChartStackedAreaSeries ValueField="IE10" Name="Internet Explorer 10" />
<dx:BootstrapChartStackedAreaSeries ValueField="IE11" Name="Internet Explorer 11" />
<dx:BootstrapChartStackedAreaSeries ValueField="Edge" Name="Edge" />
</SeriesCollection>
<SettingsLegend VerticalAlignment="Bottom" HorizontalAlignment="Center" />
</dx:BootstrapChart>
function onSeriesClick(s, e) {
var series = e.target;
if(series.isSelected())
series.clearSelection();
else
series.select();
}
function onChartSeriesAction(s, e) {
var count = e.component
.getAllSeries()
.filter(function(series) { return series.isSelected(); })
.length;
$("#lblTotalSeries").html(count);
}