JSON Files

If your server stores data in JSON, performing AJAX requests is inevitable. But instead of configuring these requests manually, pass the URL of your data storage (in this demo, a JSON file) to the DataSourceUrl method, and the Chart will do the rest. This URL may specify an absolute or relative path to the resource.

@(Html.DevExpress()
    .BootstrapChart("chartJSON")
    .TitleText("Daily Sales")
    .Rotated(true)
    .ArgumentAxis(axis => axis
        .ArgumentType(typeof(DateTime))
        .MaxValue("2017-01-10"))
    .ValueAxisCollection(axis => axis
        .AddValueAxis()
            .TickInterval(1))
    .SeriesCollection(series => series
        .AddBarSeries()
            .ArgumentField("date")
            .ValueField("sales"))
    .SettingsLegend(settings => settings.Visible(false))
    .Bind("jsondata/simple.json"))

JSONP

You can use a JSONP callback parameter supported by jQuery.ajax() to access a web service that implements a JSONP (JSON with padding) endpoint.

@(Html.DevExpress()
    .BootstrapChart("chartJSONP")
    .TitleText("Olympic Medals in 2016")
    .Rotated(true)
    .CustomPalette("#ffd700, #c0c0c0, #cd7f32")
    .SettingsCommonSeries(settings => settings
        .ArgumentField("country")
        .Label(label => label
            .Visible(true)))
    .SeriesCollection(series => {
        series.AddStackedBarSeries()
            .ValueField("gold")
            .Name("Gold Medals");
        series.AddStackedBarSeries()
            .ValueField("silver")
            .Name("Silver Medals");
        series.AddStackedBarSeries()
            .ValueField("bronze")
            .Name("Bronze Medals");
    })
    .SettingsLegend(settings => settings
        .VerticalAlignment(VerticalAlign.Bottom)
        .HorizontalAlignment(HorizontalAlign.Center))
    .Bind("Chart/GetData"))
Screen Size
Color Themes
Demo QR Code