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.

@(Html.DevExpress()
    .BootstrapChart("chartLine")
    .TitleText("Energy Consumption in 2004")
    .SubtitleText("(Millions of Tons, Oil Equivalent)")
    .SettingsCommonSeries(settings => settings
        .ArgumentField("country"))
    .SeriesCollection(series => {
        series.AddLineSeries()
            .Name("Hydro-electric")
            .ValueField("hydro");
        series.AddLineSeries()
            .Name("Oil")
            .ValueField("oil");
        series.AddLineSeries()
            .Name("Natural gas")
            .ValueField("gas");
        series.AddLineSeries()
            .Name("Coal")
            .ValueField("coal");
        series.AddLineSeries()
            .Name("Nuclear")
            .ValueField("nuclear");
    })
    ...
    .Bind("jsondata/ChartTypes/fullstackedbar.json"))

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.

@(Html.DevExpress()
    .BootstrapChart("chartSpline")
    .TitleText("Architecture Share Over Time (Count)")
    .SettingsCommonSeries(settings => settings
        .ArgumentField("year"))
    .SeriesCollection(series => {
        series.AddSplineSeries()
            .Name("SMP")
            .ValueField("smp");
        series.AddSplineSeries()
            .Name("MMP")
            .ValueField("mmp");
        series.AddSplineSeries()
            .Name("Cnstl")
            .ValueField("cnstl");
        series.AddSplineSeries()
            .Name("Cluster")
            .ValueField("cluster");
    })
    ...
    .Bind("jsondata/ChartTypes/spline.json"))

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.

@(Html.DevExpress()
    .BootstrapChart("chartScatter")
    .SeriesCollection(series => {
        series.AddScatterSeries()
            .ArgumentField("x1")
            .ValueField("y1");
        series.AddScatterSeries()
            .ArgumentField("x2")
            .ValueField("y2")
            .Point(point => point
                .Symbol(ChartPointSymbol.TriangleDown));
    })
    ...
    .Bind("jsondata/ChartTypes/scatter.json"))

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.

@(Html.DevExpress()
    .BootstrapChart("chartStepLine")
    .TitleText("Australian Olympic Medal Count")
    .CustomPalette("#cd7f32, #b7b7b7, #ffd700")
    .SettingsCommonSeries(settings => settings
        .ArgumentField("year")
            .Point(point => point
                .Visible(false)))
    .SeriesCollection(series => {
        series.AddStepLineSeries()
            .Name("Bronze Medals")
            .ValueField("bronze");
        series.AddStepLineSeries()
            .Name("Silver Medals")
            .ValueField("silver");
        series.AddStepLineSeries()
            .Name("Gold Medals")
            .ValueField("gold");
    })
    ...
    .Bind("jsondata/ChartTypes/stepline.json"))

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.

@(Html.DevExpress()
    .BootstrapChart("chartBubble")
    .TitleText("Correlation between Total Population and<br> Population with Age over 60")
    .EncodeHtml(false)
    .SeriesCollection(series => {
        series.AddBubbleSeries()
            .Name("Europe")
            .ValueField("older1")
            .ArgumentField("total1")
            .SizeField("perc1")
            .TagField("tag1");
        series.AddBubbleSeries()
            .Name("Africa")
            .ValueField("older2")
            .ArgumentField("total2")
            .SizeField("perc2")
            .TagField("tag2");
        series.AddBubbleSeries()
            .Name("Asia")
            .ValueField("older3")
            .ArgumentField("total3")
            .SizeField("perc3")
            .TagField("tag3");
        series.AddBubbleSeries()
            .Name("North America")
            .ValueField("older4")
            .ArgumentField("total4")
            .SizeField("perc4")
            .TagField("tag4");
    })
    ...
    .Bind("jsondata/ChartTypes/bubble.json"))
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 + '%)'
    };
}
Screen Size
Color Themes
Demo QR Code