@(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 + "°C";
}
</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")
.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="~/Scripts/data/palette.js"></script>
using DevExtreme.AspNet.Data;
using DevExtreme.AspNet.Mvc;
using DevExtreme.MVC.Demos.Models.SampleData;
using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Linq;
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;
namespace DevExtreme.MVC.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.MVC.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;
}