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 Bind 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"))

JSON Object

Alternativelly, specify the url to a server side method that returns the JsonResult. This may be helpful if you do not use files to store json data.

using DevExpress.AspNetCore.DemoModels;
using Microsoft.AspNetCore.Mvc;
using System.Web;
namespace DevExpress.AspNetCore.Demos {
    public partial class ChartController : Controller {
        public IActionResult JSONResult() {
            return PartialView("DataBinding/JSONResult");
        }
        public IActionResult GetData() {
            string filePath = System.IO.Path.Combine(hostingEnvironment.WebRootPath, "jsondata/fruit.json");
            string fileContent = System.IO.File.ReadAllText(filePath);
            var obj = Newtonsoft.Json.JsonConvert.DeserializeObject(fileContent);
            return new JsonResult(obj);
        }
    }
}
@(Html.DevExpress()
    .BootstrapChart("chartJSONResult")
    .SettingsCommonSeries(settings => settings
        .ArgumentField("country")
        .Label(label => label
            .Visible(true)))
    .SeriesCollection(series => {
        series.AddStackedBarSeries()
            .ValueField("apples")
            .Name("Apples");
        series.AddStackedBarSeries()
            .ValueField("grapes")
            .Name("Grapers");
        series.AddStackedBarSeries()
            .ValueField("lemons")
            .Name("Lemons");
    })
    .Bind("Chart/GetData"))

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.

using DevExpress.AspNetCore.DemoModels;
using Microsoft.AspNetCore.Mvc;
using System.Web;
namespace DevExpress.AspNetCore.Demos {
    public partial class ChartController : Controller {
        public IActionResult JSONP() {
            return PartialView("DataBinding/JSONP");
        }
        public IActionResult GetJSONP(string callbackFunctionName) {
            string filePath = System.IO.Path.Combine(hostingEnvironment.WebRootPath, "jsondata/medals.json");
            string fileContent = System.IO.File.ReadAllText(filePath);
            string jsFunction = string.Format("{0}({1});", callbackFunctionName, fileContent);
            return Content(jsFunction, "text/javascript; charset=utf-8");
        }
    }
}
@(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/GetJSONP?callbackFunctionName=?"))

Objects Collection

A collection of objects can be also used to bind the chart to. The component supports common collections, such as List<T>, IEnumerable<T>, DataTable and others.

using DevExpress.AspNetCore.DemoModels;
using Microsoft.AspNetCore.Mvc;
using System.Collections.Generic;
using System.Web;
using System.Linq;
namespace DevExpress.AspNetCore.Demos {
    public partial class ChartController : Controller {
        public IActionResult CustomObject() {
            return PartialView("DataBinding/CustomObject", GetProducts());
        }
        private IEnumerable<Product> GetProducts() {
            return context.Products.Where(p =>p.UnitsInStock>20).Take(15);
        }
    }
}
@model IEnumerable<Product>
@(Html.DevExpress()
    .BootstrapChart("chart")
    .ResolveLabelOverlapping(ChartResolveLabelOverlapping.Hide)
    .SettingsCommonSeries(settings => settings
        .ArgumentField("ProductName")
            .Label(label => label
                .Visible(true)))
    .SeriesCollection(series => {
        series.AddBarSeries()
            .ValueField("UnitsInStock")
            .Name("Units in stock");
    })
    .ValueAxisCollection(axis => axis
        .AddValueAxis()
            .ValueType(typeof(decimal)))
    .CssClasses(css => css
        .Control("col-sm-12"))
    .Bind(Model))
Screen Size
Color Themes
Demo QR Code