Your search did not match any results.

Client-Side Data Processing

Documentation

The DevExtreme JavaScript UI components can get data from a remote storage and process it on the client. This demo shows the Chart component 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.

www.kaggle.com
Backend API
@(Html.DevExtreme().Chart() .ID("chart") .DataSource(d => d .StaticJson() .Url(Url.Action("GetMonthWeatherData")) ) .DataSourceOptions(dso => dso.Filter("['Temperature', '>', 2]")) .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 Seattle: October 2017") .Size(s => s.Height(420)) .Legend(l => l.Visible(false)) .LoadingIndicator(l => l.Enabled(true)) .Export(e => e.Enabled(true)) ) <div class="action"> @(Html.DevExtreme().SelectBox() .ID("choose-temperature") .DataSource(new[] { 2, 4, 6, 8, 9, 10, 11 }) .Width(70) .Value(2) .OnValueChanged(@<text> function(data) { var source = $("#chart").dxChart("getDataSource"); source.filter(["Temperature", ">", data.value]); 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; using DevExtreme.NETCore.Demos.Models.SampleData; using Microsoft.AspNetCore.Mvc; using Newtonsoft.Json; using System; using System.Collections.Generic; using System.Linq; namespace DevExtreme.NETCore.Demos.Controllers { public class ChartsController : Controller { public ActionResult ClientSideDataProcessing() { return View(); } public object GetMonthWeatherData() { return SampleData.MonthWeather; } } }
using System.Collections.Generic; namespace DevExtreme.NETCore.Demos.Models.SampleData { public partial class SampleData { public static readonly IEnumerable<Weather> MonthWeather = new[] { new Weather { Day= 1, Temperature= 11 }, new Weather { Day= 2, Temperature= 7 }, new Weather { Day= 3, Temperature= 6 }, new Weather { Day= 4, Temperature= 8 }, new Weather { Day= 5, Temperature= 7 }, new Weather { Day= 6, Temperature= 7 }, new Weather { Day= 7, Temperature= 11 }, new Weather { Day= 8, Temperature= 9 }, new Weather { Day= 9, Temperature= 5 }, new Weather { Day= 10, Temperature= 8 }, new Weather { Day= 11, Temperature= 6 }, new Weather { Day= 12, Temperature= 9 }, new Weather { Day= 13, Temperature= 8 }, new Weather { Day= 14, Temperature= 6 }, new Weather { Day= 15, Temperature= 6 }, new Weather { Day= 16, Temperature= 6 }, new Weather { Day= 17, Temperature= 10 }, new Weather { Day= 18, Temperature= 9 }, new Weather { Day= 19, Temperature= 12 }, new Weather { Day= 20, Temperature= 9 }, new Weather { Day= 21, Temperature= 8 }, new Weather { Day= 22, Temperature= 13 }, new Weather { Day= 23, Temperature= 9 }, new Weather { Day= 24, Temperature= 7 }, new Weather { Day= 25, Temperature= 6 }, new Weather { Day= 26, Temperature= 11 }, new Weather { Day= 27, Temperature= 8 }, new Weather { Day= 28, Temperature= 7 }, new Weather { Day= 29, Temperature= 9 }, new Weather { Day= 30, Temperature= 7 }, new Weather { Day= 31, Temperature= 3 } }; } }
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; }