Your search did not match any results.
Line Charts

Points Aggregation

Documentation

This demo illustrates how the Chart widget aggregates series points to improve readability whenever a large data source is visualized. The useAggregation option activates this feature. The RangeSelector widget zooms the contents of the Chart. Note that whenever the selected range is reduced, the series becomes less aggregated.

@(Html.DevExtreme().Chart() .ID("zoomedChart") .ArgumentAxis(a => a.ValueMarginsEnabled(false)) .ValueAxis(a => a .Add() .Label(l => l .Format(f => f .Type(Format.FixedPoint) ) ) ) .UseAggregation(true) .Legend(l => l.Visible(false)) .Series(s => s .Add() .ArgumentField("Arg") .ValueField("Val") .Point(p => p.Size(7)) ) .DataSource(d => d.Mvc().LoadAction("GetPoints")) ) @(Html.DevExtreme().RangeSelector() .ID("range-selector") .Size(s => s.Height(120)) .Chart(c => c .Series(s => s .Add() .ArgumentField("Arg") .ValueField("Val") ) .UseAggregation(true) ) .Scale(s => s.MinRange(1)) .SliderMarker(m => m.Format(f => f.Type(Format.Decimal).Precision(0))) .Behavior(b => b .CallValueChanged(ValueChangedCallMode.OnMoving) .SnapToTicks(false) ) .OnValueChanged(@<text> function (e) { var chart = $("#zoomedChart").dxChart("instance"); chart.zoomArgument(e.value[0], e.value[1]); } </text>) .DataSource(d => d.Mvc().LoadAction("GetPoints")) )
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 { FinancialChart public ActionResult PointsAggregationFinancialChart() { return View(); } [HttpGet] public ActionResult GetStockPrices(DataSourceLoadOptions loadOptions) { return Content(JsonConvert.SerializeObject(SampleData.StockPrices), "application/json"); } } }
#zoomedChart { height: 335px; margin: 0 0 15px; } #range-selector { height: 120px; }