0

I'm pretty out of solutions here I'm creating a multi graph, with graps added dynamically by user Which is why I had to give variable names to the scales using the window method All seemed to work awesome, looks good also, however I am not seeing the values I am supposed to on the graph My initial values come from ajax

for example the start_range and end_range are 130,0 second ones are 290-160 basically increasing from top to bottom with 130 (height of each graph) and the 30 px I put between them the domains are 1415,1500 for the first graph and -20,20 for the second

And now the problems - I am trying to put a threshold line at 1437 in the first and 0 in the second

 g.append('line')
                .attr('x1', 0) //starts at first x
                .attr('y1', window['scale_vwl'](0)) //starts where I tell him in the function argument
                .attr('x2',width)  //ends at last x (fortunately the x are the same for all arrays (data1,data2 etc)
                .attr('y2', window['scale_vwl'](0))
                .attr('class', 'mediumline');

On the graph it is positioned somewhere near 1457 in the first case and 10 in the second (where it should be 0)

I thought maybe I mixed up some margins but the difference from where it is and where i want it is 20 in the first case and 10 in the second so i cannot force something like -20

I tried making 0 all the margins, still gives me wrong positioned line How come it's there? I tried alert(window['scale_'+param_name](1437)) and it gives me 95

I read the way the scales are transformed, so I've done it too my initial interval 1415-1500, difference=85 my graph interval 0-130, difference 130

factor = 85 / 130 = 0.65

but 1437 / 0.65 = 2210,7 I feel totally lost

And the second question is -.if I create the line and the circles based on my data, how come they are in different positions in the graph? (the circles are on top) which is correct?

I've desperately searched and nothing emerged Please just give me a hint if possible

Here is a working fiddle https://jsfiddle.net/zk5j5fno/ Thank you

adrianazidu
  • 1
  • 1

1 Answers1

0

It would probably be easier to build each plot in it's own svg. What you have now, suffers from too many magic numbers syndrome. Once you start hand entering pixel positions, you need to rethink your approach. For example:

 build_yaxis_path('vwl', data2, 290, 160, -20, 20); //<- why 290, why 160?

That said, this line is throwing off your scale (well really the scale is fine, the axis is placed incorrectly):

//append axis
g.append("g")
  .attr("class", "y axis " + param_name)
  .style("fill", "steelblue") //here change color
  .attr('transform', 'translate(0, 30)') //<-- 30?

If you get rid of that line, the scale and axis match up. Of course that causes you to have to adjust things elsewhere...

Here's an example where I've fixed a few things up.

Mark
  • 106,305
  • 20
  • 172
  • 230
  • Thank you Mark, I am using the same svg for all plots because on top I am placing a rect overlay to follow a mouse movement event that needs to take values from all the scales – adrianazidu Mar 29 '15 at 18:21
  • Your example looks fantastic, I'll use that to follow my errors along, I am using 130 and 0 for the first because the height of the plot is 130, then for the second I am adding 30 in between and so on – adrianazidu Mar 29 '15 at 18:23
  • Thanks a lot for the time you took to adjust my script!! You are the best! – adrianazidu Mar 29 '15 at 18:23