Databases
StackOverflow2013
Postsdbo
POD3js line chart. Overlap lines with different dates
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POD3js line chart. Overlap lines with different dates
    text
    copied!<p>I'm developing a project using Backbone/RequireJS and the dashboard needs to show some charts and data visualizations with D3js. In this example I read a .csv file and I receive all data correctly. The csv format is the next one:</p> <pre><code>data,value "2013-11-18 13:00:00",60.6243 "2013-11-18 14:00:00",60.3904 "2013-11-18 15:00:00",61.0474 "2013-11-18 16:00:00",61.0827 "2013-11-18 17:00:00",61.2976 "2013-11-18 18:00:00",61.5349 "2013-11-19 13:00:00",62.5751 "2013-11-19 14:00:00",62.7183 "2013-11-19 15:00:00",62.9095 "2013-11-19 16:00:00",63.0192 "2013-11-19 17:00:00",63.0192 "2013-11-19 18:00:00",63.0192 </code></pre> <p>So you can see that <strong>first column is for date</strong> and the <strong>second one is for values</strong>. I need to represent the data with a <a href="https://github.com/mbostock/d3/wiki/SVG-Shapes#wiki-line" rel="nofollow">linear chart</a>, and <strong>I need to compare the last two days and the last two weeks</strong>. I don't know how to overlap the two signals on the chart. </p> <p>I've got to separate two ranges of data with .find() method:</p> <pre><code>function createRange(days) { ms_day = 86400000 * days; day = new Date(); tmp = day.getTime(); return day.setTime(parseInt(tmp - ms_day)); } var Data_Day_1 = data.filter(function(d) { return d.date &gt; createRange(1); }); var Data_Day_2 = data.filter(function(d) { return d.date &lt; createRange(2); }); </code></pre> <p><sup>createRange calculate the Date element that delimite the end point of the actual range. So If I want to show last day values, the functions will return => now - 24 hours</sup></p> <p>The result is as follows:</p> <p>Data_Day_1</p> <pre><code>"2013-11-18 13:00:00",60.6243 "2013-11-18 14:00:00",60.3904 "2013-11-18 15:00:00",61.0474 "2013-11-18 16:00:00",61.0827 "2013-11-18 17:00:00",61.2976 "2013-11-18 18:00:00",61.5349 </code></pre> <p>Data_Day_2</p> <pre><code>"2013-11-19 13:00:00",62.5751 "2013-11-19 14:00:00",62.7183 "2013-11-19 15:00:00",62.9095 "2013-11-19 16:00:00",63.0192 "2013-11-19 17:00:00",63.0192 "2013-11-19 18:00:00",63.0192 </code></pre> <p>The problem is that the x axis of the graph reads the date and keep showing the data one after another, not overlapped. What is the way I should follow to fix this?</p> <p>Sorry, it's some kind difficult to explain for me, I hope you can help me. Thanks.</p> <p><strong>UPDATE</strong></p> <p>I fixed one of my errors. Now, when I declare <code>x</code> and <code>y</code> I'm doing the next lines:</p> <pre><code>var x = d3.scale.linear().range([0, width]); var y = d3.scale.linear().range([height, 0]); </code></pre> <p>So, I have an object data_all that contains the Data_Day_1 and Data_Day_2:</p> <pre><code>var data_all = [Data_Day_1, Data_Day_2]; </code></pre> <p>And now it comes the part that I'm not sure about. I don't know if I'm not doing well the x and y domain or what, but It's not showing any graph.</p> <pre><code>x.domain([0, d3.max(data_all, function(d) { return d.date; })]); y.domain([0, d3.max(data_all, function(d) { return d.close; })]); </code></pre> <p><a href="http://jsfiddle.net/newpatriks/W9Cz7/" rel="nofollow">Here you can see an example of the problem.</a></p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload