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

Coloring on a collapsed (timeline view) Range Bar Chart

0 Answers 127 Views
Charts
This is a migrated thread and some comments may be shown as answers.
jmillar
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?

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>

No answers yet. Maybe you can help?

Tags
Charts
Asked by
jmillar
Top achievements
Rank 1
Share this question
or