Create Dynamic Plot Bands in Charts
Environment
| Product | Progress® Kendo UI® Chart for jQuery |
| Operating System | Windows 10 64bit |
| Visual Studio Version | Visual Studio 2017 |
| Preferred Language | JavaScript |
Description
How can I highlight data in a Kendo UI Chart by using dynamic plot bands?
Solution
The following example demonstrates how to achieve this behavior.
<div id="chart"></div>
<button>Change plot band</button>
<script>
$("#chart").kendoChart({
categoryAxis: {
type: "date",
categories: [new Date("2014/01/01"), new Date("2014/01/02"), new Date("2014/01/31")],
plotBands: [{
from: new Date("2014/01/02"),
to: new Date("2014/01/02"),
color: "red"
}]
}
});
function showPlotBand(element, band) {
var plotBands = [ band ];
var axisNames = ["valueAxis", "xAxis", "categoryAxis"];
var options = {};
for (var i = 0; i < axisNames.length; i++) {
options[axisNames[i]] = { plotBands: plotBands };
}
var chart = $(element).data("kendoChart");
chart.setOptions(options);
}
$("button").click(function(){
// shows a random plot band
var start = new Date(2014, 0, 1 + Math.floor(Math.random() * 30));
var end = new Date(start.getTime() + 1000 * 3600 * 24); // 24 hours after start
showPlotBand("#chart", {
from: start,
to: end,
color: "green"
});
});
</script>