Datetime synchronization with data

[dashrathc]

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

timeseries.html

<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> <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

[RandomEtc]

It's not clear what's going on here. Did you paste any code above that didn't show up correctly?