Charts - Client-Side Data Processing

The Chart component can get data from a remote storage and process it on the client side. To implement this functionality, assign a DataSource object to the Chart dataSource property.

In the DataSource, implement a CustomStore. Switch the CustomStore to the raw loadMode and load all data from the server in the load function as shown in the demo. Set the paginate property to false to prevent data from partitioning. You can also apply filter to the received values. In this demo, select different values of the drop-down menu under the chart to apply different filters.

www.kaggle.com

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

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"> <div class="templabel"> Choose a temperature threshold, °C: </div> @(Html.DevExtreme().SelectBox() .ID("choose-temperature") .InputAttr("aria-label", "Temperature") .DataSource(new[] { 2, 4, 6, 8, 9, 10, 11 }) .Value(2) .OnValueChanged(@<text> function(data) { var source = $("#chart").dxChart("getDataSource"); source.filter(["Temperature", ">", data.value]); source.load(); } </text>) ) </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 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; } } }

.action { width: 330px; margin-top: 20px; display: flex; align-items: center; justify-content: space-between; } .action .dx-selectbox { width: 90px; }

Once you load the data, specify the series type and its nested options: argumentField and valueField, so the component can determine which object fields in the data source indicate Chart arguments and values.