last day (14 days later) » 

4:07 PM
0
Q: d3 js graph going flowing out of grid lines

ashI'm new to using d3js to build graphs. My current task is charting no of logs across time. So my Y axis is logs and x axis is time. For some data, the graph comes fine within the grid line, but for some where the data is huge, it flows out of the grids like below. Also even if I am charting 3 or ...

 
Can we see your scales? e.g. d3.scale.linear()... etc. How do you actually define your x and y?
Are you using bl.ocks.org/mbostock/3883245 as a basis for this chart? Can you provide the full code with your data transformation (and a data sample)?
 
ash
@Oleg yes I am using the example as the basis for the chart. I tried setting height and width to the width of the parent container but that doesn't help. Here is my fiddle with sample data jsfiddle.net/JYS8n/2.
 
Your Value properties in the data array are strings. You should convert them to numbers in your forEach as in the example on bl.ocks.org. For example: d.Value = +d.Value; Otherwise it's alphabetic min/max where "2000" < "3" // true
 
ash
@Oleg that's great. I thought I had done it already but I was only parsing date and not value. That conversion did the trick. That said, how do I make the overlap each other using the same scale. After parsing to int, I get the two line but not overlapping though the data overlaps.
 
What do you mean by "overlapping"?
 
ash
4:07 PM
@Oleg so i am trying to build multiple lines though the fiddle i sent only shows only line, like the bl.ocks example you showed
 
The fiddle you sent me shows multiple lines.
 
ash
Right
 
So what's the problem? :)
 
ash
One moment
 
 
ash
4:10 PM
 
You don't see the third line?
 
ash
This is the one I am working on right now. The blue line does have a value which is lower than 100, 00
Well lower than 30000 also to be frank...but they don't overlap
 
Replace interpolate('basis') by interpolate('linear')
 
ash
doing it
 
If you want the lines to be smooth, I'd recommend the 'monotone' interpolation.
 
ash
4:15 PM
ok great...i'll try that. thanks for you help :). much appreciated.
 
You're welcome :)
 

last day (14 days later) »