JavaScript Array to Post or Display

Question

I'm using http://www.highcharts.com/plugin-registry/single/17/Annotations and they suggested in order for me to save anything, to use

var items = chart.annotations.allItems,
      annotationsArr = [],
  iLen = items.length - 1;

 for( ; iLen >= 0; iLen--) {
annotationsArr[iLen] = items[iLen].options;
 }
 $.post('my/path/to/save/annotations', annotationsArr);

Unfortunately this is where I get stuck. Doing

$(".result").text(annotationsArr);

Gives me [object Object],[object Object],[object Object],[object Object]

If I wanted to post the "proper" array to a PHP page, how would I do that? How would I grab the array on the PHP page? Doing a console.log(annotationsArr) gives me the following

enter image description here

[UPDATE]

I can now submit the data which gets processed just fine using

$("#submit").click(function () {

            var items = chart.annotations.allItems,
            annotationsArr = [],
            iLen = items.length - 1;
                //alert('DEBUG INFO: '+JSON.stringify(items));
                for (; iLen >= 0; iLen--) {
                    annotationsArr[iLen] = items[iLen].options;
                }
                $.ajax({
                    type: "POST",
                    url: "process.asp",
                    data: JSON.stringify(annotationsArr),
                    dataType: JSON
                });
            });

However the resulting array, as an example shows no colours e.g.

[{
    "xAxis": 0,
    "yAxis": 0,
    "title": "Annotationtitle<br>withlinebreak",
    "shape": {
        "params": {
            "r": 106,
            "d": null,
            "width": null,
            "height": null
        }
    },
    "x": 160,
    "y": 122,
    "allowDragX": true,
    "allowDragY": true,
    "anchorX": "left",
    "anchorY": "top"
}]

I adjusted the return part of function getParams(e) to read

return {
                        r: shape.r ? getRadius(e) : null,
                        d: shape.d ? getPath(e) : null,
                        width: shape.width ? getWidth(e) : null,
                        height: shape.height ? getHeight(e) : null,
                        stroke: shape.stroke ? $("#stroke").val() : null,
                        strokeWidth: shape.strokeWidth ? $("#strokeWidth").val() : 2,
                        fill: shape.fill ? $("#fill").val() : null
                    };

This resorts in the following but unfortunately this doesn't seem to work either! Any suggestions?

[{
    "xAxis": 0,
    "yAxis": 0,
    "title": "Annotationtitle<br>withlinebreak",
    "shape": {
        "params": {
            "r": 76,
            "d": null,
            "width": null,
            "height": null,
            "stroke": "red",
            "strokeWidth": null,
            "fill": "#AB3445"
        }
    },
    "x": 144,
    "y": 136,
    "allowDragX": true,
    "allowDragY": true,
    "anchorX": "left",
    "anchorY": "top"
}]

UPDATE

The shape wasn't being registered so I changed drop(e) to the following

function drop(e) {
                    Highcharts.removeEvent(document, 'mousemove', step);

                    // store annotation details
                    if (annotation) {
                        annotation.update({
                            shape: {
                                params: getParams(e),
                                "type": $("input[type='radio']:checked").val()
                            }
                        });

                    }
                    annotation = null;
                }

It seems to be working but there is one thing left! If I save annotations, that is fine. When I come back to the screen, they are presented fine.

HOWEVER if I want to move them and then save them, they do not get saved in the new position

So for a rectangle, it had co-ords

"x": 116,
"y": 117,

I moved it the the opposite corner and it still came back with

"x": 116,
"y": 117,

`annotationsArr` is an array of objects. You need to loop the array and format a string based on the object's properties. `$.each(annotationsArr, function(){ console.log(this.title); });` — gen_Eric, Feb 26 '14 at 16:34
Just loop over it and build the string that you want to appear in `.result`: `var result = ''; $.each(annotationsArr, function(){ result += this.title; }); $(".result").text(result);` — gen_Eric, Feb 26 '14 at 16:38
@RocketHazmat Is there a reason for not simply posting the variable as the data property of an ajax call? — Reinstate Monica Cellio, Feb 26 '14 at 16:43
So there's no way to pass an object to another page? I'll have to do it element by element? — pee2pee, Feb 26 '14 at 16:43
@JanuszJasinski: Huh? What do you mean pass? What's the problem here? I thought you were just having problems with `$(".result").text(annotationsArr);`. Your `$.post` line sends the array to PHP. In the PHP, try to `var_dump($_POST)`. You'll see the data there. You can also try: `$.post('my/path/to/save/annotations', {data: annotationsArr});`, then just `var_dump($_POST['data'])`. — gen_Eric, Feb 26 '14 at 16:46
In case when you send configuration form site 1. to site.php which get it by $_REQUEST , then what should happen? It should be insert into database or somehting different? — Sebastian Bochan, Feb 27 '14 at 10:02

score 2 · Answer 1 · edited Feb 26 '14 at 17:38

2

This: $(".result").text(annotationsArr); should be represented as $(".result").text(JSON.stringify(annotationsArr)); - that should put to .result element string of annotationsArr

How would I grab the array on the PHP page?

Something like this should be enough:

<?PHP
    $req = $_REQUEST;
    echo '<pre>';
    print_r($req);
    echo '</pre>';
?>

edited Feb 26 '14 at 17:38

gen_Eric

223,194
41
299
337

answered Feb 26 '14 at 16:52

Paweł Fus

44,795
3
61
77

Ok thanks - that seems to work. With that said, the colours of the annotations are not passed through. Any reason why or how I could capture it? – pee2pee Feb 27 '14 at 10:25
Could you paste to your question demo with non-working posted array to backend? Check if color is passed properly. – Paweł Fus Feb 27 '14 at 10:30
There is one last thing unfortunately. The X/Y co-ordinates don't get updated if I move an annotation. Added a bit to the end of the question. – pee2pee Feb 27 '14 at 11:33
Are x and y values changed after move? In general, actual annotations are a little buggy - within week or two I should update them on github with new version after a lot of changes fixes and test. – Paweł Fus Feb 27 '14 at 11:35
They don't change :-( I tried to do a console.log on clickX and clickY but that's only triggered when they are added and not actually dragged/moved – pee2pee Feb 27 '14 at 11:38
Drag&drop for annotation is implemented in the core. It's in `releaseAnnotation` function which is just buggy. As I said before, I have already fixed this, but before release I need to do final tests - within week or two will be ready for sure. – Paweł Fus Feb 27 '14 at 11:43
Ok thanks ever so much - an amazing plugin to what is already an amazing plugin! – pee2pee Feb 27 '14 at 11:47

JavaScript Array to Post or Display

1 Answers1