Your search did not match any results.
Charts

Load Data On Demand

In this demo, the chart loads data as you pan it. Once a data block is loaded, it stays in memory to reduce requests to the server.

www.worldweatheronline.com
@(Html.DevExtreme().Chart() .ID("chart") .Title("Temperature in Toronto (2017)") .DataSource(d => d.Array()) .DataSourceOptions(c => c .Sort("date") .Paginate(false) ) .ZoomAndPan(z => z.ArgumentAxis(ChartZoomAndPanMode.Pan)) .ScrollBar(s => s.Visible(true)) .ArgumentAxis(a => a .ArgumentType(ChartDataType.DateTime) .WholeRange(w => w .StartValue(new DateTime(2017, 1, 1)) .EndValue(new DateTime(2017, 12, 31)) ) .VisualRange(v => v .StartValue(new DateTime(2017, 4, 1)) .Length(l => l.Weeks(2)) ) .VisualRangeUpdateMode(VisualRangeUpdateMode.Keep) ) .ValueAxis(v => v.Add() .Name("temperature") .AllowDecimals(false) .Title(t => t .Text("Temperature, °C") .Font(f => f.Color("#ff950c")) ) .Label(l => l.Font(f => f.Color("#ff950c"))) ) .Series(s => s.Add() .Color("#ff950c") .Type(SeriesType.RangeArea) .ArgumentField("date") .RangeValue1Field("minTemp") .RangeValue2Field("maxTemp") .Name("Temperature range") ) .OnOptionChanged(@<text> function(e){ if(e.fullName === "argumentAxis.visualRange") { onVisualRangeChanged(e.value, e.component); } } </text>) .Animation(a => a.Enabled(false)) .LoadingIndicator(l => l .BackgroundColor("none") .Font(f => f.Size(14)) ) .Legend(l => l.Visible(false)) ) <script> var HALFDAY = 43200000; var packetsLock = 0; function onVisualRangeChanged(visualRange, component) { var items = component.getDataSource().items(); if (!items.length || items[0].date - visualRange.startValue >= HALFDAY || visualRange.endValue - items[items.length - 1].date >= HALFDAY) { uploadDataByVisualRange(visualRange, component); } } function uploadDataByVisualRange(visualRange, component) { var dataSource = component.getDataSource(); var storage = dataSource.items(); var ajaxArgs = { startVisible: getDateString(visualRange.startValue), endVisible: getDateString(visualRange.endValue), startBound: getDateString(storage.length ? storage[0].date : null), endBound: getDateString(storage.length ? storage[storage.length - 1].date : null) }; if (ajaxArgs.startVisible !== ajaxArgs.startBound && ajaxArgs.endVisible !== ajaxArgs.endBound && !packetsLock) { packetsLock++; component.showLoadingIndicator(); getDataFrame(ajaxArgs) .then(function(dataFrame) { packetsLock--; var componentStorage = dataSource.store(); dataFrame.forEach(function(item) { componentStorage.insert(item); }); dataSource.reload(); var range = component.getArgumentAxis().visualRange(); onVisualRangeChanged(range, component); }, function(reason) { packetsLock--; dataSource.reload(); }); } } function getDataFrame(args) { var deferred = $.Deferred(); $.ajax({ url: "@Url.Content("~/api/TemperatureData")", dataType: "json", data: args, success: function (result) { deferred.resolve(result.map(function(i) { return { date: new Date(i.Date), minTemp: i.MinTemp, maxTemp: i.MaxTemp }; })); }, error: function () { deferred.reject("Data Loading Error"); }, timeout: 2000 }); return deferred.promise(); } function getDateString(dateTime) { return dateTime ? dateTime.toLocaleDateString("en-US") : ""; } </script>
using DevExtreme.AspNet.Data; using DevExtreme.AspNet.Mvc; using DevExtreme.MVC.Demos.Models; using DevExtreme.MVC.Demos.Models.SampleData; using Newtonsoft.Json; using System; using System.Collections.Generic; using System.Web.Mvc; namespace DevExtreme.MVC.Demos.Controllers { public class ChartsController : Controller { public ActionResult LoadDataOnDemand() { return View(); } } }
using System; using System.Collections.Generic; using System.Web.Http; using System.Web.Http.Cors; using System.Threading; using DevExtreme.MVC.Demos.Models; using DevExtreme.MVC.Demos.Models.SampleData; namespace DevExtreme.MVC.Demos.Controllers.ApiControllers { [EnableCors(origins: "*", headers: "*", methods: "*")] public class TemperatureDataController : ApiController { [HttpGet] public List<TemperatureItem> Get(string startVisible = "01/01/2017", string endVisible = "12/31/2017", string startBound = "01/01/2017", string endBound = "12/31/2017") { List<TemperatureItem> totalList = SampleData.ServiceRepository.Instance.TemperatureItems; DateTime startVisibleDate = DateTime.Parse(startVisible); DateTime endVisibleDate = DateTime.Parse(endVisible); DateTime startBoundDate = string.IsNullOrEmpty(startBound) ? DateTime.MaxValue : DateTime.Parse(startBound); DateTime endBoundDate = string.IsNullOrEmpty(endBound) ? DateTime.MinValue : DateTime.Parse(endBound); DateTime startDate = startBoundDate > startVisibleDate ? startVisibleDate.AddDays(-7) : endBoundDate.AddDays(1); DateTime endDate = endBoundDate < endVisibleDate ? endVisibleDate.AddDays(7) : startBoundDate.AddDays(-1); return totalList.FindAll(t => t.Date >= startDate && t.Date <= endDate); } } }
using System.Collections.Generic; using System.Web; using System.Xml.Linq; using System.Linq; using System.Globalization; using System; namespace DevExtreme.MVC.Demos.Models.SampleData { public partial class SampleData { public class ServiceRepository { public static ServiceRepository Instance = new ServiceRepository(); public readonly List<TemperatureItem> TemperatureItems; private ServiceRepository() { CultureInfo ci = (CultureInfo)CultureInfo.CurrentCulture.Clone(); ci.NumberFormat.CurrencyDecimalSeparator = "."; XDocument tempDoc = XDocument.Load(HttpContext.Current.Server.MapPath("~/Content/SampleData/TemperatureData.xml")); TemperatureItems = (from d in tempDoc.Root.Elements("dayItem") select new TemperatureItem { Date = DateTime.Parse(d.Element("date").Value, null, DateTimeStyles.RoundtripKind), MinTemp = float.Parse(d.Element("minTemp").Value, NumberStyles.Any, ci), MaxTemp = float.Parse(d.Element("maxTemp").Value, NumberStyles.Any, ci) }).ToList(); } } } }
using System; using System.ComponentModel.DataAnnotations; namespace DevExtreme.MVC.Demos.Models { public class TemperatureItem { [Key] public DateTime Date { get; set; } public float MinTemp { get; set; } public float MaxTemp { get; set; } } }
#chart { height: 440px; }