jQuery UI Widgets › Forums › General Discussions › dynamically add circle to dynamically generated container

Tagged: , , , , ,

This topic contains 4 replies, has 2 voices, and was last updated by  Dimitar 8 years, 9 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    dynamically add circle to dynamically generated container Posts
  • June 7, 2016 at 9:56 am dynamically add circle to dynamically generated container #84956

    amirsamanipoor
    Participant

    i have a problem and my problem is that i want to create ten circles in page load and i want each circle add to dynamically generated div(id’s of circle’s container are shape0,shape1,shape2,….,shape9),but i recieve error that “this.renderer is undefined” and error is in line 7 of jqxdraw.js (line 7, col 390),please help me how can i solve my problem?
    my code :
    $(function () {
    var Newel;
    var id;
    var renderer;
    for (var i = 0; i < 10; i++) {
    Newel = “<div id=’shape”+i+”‘></div>”;
    $(‘#container’).append(Newel);
    id = ‘”#shape’+i+'”‘;

    $(id).jqxDraw();
    renderer = $(id).jqxDraw(‘getInstance’);
    renderer.circle(250, 150, 50, { fill: ‘lightblue’ });
    }
    });

    June 10, 2016 at 6:35 am dynamically add circle to dynamically generated container #85022

    Dimitar
    Participant

    Hello amirsamanipoor,

    Please note that your “shape” divs have to have their dimensions set. Here is a working example based on your code:

    <!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdraw.js"></script>
    <script type="text/javascript">
        $(function () {
            var Newel;
            var id;
            var renderer;
            for (var i = 0; i < 10; i++) {
                Newel = "<div id='shape" + i + "' style='width: 200px; height: 200px;'></div>";
                $('#container').append(Newel);
                id = '#shape' + i;
                $(id).jqxDraw();
                renderer = $(id).jqxDraw('getInstance');
                renderer.circle(50, 50, 50, {
                    fill: 'lightblue'
                });
            }
        });
    </script>
</head>
<body class='default'>
    <div id='container' style="width:1850px; height:1500px">
    </div>
</body>
</html>

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    June 11, 2016 at 6:53 am dynamically add circle to dynamically generated container #85039

    amirsamanipoor
    Participant

    thank you very much dimitar,my problem is solved

    June 11, 2016 at 7:06 am dynamically add circle to dynamically generated container #85040

    amirsamanipoor
    Participant

    excuse me i have an another problem that when circles generate,space(margin) between each circle too much,how can i decrease space(margin) between circle?

    decrease margin between circle

    June 13, 2016 at 4:59 am dynamically add circle to dynamically generated container #85050

    Dimitar
    Participant

    Hello amirsamanipoor,

    You would have to decrease the width and height of the “shape” containers, for example:

    <!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdraw.js"></script>
    <script type="text/javascript">
        $(function () {
            var Newel;
            var id;
            var renderer;
            for (var i = 0; i < 10; i++) {
                Newel = "<div id='shape" + i + "' style='width: 110px; height: 110px; float: left;'></div>";
                $('#container').append(Newel);
                id = '#shape' + i;
                $(id).jqxDraw();
                renderer = $(id).jqxDraw('getInstance');
                renderer.circle(50, 50, 50, {
                    fill: 'lightblue'
                });
            }
        });
    </script>
</head>
<body class='default'>
    <div id='container' style="width:1850px; height:1500px">
    </div>
</body>
</html>

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.