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!
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Backend API
x
<div id="chart-demo">
Html.DevExtreme().Chart() (
.ID("chart")
.Title("Weather in Las Vegas, NV (2017)")
.CommonSeriesSettings(s => s.ArgumentField("Date"))
.ArgumentAxis(a => {
a.ArgumentType(ChartDataType.DateTime);
a.AggregationInterval(VizTimeInterval.Week);
a.ValueMarginsEnabled(false);
})
.ValueAxis(a => {
a.Add()
.Name("temperature")
.Title(t => t.Text("Temperature, °C").Font(f => f.Color("#e91e63")))
.Label(l => l.Font(f => f.Color("#e91e63")));
a.Add()
.Name("precipitation")
.Position(Position.Right)
.Title(t => t.Text("Precipitation, mm").Font(f => f.Color("#03a9f4")))
.Label(l => l.Font(f => f.Color("#03a9f4")));
})
.Legend(l => l.Visible(false))
.Series(s => {
s.Add()
.Axis("precipitation")
.Color("#03a9f4")
.Type(SeriesType.Bar)
.ValueField("Precip")
.Name("Precipitation");
s.Add()
.Axis("temperature")
.Color("#ffc0bb")
.Type(SeriesType.RangeArea)
.RangeValue1Field("MinTemp")
.RangeValue2Field("MaxTemp")
.Aggregation(a => {
a.Enabled(true);
a.Method(ChartSeriesAggregationMethod.Custom);
a.Calculate(<text>
function(aggregationInfo, series) {
if(!aggregationInfo.data.length) {
return;
}
var temp = aggregationInfo.data.map(function(item) { return item.Temp; }),
maxTemp = Math.max.apply(null, temp),
minTemp = Math.min.apply(null, temp);
return {
Date: new Date((aggregationInfo.intervalStart.valueOf() + aggregationInfo.intervalEnd.valueOf()) / 2),
MaxTemp: maxTemp,
MinTemp: minTemp
};
}
</text>);
})
.Name("Temperature range");
s.Add()
.Axis("temperature")
.Color("#e91e63")
.ValueField("Temp")
.Point(p => p.Size(7))
.Aggregation(a => a.Enabled(true))
.Name("Average temperature");
})
.Tooltip(t => {
t.Enabled(true);
t.CustomizeTooltip(<text>
function(arg) {
return customTooltipHandlers[arg.seriesName](arg, arg.point.aggregationInfo);
}
</text>);
})
.DataSource(d => d.Mvc().LoadAction("GetWeatherIndicators"))
)
<div class="options">
<div class="caption">Options</div>
<div class="option">
Html.DevExtreme().CheckBox() (
.Text("Aggregation enabled")
.Value(true)
.OnValueChanged(<text>
function(data) {
var chart = $("#chart").dxChart("instance");
chart.option("series[1].aggregation.enabled", data.value);
chart.option("series[2].aggregation.enabled", data.value);
}
</text>)
)
</div>
<div class="option">
<span>Interval:</span>
Html.DevExtreme().SelectBox() (
.DataSource(new JS("intervals"))
.Value(VizTimeInterval.Week)
.ValueExpr("Interval")
.InputAttr("aria-label", "Interval")
.DisplayExpr("DisplayName")
.OnValueChanged(<text>
function (data) {
$("#chart").dxChart("instance").option("argumentAxis.aggregationInterval", data.value);
}
</text>)
)
</div>
<div class="option">
<span>Method:</span>
Html.DevExtreme().SelectBox() (
.DataSource(new[] {
new { DisplayName = "Average", Func = "avg" },
new { DisplayName = "Minimum", Func = "min" },
new { DisplayName = "Maximum", Func = "max" }
})
.Value(ChartSeriesAggregationMethod.Avg)
.ValueExpr("Func")
.InputAttr("aria-label", "Function")
.DisplayExpr("DisplayName")
.OnValueChanged(<text>
function (data) {
$("#chart").dxChart("instance").option("series[2].aggregation.method", data.value);
}
</text>)
)
</div>
</div>
</div>
<script>
var intervals = [{
DisplayName: "One week",
Interval: "week"
}, {
DisplayName: "Two weeks",
Interval: { weeks: 2 }
}, {
DisplayName: "Month",
Interval: "month"
}];
var customTooltipHandlers = {
"Average temperature": function (arg, aggregationInfo) {
var start = aggregationInfo && aggregationInfo.intervalStart,
end = aggregationInfo && aggregationInfo.intervalEnd;
return {
text: (!aggregationInfo ?
"Date: " + arg.argument.toDateString() :
"Interval: " + start.toDateString() +
" - " + end.toDateString()) +
"<br/>Temperature: " + arg.value.toFixed(2) + " °C"
};
},
"Temperature range": function (arg, aggregationInfo) {
var start = aggregationInfo.intervalStart,
end = aggregationInfo.intervalEnd;
return {
text: "Interval: " + start.toDateString() +
" - " + end.toDateString() +
"<br/>Temperature range: " + arg.rangeValue1 +
" - " + arg.rangeValue2 + " °C"
};
},
"Precipitation": function (arg) {
return {
text: "Date: " + arg.argument.toDateString() +
"<br/>Precipitation: " + arg.valueText + " mm"
};
}
};
</script>
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx
xxxxxxxxxx