Datetime synchronization with data

Hello Team,

I am facing an issue while rendering time-series data using cubism. It's not able to synchronize with the given date and time. 
Please find attached screenshot and files.

Regards,
Dashrath
![cubism](https://cloud.githubusercontent.com/assets/7776101/16355770/f6ce68f2-3adf-11e6-9cb5-01469af334aa.JPG)

timeseries.html
<!DOCTYPE html>
<meta charset="utf-8">

<style>

  body {
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    margin: 30px auto;
    width: 1280px;
    position: relative;
  }

  header {
    padding: 6px 0;
  }

  .group {
    margin-bottom: 1em;
  }

  .axis {
    font: 10px sans-serif;
    position: fixed;
    pointer-events: none;
    z-index: 2;
  }

  .axis text {
    -webkit-transition: fill-opacity 250ms linear;
  }

  .axis path {
    display: none;
  }

  .axis line {
    stroke: #000;
    shape-rendering: crispEdges;
  }

  .axis.top {
    background-image: linear-gradient(top, #fff 0%, rgba(255,255,255,0) 100%);
    background-image: -o-linear-gradient(top, #fff 0%, rgba(255,255,255,0) 100%);
    background-image: -moz-linear-gradient(top, #fff 0%, rgba(255,255,255,0) 100%);
    background-image: -webkit-linear-gradient(top, #fff 0%, rgba(255,255,255,0) 100%);
    background-image: -ms-linear-gradient(top, #fff 0%, rgba(255,255,255,0) 100%);
    top: 0px;
    padding: 0 0 24px 0;
  }

  .axis.bottom {
    background-image: linear-gradient(bottom, #fff 0%, rgba(255,255,255,0) 100%);
    background-image: -o-linear-gradient(bottom, #fff 0%, rgba(255,255,255,0) 100%);
    background-image: -moz-linear-gradient(bottom, #fff 0%, rgba(255,255,255,0) 100%);
    background-image: -webkit-linear-gradient(bottom, #fff 0%, rgba(255,255,255,0) 100%);
    background-image: -ms-linear-gradient(bottom, #fff 0%, rgba(255,255,255,0) 100%);
    bottom: 0px;
    padding: 24px 0 0 0;
  }

  .horizon {
    border-bottom: solid 1px #000;
    overflow: hidden;
    position: relative;
  }

  .horizon {
    border-top: solid 1px #000;
    border-bottom: solid 1px #000;
  }

  .horizon + .horizon {
    border-top: none;
  }

  .horizon canvas {
    display: block;
  }

  .horizon .title,
  .horizon .value {
    bottom: 0;
    line-height: 30px;
    margin: 0 6px;
    position: absolute;
    text-shadow: 0 1px 0 rgba(255,255,255,.5);
    white-space: nowrap;
  }

  .horizon .title {
    left: 0;
  }

  .horizon .value {
    right: 0;
  }

  .line {
    background: #000;
    z-index: 2;
  }

</style>

<script src="http://d3js.org/d3.v2.min.js" charset="utf-8"></script>

<script src="https://square.github.io/cubism/cubism.v1.min.js"></script>

<body id="demo">

<script>

  var context = cubism.context().size(1280).stop();
       
  d3.select("#demo").selectAll(".axis")
      //.data(["top","bottom"])
      .data(["bottom"])
      .enter().append("div")
      .attr("class", function(d) { return d + " axis"; })
      .each(function(d) { d3.select(this).call(context.axis().ticks(36).orient(d)); });

  d3.select("body").append("div")
      .attr("class", "rule")
      .call(context.rule());

  d3.select("body").selectAll(".horizon")
      .data(["Al2O3","CaO","Fe2O3","P2O5","SiO2","SrO","TiO2"].map(stock))
      .enter().insert("div", ".bottom")
      .attr("class", "horizon")
      .call(context.horizon()
      .format(d3.format(".2f")));
  
  context.on("focus", function(i) {
    d3.selectAll(".value").style("right", i == null ? null : context.size() - i + "px");
  });

  // Replace this with context.graphite and graphite.metric!
  function stock(name) {
    var format = d3.time.format("%Y-%m-%d %H:%M:%S");
    return context.metric(function(start, stop, step, callback) {
        d3.csv("data.csv", function(rows) {
            rows = rows.map(function(d) { return [d.ELEMENT_NAME, format.parse(d.MEASURED_TIME), d.ELEMENT_VALUE]; }).filter(function(d) {return d[0]==name; });
            var values = [];
            rows.forEach(function(d) {
                //console.log(d[1]);
                values.push(d[2]);
            });
            callback(null, values.slice(-context.size()));
        });
    }, name);
  }

</script>


data.csv
ELEMENT_NAME,MEASURED_TIME,ELEMENT_VALUE
Al2O3,2016-04-21 15:13:00,2.45
Al2O3,2016-04-21 15:15:00,15.87
Al2O3,2016-04-21 15:17:00,-0.21
Al2O3,2016-04-21 15:18:00,22
Al2O3,2016-04-21 15:19:00,-0.15
Al2O3,2016-04-21 15:21:00,10.13
Al2O3,2016-04-21 15:22:00,2.45
Al2O3,2016-04-21 15:24:00,-0.21
Al2O3,2016-04-21 15:27:00,15.87
Al2O3,2016-04-21 15:29:00,2.45
Al2O3,2016-04-21 15:30:00,8.77
Al2O3,2016-04-21 15:32:00,17.25
Al2O3,2016-04-21 15:35:00,26
Al2O3,2016-04-21 15:37:00,15.87
Al2O3,2016-04-21 15:38:00,-0.15
Al2O3,2016-04-21 15:40:00,-0.15
Al2O3,2016-04-21 15:41:00,31
Al2O3,2016-04-21 15:43:00,22
Al2O3,2016-04-21 15:45:00,15.87
Al2O3,2016-04-21 15:46:00,26
Al2O3,2016-04-21 15:48:00,15.87
Al2O3,2016-04-21 15:49:00,-0.15
Al2O3,2016-04-21 15:51:00,2.45
Al2O3,2016-04-21 15:52:00,-0.15
Al2O3,2016-04-21 15:54:00,17
Al2O3,2016-04-21 15:55:00,26
Al2O3,2016-04-21 15:57:00,-0.15
Al2O3,2016-04-21 15:58:00,-0.21
Al2O3,2016-04-21 16:00:00,2.45
Al2O3,2016-04-21 16:02:00,-0.21
Al2O3,2016-04-21 16:03:00,17
Al2O3,2016-04-21 16:05:00,8.77
Al2O3,2016-04-21 16:06:00,-0.21
Al2O3,2016-04-21 16:08:00,17
Al2O3,2016-04-21 16:11:00,8.77
Al2O3,2016-04-21 16:12:00,9.54
Al2O3,2016-04-21 16:14:00,22
Al2O3,2016-04-21 16:15:00,0
Al2O3,2016-04-21 16:18:00,17
Al2O3,2016-04-21 16:20:00,17.25
Al2O3,2016-04-21 16:22:00,17.25
Al2O3,2016-04-21 16:23:00,8.77
Al2O3,2016-04-21 16:25:00,8.77
Al2O3,2016-04-21 16:26:00,26
Al2O3,2016-04-21 16:28:00,10.13
Al2O3,2016-04-21 16:29:00,-0.21
Al2O3,2016-04-21 16:31:00,8.77
Al2O3,2016-04-21 16:32:00,31
Al2O3,2016-04-21 16:34:00,9.54
Al2O3,2016-04-21 16:37:00,10.13
Al2O3,2016-04-21 16:39:00,9.54
Al2O3,2016-04-21 16:40:00,-0.15
Al2O3,2016-04-21 16:43:00,-0.21
Al2O3,2016-04-21 16:45:00,26
Al2O3,2016-04-21 16:47:00,0
Al2O3,2016-04-21 16:50:00,7.88
Al2O3,2016-04-21 16:51:00,15.87
Al2O3,2016-04-21 16:53:00,15.87
Al2O3,2016-04-21 16:54:00,2.45
Al2O3,2016-04-21 16:56:00,15.87
CaO,2016-04-21 15:15:00,15.87
CaO,2016-04-21 15:17:00,15.87
CaO,2016-04-21 15:18:00,-0.46
CaO,2016-04-21 15:21:00,19.54
CaO,2016-04-21 15:22:00,51.25
CaO,2016-04-21 15:24:00,27.88
CaO,2016-04-21 15:27:00,15.87
CaO,2016-04-21 15:29:00,40.13
CaO,2016-04-21 15:30:00,19.54
CaO,2016-04-21 15:32:00,51.25
CaO,2016-04-21 15:34:00,12.45
CaO,2016-04-21 15:35:00,12.45
CaO,2016-04-21 15:37:00,38.77
CaO,2016-04-21 15:38:00,0
CaO,2016-04-21 15:40:00,51.25
CaO,2016-04-21 15:41:00,70.22
CaO,2016-04-21 15:43:00,38.77
CaO,2016-04-21 15:45:00,15.87
CaO,2016-04-21 15:46:00,40.13


Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Datetime synchronization with data #132

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Datetime synchronization with data #132

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions