Your search did not match any results.
Charts

Client-Side Data Processing

Documentation
The DevExtreme HTML5 Widgets can get data from a remote storage and process it on the client. This demo shows the Chart widget whose data source loads all data from a remote JSON file in one query. Afterwards, different filters are applied to this data depending on a value of the drop-down menu under the chart.
@(Html.DevExtreme().Chart() .ID("chart") .DataSource(d => d .StaticJson() .Url(Url.Action("GetMonthWeatherData")) ) .DataSourceOptions(dso => dso.Filter("['Temperature', '>', 6]")) .Series(s => s.Add() .ArgumentField("Day") .ValueField("Temperature") .Type(SeriesType.Bar) ) .CustomizePoint(@<text> function() { var color = palette[paletteIndex]; paletteIndex = paletteIndex === 2 ? 0 : paletteIndex + 1; return { color: color }; } </text>) .ValueAxis(a => a .Add() .Label(l => l .CustomizeText(@<text> function() { return this.valueText + "&#176C"; } </text>) ) ) .ArgumentAxis(a => a.ArgumentType(ChartDataType.String)) .Title("Temperature in Barcelona: January 2012") .Size(s => s.Height(420)) .Legend(l => l.Visible(false)) .Export(e => e.Enabled(true)) ) <div class="action"> @(Html.DevExtreme().SelectBox() .ID("choose-temperature") .DataSource(new int[] { 6, 7, 8, 9, 10, 11, 12 }) .Width(70) .Value(6) .OnValueChanged(@<text> function(data) { var temperature = data.value, source = $("#chart").dxChart("instance").getDataSource(); source.filter(["Temperature", ">", temperature]); source.load(); } </text>) ) <div class="templabel"> Choose a temperature threshold, &deg;C: </div> </div> <script src="~/data/palette.js"></script>
using DevExtreme.AspNet.Data; using DevExtreme.AspNet.Mvc; using DevExtreme.NETCore.Demos.Models.SampleData; using Microsoft.AspNetCore.Mvc; using Newtonsoft.Json; using System; using System.Collections.Generic; namespace DevExtreme.NETCore.Demos.Controllers { public class ChartsController : Controller { public ActionResult ClientSideDataProcessing() { return View(); } public ContentResult GetMonthWeatherData() { return Content(JsonConvert.SerializeObject(SampleData.MonthWeather), "application/json"); ; } } }
using System.Collections.Generic; namespace DevExtreme.NETCore.Demos.Models.SampleData { public partial class SampleData { public static List<Weather> MonthWeather { get { return new List<Weather> { new Weather { Day = 1, Temperature = 13.1 }, new Weather { Day = 2, Temperature = 13.2 }, new Weather { Day = 3, Temperature = 10.5 }, new Weather { Day = 4, Temperature = 10.6 }, new Weather { Day = 5, Temperature = 11.9 }, new Weather { Day = 6, Temperature = 14.3 }, new Weather { Day = 7, Temperature = 9.6 }, new Weather { Day = 8, Temperature = 9.5 }, new Weather { Day = 9, Temperature = 9.4 }, new Weather { Day = 10, Temperature = 8.8 }, new Weather { Day = 11, Temperature = 8.7 }, new Weather { Day = 12, Temperature = 8.8 }, new Weather { Day = 13, Temperature = 7.5 }, new Weather { Day = 14, Temperature = 6.4 }, new Weather { Day = 15, Temperature = 8.8 }, new Weather { Day = 16, Temperature = 9.6 }, new Weather { Day = 17, Temperature = 11.6 }, new Weather { Day = 18, Temperature = 8.9 }, new Weather { Day = 19, Temperature = 8.8 }, new Weather { Day = 20, Temperature = 10.8 }, new Weather { Day = 21, Temperature = 11.4 }, new Weather { Day = 22, Temperature = 11.6 }, new Weather { Day = 23, Temperature = 11.4 }, new Weather { Day = 24, Temperature = 10.6 }, new Weather { Day = 25, Temperature = 9.6 }, new Weather { Day = 26, Temperature = 9.6 }, new Weather { Day = 27, Temperature = 10.9 }, new Weather { Day = 28, Temperature = 9.8 }, new Weather { Day = 29, Temperature = 7.2 }, new Weather { Day = 30, Temperature = 7.2 }, new Weather { Day = 31, Temperature = 7.6 } }; } } } }
var palette = ["#c3a2cc", "#b7b5e0", "#e48cba"], paletteIndex = 0;
using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.NETCore.Demos.Models { public class Weather { public int Day { get; set; } public double Temperature { get; set; } } }
#choose-temperature { float: right; } .action { width: 320px; margin-top: 20px; } .templabel { padding-top: 9px; }