Hi there;
I've had great success with a range bar chart putting together a timeline -- but I've reached a stumbling block. I'm attempting to show machine runability in a manufacturing environment, so in the timeline I want it green when the machine is running, red when it's not. The timeline just seems to pick the first color though. Attached is the output I'm getting from Kendo, along with a similar mockup from SSRS showing what I'd like to see.
Does anybody have any advice?
Thanks,
Jason
<!DOCTYPE html><html><head> <title>Shift Timeline</title> <meta charset="utf-8"> <link href="content/shared/styles/examples-offline.css" rel="stylesheet"> <link href="styles/kendo.common.min.css" rel="stylesheet"> <link href="styles/kendo.rtl.min.css" rel="stylesheet"> <link href="styles/kendo.default.min.css" rel="stylesheet"> <link href="styles/kendo.default.mobile.min.css" rel="stylesheet"> <script src="js/jquery.min.js"></script> <script src="js/jszip.min.js"></script> <script src="js/kendo.all.min.js"></script> <script src="content/shared/js/console.js"></script> <script> </script> </head><body> <div id="chart"></div> <div id="timeline"></div> <script> var bbxData = [{ID:3565,MachineName:"DC01",StartDate: new Date("2016-03-09 07:15:10").getTime(), EndDate: new Date("2016-03-09 07:15:32").getTime(),color:"Green"}, {ID:3567,MachineName:"DC01",StartDate: new Date("2016-03-09 07:15:32").getTime(), EndDate: new Date("2016-03-09 08:20:11").getTime(),color:"Green"}, {ID:3734,MachineName:"DC01",StartDate: new Date("2016-03-09 08:20:11").getTime(), EndDate: new Date("2016-03-09 08:20:19").getTime(),color:"Green"}, {ID:3735,MachineName:"DC01",StartDate: new Date("2016-03-09 08:20:19").getTime(), EndDate: new Date("2016-03-09 09:08:10").getTime(),color:"Red"}, {ID:3873,MachineName:"DC01",StartDate: new Date("2016-03-09 09:08:10").getTime(), EndDate: new Date("2016-03-09 10:39:29").getTime(),color:"Red"}, {ID:3012,MachineName:"DC01",StartDate: new Date("2016-03-09 10:39:29").getTime(), EndDate: new Date("2016-03-09 10:41:38").getTime(),color:"Yellow"}, {ID:3026,MachineName:"DC01",StartDate: new Date("2016-03-09 10:41:38").getTime(), EndDate: new Date("2016-03-09 10:42:48").getTime(),color:"Yellow"}, {ID:3033,MachineName:"DC01",StartDate: new Date("2016-03-09 10:42:48").getTime(), EndDate: new Date("2016-03-09 10:43:32").getTime(),color:"Green"}, {ID:3039,MachineName:"DC01",StartDate: new Date("2016-03-09 10:43:32").getTime(), EndDate: new Date("2016-03-09 10:43:48").getTime(),color:"Green"}, {ID:3041,MachineName:"DC01",StartDate: new Date("2016-03-09 10:43:48").getTime(), EndDate: new Date("2016-03-09 10:46:26").getTime(),color:"Green"},]; $("#chart").kendoChart({ dataSource: { data: bbxData, group: { field: "MachineName", dir: "desc" } }, series: [{ type: "rangeBar", fromField: "StartDate", toField: "EndDate", categoryField: "MachineName", spacing:-1 }], valueAxis: { min: new Date("2016/03/09 01:00 AM").getTime(), max: new Date("2016/03/09 11:00 PM").getTime(), majorUnit: 60 * 60 * 1000 , // 60 minutes in milliseconds labels: { template: "#= kendo.toString(new Date(value), 'HH:mm') #" } }, legend: { visible: false } }); </script></body></html>