Line
This example shows the Line series view. This view is useful when you need to show line trends for several series on the same diagram and to compare the values of several series for the same points arguments.
Energy Consumption in 2004
<dx:BootstrapChart ID="ChartLine" runat="server" DataSourceUrl="~/jsondata/ChartTypes/fullstackedbar.json" TitleSettings-Text="Energy Consumption in 2004" TitleSettings-SubtitleSettings-Text="(Millions of Tons, Oil Equivalent)">
<SettingsCommonSeries ArgumentField="country" />
<SeriesCollection>
<dx:BootstrapChartLineSeries ValueField="hydro" Name="Hydro-electric" />
<dx:BootstrapChartLineSeries ValueField="oil" Name="Oil" />
<dx:BootstrapChartLineSeries ValueField="gas" Name="Natural gas" />
<dx:BootstrapChartLineSeries ValueField="coal" Name="Coal" />
<dx:BootstrapChartLineSeries ValueField="nuclear" Name="Nuclear" />
</SeriesCollection>
<ArgumentAxis DiscreteAxisDivisionMode="CrossLabels" GridVisible="true" TickInterval="1" />
<SettingsLegend HorizontalAlignment="Center" VerticalAlignment="Bottom" ItemTextPosition="Bottom" />
<ValueAxisCollection>
<dx:BootstrapChartValueAxis TitleSettings-Text="millions" />
</ValueAxisCollection>
<CssClasses Control="demo-chart" />
</dx:BootstrapChart>
Spline
This example shows the Spline series view. This view is similar to the Line chart but plots a fitted curve through each data point in a series.
Architecture Share Over Time (Count)
<dx:BootstrapChart ID="ChartSpline" runat="server" DataSourceUrl="~/jsondata/ChartTypes/spline.json" TitleSettings-Text="Architecture Share Over Time (Count)">
<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>
<ArgumentAxis DiscreteAxisDivisionMode="CrossLabels" GridVisible="true" TickInterval="1" />
<SettingsLegend HorizontalAlignment="Right" VerticalAlignment="Top" ItemTextPosition="Right" />
<CssClasses Control="demo-chart" />
</dx:BootstrapChart>
Scatter
This example shows the Scatter series view. You can use Scatter whenever you need to allow the user to draw their conclusions about information displayed within the chart.
<dx:BootstrapChart ID="ChartScatter" runat="server" DataSourceUrl="~/jsondata/ChartTypes/scatter.json">
<SeriesCollection>
<dx:BootstrapChartScatterSeries ValueField="y1" ArgumentField="x1" />
<dx:BootstrapChartScatterSeries ValueField="y2" ArgumentField="x2">
<Point Symbol="TriangleDown" />
</dx:BootstrapChartScatterSeries>
</SeriesCollection>
<ArgumentAxis DiscreteAxisDivisionMode="CrossLabels" GridVisible="true" MinorGridVisible="true" TickInterval="5" />
<ValueAxisCollection>
<dx:BootstrapChartValueAxis TickInterval="50" />
</ValueAxisCollection>
<SettingsLegend Visible="false" />
<CssClasses Control="demo-chart" />
</dx:BootstrapChart>
Step Line
This example shows the Step Line series view. This view is useful when you need to show how much values have changed for different points of the same series.
Australian Olympic Medal Count
<dx:BootstrapChart runat="server" DataSourceUrl="~/jsondata/ChartTypes/stepline.json" TitleSettings-Text="Australian Olympic Medal Count" CustomPalette="#cd7f32, #b7b7b7, #ffd700">
<SettingsCommonSeries ArgumentField="year">
<Point Visible="false"/>
</SettingsCommonSeries>
<SeriesCollection>
<dx:BootstrapChartSteplineSeries ValueField="bronze" Name="Bronze Medals" />
<dx:BootstrapChartSteplineSeries ValueField="silver" Name="Silver Medals" />
<dx:BootstrapChartSteplineSeries ValueField="gold" Name="Gold Medals" />
</SeriesCollection>
<ArgumentAxis DiscreteAxisDivisionMode="CrossLabels" GridVisible="true" >
<Label Format-Type="Decimal" />
<VisualRangeSettings>
<NumericAxis EndValue="2017" />
</VisualRangeSettings>
</ArgumentAxis>
<SettingsLegend HorizontalAlignment="Center" VerticalAlignment="Bottom" ItemTextPosition="Bottom" />
<CssClasses Control="demo-chart" />
</dx:BootstrapChart>
Bubble
This example shows a Bubble series view. This chart, in addition to the XY point diagram capabilities, allows you to visually represent the Weight of a series point by a bubble's size.
Correlation between Total Population and
Population with Age over 60
<dx:BootstrapChart ID="ChartBubble" runat="server" DataSourceUrl="~/jsondata/ChartTypes/bubble.json" TitleSettings-Text="Correlation between Total Population and<br> Population with Age over 60" EncodeHtml="false">
<SeriesCollection>
<dx:BootstrapChartBubbleSeries ArgumentField="total1" ValueField="older1" SizeField="perc1" TagField="tag1" Name="Europe" />
<dx:BootstrapChartBubbleSeries ArgumentField="total2" ValueField="older2" SizeField="perc2" TagField="tag2" Name="Africa" />
<dx:BootstrapChartBubbleSeries ArgumentField="total3" ValueField="older3" SizeField="perc3" TagField="tag3" Name="Asia" />
<dx:BootstrapChartBubbleSeries ArgumentField="total4" ValueField="older4" SizeField="perc4" TagField="tag4" Name="North America" />
</SeriesCollection>
<ArgumentAxis TitleSettings-Text="Total Population (M)" />
<ValueAxisCollection>
<dx:BootstrapChartValueAxis TitleSettings-Text="Population with Age over 60 (M)" />
</ValueAxisCollection>
<SettingsLegend HorizontalAlignment="Left" ItemTextPosition="Bottom" Position="Inside" />
<SettingsToolTip Enabled="true" OnClientCustomizeTooltip="onClientCustomizeBubbleTooltip" />
<CssClasses Control="demo-chart" LegendRect="chart-legend" />
</dx:BootstrapChart>
function onClientCustomizeBubbleTooltip(arg) {
return {
text: arg.point.tag + '<br/>Total Population: ' + arg.argumentText + 'M <br/>Population with Age over 60: ' + arg.valueText + 'M (' + arg.size + '%)'
};
}