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.
weatherbase.com
Thank you!
We appreciate your feedback.
We appreciate your feedback.
@(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 + "°C";
}
</text>)
)
)
.ArgumentAxis(a => a.ArgumentType(ChartDataType.String))
.Title("Temperature in Barcelona: January 2012")
.Size(s => s.Height(420))
.Legend(l => l.Visible(false))
.LoadingIndicator(l => l.Show(true))
.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 chart = $("#chart").dxChart("instance"),
temperature = data.value,
source = chart.getDataSource();
chart.showLoadingIndicator();
source.filter(["Temperature", ">", temperature]);
source.load();
}
</text>)
)
<div class="templabel">
Choose a temperature threshold, °C:
</div>
</div>
<script src="~/Scripts/data/palette.js"></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 ClientSideDataProcessing() {
return View();
}
public ContentResult GetMonthWeatherData() {
return Content(JsonConvert.SerializeObject(SampleData.MonthWeather), "application/json"); ;
}
}
}
using System;
using System.Collections.Generic;
using System.Linq;
namespace DevExtreme.MVC.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.MVC.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;
}