This is a migrated thread and some comments may be shown as answers.

Coloring on a collapsed (timeline view) Range Bar Chart

0 Answers 133 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
jmillar asked on 31 Mar 2017, 01:28 PM

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?




<!DOCTYPE html>
    <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/" 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>
    <div id="chart"></div>
    <div id="timeline"></div>
    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"},
                        dataSource: {
          data: bbxData,
          group: {
            field: "MachineName",
            dir: "desc"
        series: [{
          type: "rangeBar",
          fromField: "StartDate",
          toField: "EndDate",
          categoryField: "MachineName",
        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

No answers yet. Maybe you can help?

Asked by
Top achievements
Rank 1
Share this question