sorry for the long title, but it pretty much puts my problem in a nutshell. 
I am currently drawing a rectangle using the following :

```
for (var i = 0; i <= fixedrow; i++) {           
    for (var j = 0; j <= fixedcolumn; j++) {    

        var offseti = i;                        //An offset was needed to ensure each newly drawn rectangle places at the right spacing
        var moveDown = (i + 25 - offseti) * i;  //between eachother. 

        var offsetj = j;
        var moveRight = (j + 20 - offsetj) * j;

        rectangle = paper.rect(moveRight, moveDown, 15, 20).attr({      
            fill : "green"                                                                              
        });

```

This basically draws my shape and depending on how many rows, columns the user enters, it draws that amount of rectangles and spaces them out evenly (see image).

![enter image description here](https://i.stack.imgur.com/B3BHs.png)

I then save each shape being drawn using my function save(X,Y,ID). I get the X coord of each shape by feeding in the moveRight variable from above and moveDown for the Y coord. This passes through to the save function that looks like this:

```
function save(xin, yin, idin) {
var id = idin;
var x = xin;
var y = yin;

$.ajax('save.php', {
    type : 'post',
    dataType : 'text',
    data : 'x=' + x + '&y=' + y + '&id=' + id,
    success : function(){}
})
};

```

The X, Y and id get stored in the database no problem.

However, when it comes to loading the saved data, and re-drawing the rectangles, I am getting a strange issue where it cuts of one of the results, and leaves a blank space where a shape should be (see image).

![enter image description here](https://i.stack.imgur.com/F8HFC.png)

Notice the blank spot at the top left. I've checked each ID and it seems that the last rectangle is being left out, but somehow the whole structure is being shifted across one to make it display this way.

My code for retrieving the stored data and drawing the rects is as follows:

load() is called by pressing the button in the screenshot and calls this:

```
function load() {   
        $.ajax('load.php', {
        type : 'GET',
        success : drawLoad 
    })  
};

```

the load script is as follows:

```
<?php
header ("Content-type: application/json");

$conn = new           PDO("mysql:host=****.****.co.uk;dbname=****;","****","****");

$results = $conn->query("SELECT * FROM seats_table ORDER BY y,x");
$row = $results->fetch();
$data= array();
while ($row = $results->fetch(PDO::FETCH_ASSOC))
{
    $data[] = $row;
}    
echo json_encode($data);

?>

```

And the way I use the returned Json is:

```
function drawLoad(data) {
//if (paper == null) // Checks that the canvas/paper hasn't already been created (Decides whether to add to current paper or make new one).
    paper = Raphael("content", 1920, 900); // Creates the paper if one hasn't already been done so.

var start = function () {
    this.odx = 0;
    this.ody = 0;
    this.animate({
        "fill-opacity" : 0.2
    }, 500);
},
move = function (dx, dy) {
    this.translate(dx - this.odx, dy - this.ody);
    this.odx = dx;
    this.ody = dy;
},
up = function () {
    this.animate({
        "fill-opacity" : 1
    }, 500);
    update(this.odx, this.ody, this.id);
    alert(this.id);
};

for (var i = 0; i < data.length; i++) {
    var ID = data[i].ID;
    var x = data[i].x;
    var y = data[i].y;
    var isBooked = data[i].isBooked;
    var price = data[i].price;
    var seat_ID = data[i].seat_ID;

    rectangle = paper.rect(x, y, 15, 20).attr({fill : "green"}); 
    rectangle.drag(move, start, up);
    //alert("ID = " + ID + " X = " + x + " Y = " + y);
    var clickHandler = function () {                //This clickHandler will detect when a user double clicks on a seat icon.

            };

}
};

```

Can anyone point out what might be the cause of this issue? Please bear in mind I've removed any validation and what not to reduce the code content in the post and hopefully make it slightly more readable.

Thanks in advance for any replies, David.

**UPDATE:** Thanks too everyone below who helped me with this issue, but I've managed to solve the problem regarding the missing rectangle. I was using ORDER BY x,y in my sql statement instead of BY seat\_ID. This small change now displays all the stored rectangles.

New problem however. When I try to load the shapes from the database, they are not where they should be on the canvas/paper. Is there something I am overlooking regarding the coordinates taken from my canvas/paper sized at 1920x900 that is causing the coordinates I store to not match up to those on my paper/canvas?

Again, any help is appreciated in this. 

The below screenshot shows me just adding 25 rectangles and moving the bottom right one to a new position. You can see the url is passing through the id, x and a y coord. 
![enter image description here](https://i.stack.imgur.com/v6C2g.png)

Here is the database table after moving rectangle seat\_ID 25:

![after moving a shape.](https://i.stack.imgur.com/4ntOq.png)

I think the way I am getting these new coords is the problem. Below is my current way of getting the coords of a moved shape:

```
var start = function () {
    this.odx = 0;
    this.ody = 0;
    this.animate({
        "fill-opacity" : 0.2
    }, 500);        
},
move = function (dx, dy) {
    this.translate(dx - this.odx, dy - this.ody);
    this.odx = dx;
    this.ody = dy;
},
up = function () {
    this.animate({
        "fill-opacity" : 1
    }, 500);
    update(this.odx, this.ody, this.id);
    alert(this.id);
};

```

the update function is basically the same as the save one, and seems to be working as it is passing through all the variables and storing them in the database, which leads me now to think I have made an obvious error in trying to obtain the newly moved shapes coords. 

Any thoughts?

**EDIT:** Just realised the values I am getting from this.odx and this.ody are actually the difference between the starting coords and the ending, not the actual ending coords. I need to figure out the best way to work out the final coord from this information.