XY chart coordinates

Question

This project is still in planning stages. I'm trying to understand what is the best way to go about it. If I have a plot area, kind of like on a picture. And then add jQuery UI draggable/droppable functionality to drag objects around the chart, how can I then record position of each object in relation to each other? Immediate answer is to get coordinate points, but the screen sizes could be different.

1. Is it possible to do it somehow in percentages?

2. If I save these results how would I display the list of the items in the order highest to lowest?

Answer 1

You know how big (in pixels) your section of the plane is, either you specify a region of a specific size or you ask it how big it is after it is on the page. You will also have coordinates (in pixels) for all your dots.

So, when you talk to your server to persist the dots, tell it how big the container is and where all the dots are with respect to the container's coordinate system; all of those values can be easily computed in the client-side JavaScript.

Your server code can either track all of the above and map them to new coordinate systems as needed or it can normalize everything to standard coordinate system and store things in the standard coordinates; you can say that the region is always X server units wide and do a bit of math to scale the incoming coordinates to match your standard. Using one standard coordinate system on the server will probably make things much easier on you.

As far as "how would I display the list of the items in the order highest to lowest?" goes, the answer depends on how you want to define "highest". If "height" measures the Y coordinate then you just order by the y-coordinate (and possibly by the x-coordinate to break ties). If "highest" is a measure of magnitude, then you just use the Euclidean norm:

d = sqrt(x*x + y*y)

And sort by that. If you're just using the magnitude solely for sorting, then you can save yourself a couple CPU cycles by ditching the square root and simply sorting by x*x + y*y (the square root won't change the ordering) or even a Manhattan norm (abs(x) + abs(y)).

You'll probably run into ties in your ordering sooner or later so you deal with right away. Do you want Y to take precedence over X or vice versa? Do you have a string label that could be used as a secondary sort key? What you choose probably depends on how you plan to list the points:

• If you're listing the points as (x,y) coordinates, then use X as a secondary key as that will look more natural to humans.
• If you're listing the points as (label,(x,y)) pairs, then use the label as a secondary key.

The goal is twofold:

1. Produce output that makes sense to humans.
2. Consistent sorting when faced with ties.

So just pick a sensible secondary sort key and be consistent.