JS object loop for dynamic div creation

Question

I've got an object with some properties in which I want to display on a web page in a chart. Each object will have its own chart.

Currently receiving the objects and their properties but can't get them to display dynamically in a chart, this works with static data.

What I'm trying to achieve is to loop through the objects, create the chart and add the data to it dynamically, there isn't a constant of how many objects there will be.

IE - on page load I'll receive how many objects there are, 3 for example, as such, three boxes will be created, each with a chart inside. How do I achieve this?

I don't think there's an issue with the data I'm sending receiving, but more to do with how I'm creating an object and it's corresponding div with the pie chart inside.

Where am I going wrong?

Code:

        <style type="text/css">
            #box {
                border: 1px solid;
                width: 200px;
                height: 200px;
            }
            #objectBox {
                width: 100px;
                height: 100px;
            }
        </style>

            <script type="text/javascript">
                    function getData() {
                        $.ajax({
                            type: "GET",
                            url: "/Graphs/GetMyPie",
                            contentType: "application/json; charset=utf-8",
                            dataType: "json",
                            success: drawChart
                        });
                    }



                    function drawChart(myObject) {
var dpoints = [];
                        // loop through array and create and display a pie for each object in array
                        for (var i = 0; i < myObject.length; i++) {
                            // each object
                            var prop1 = myObject[i].propertyOne;
                            var prop2 = myObject[i].propertyTwo;
                            var title = myObject[i].objectName;

                            // create container div and pie div
                            var outbox = document.createElement('div');
                            outbox.id = 'box';
                            document.body.appendChild('box');
                            var inbox = outbox.appendChild('objectBox' + i);
    // fill pie div

                            dpoints[i] = [{ label: "Free", data: prop1, color: '#7DCC3D' }, { label: "Used", data: prop2, color: '#333366' }];

                            $.plot($('#objectBox' + [i]), dpoints[i], {
                                series: {
                                    pie: {
                                        show: true
                                    }
                                }
                            });
                        }
                        $(document).ready(function () {
                            getData();
                        });

                    }
            </script>

prop1[i] doesn't seem right. i was the index in myObject, why are you also using it as the index in myObject[i].propertyOne? — Barmar
– Barmar, Commented Jun 26, 2015 at 21:46
Not sure I can, the object(s) that are received are from an API which can't be recreated. To create the pie chart I'm using jQuery flot chart. Would there be a way to do this? — SelrekJohn
– SelrekJohn, Commented Jun 26, 2015 at 21:47
What are you trying to accomplish with $().text(title)? Shouldn't the title go somewhere in the chart? — Barmar
– Barmar, Commented Jun 26, 2015 at 21:49

PurpleSmurph · Accepted Answer · 2015-06-29 09:37:03Z

2

If you don't want to use jQuery, as it isn't much JavaScript, I have put together an example: https://jsfiddle.net/gg1kkqq7/2/

With the above example, put

var dpoints = [{ label: "Free", data: prop1, color: '#7DCC3D' }, { label: "Used", data: prop2, color: '#333366' }];
    $.plot(objectBox, dpoints, {
        series: {
            pie: {
                show: true
            }
        }
    });`

below outbox.appendChild(inbox); which will then render whatever the data is.

On a side note, I believe your problem is with the var outbox = $('<div>', {id: 'box' + i}); var objectBox = $("<div>", { id: 'objectBox' + i }).appendTo(outbox); $('body').append(outbox);

answered Jun 29, 2015 at 9:37

PurpleSmurph

2,1074 gold badges33 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Barmar · Accepted Answer · 2015-06-26 22:01:14Z

1

Try this:

function drawChart(myObject) {
    // loop through array and create and display a pie for each object in array
    for (var i = 0; i < myObject.length; i++) {
        // each object
        var prop1 = myObject[i].propertyOne;
        var prop2 = myObject[i].propertyTwo;

        // create container div and pie div
        var outbox = $('<div>', {id: 'box' + i});
        var objectBox = $("<div>", { id: 'objectBox' + i }).appendTo(outbox);
        $('body').append(outbox);

        // fill pie div
        var dpoints = [{ label: "Free", data: prop1, color: '#7DCC3D' }, { label: "Used", data: prop2, color: '#333366' }];

        $.plot(objectBox, dpoints, {
            series: {
                pie: {
                    show: true
                }
            }
        });
    }
}

I've changed it to use jQuery to create the containers. Your code there was all wrong -- the argument to appendChild is the element to append, not an ID. I couldn't see any reason for the dpoints array, so I just use a local dpoints variable.

edited Jun 26, 2015 at 22:01

answered Jun 26, 2015 at 21:48

Barmar

789k57 gold badges554 silver badges669 bronze badges

6 Comments

SelrekJohn Over a year ago

Thanks will amend my code, at present Chrome inspect element has decided to crash.

SelrekJohn Over a year ago

I've edited the question code to reflect what I currently have, still no errors or anything are appearing in the console.

Barmar Over a year ago

Like I said in my answer, your calls to appendChild are totally wrong.

SelrekJohn Over a year ago

Ah yeah - am correcting now, thanks for your help! Getting errors regarding plot dimensions now, What's the best way to debug?

SelrekJohn Over a year ago

Thank you for your help - one more thing, if I want to give classes to the dynamic divs is this possible? I'm trying var inbox = $('div', { id: objectBox + i }).addClass('objectBox').appendTo(outbox);

|

Collectives™ on Stack Overflow

JS object loop for dynamic div creation

2 Answers 2

Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related