Home › Forums › Chart Support › UIDashborard application

UIDashborard application

Viewing 2 posts - 1 through 2 (of 2 total)
  • November 13, 2018 at 6:47 pm #23428

    sateesh

    Hai friends ,
    I developed draggable movable sortable and resizable panels .The complete source has given below .
    Please try to execute below code you may get one idea .
    Finally my requirement is I need to put one chart inside each panel and that should be
    responsive .How to put chart inside that panel please give me any idea .That graph values
    hard coded or coming from json data object.

    the source code is:
    ——————-

    <!DOCTYPE html>
    <html lang=”en”>

    <head>
    <title>A gridstack.js dashboard</title>

    <link rel=”stylesheet” href=”https://bootswatch.com/3/paper/bootstrap.css”&gt;
    <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.4.0/gridstack.css&#8221; />

    <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script&gt;
    <script src=”https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.0/jquery-ui.js”></script&gt;
    <script src=”https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.0/lodash.min.js”></script&gt;
    <script src=”https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.4.0/gridstack.all.js”></script&gt;
    <script type=”text/javascript” src=”https://www.gstatic.com/charts/loader.js”></script&gt;

    </head>

    <body>
    <div class=”container”>
    <div class=”row”>
    <div class=”col-sm-12″>
    <h2>A gridstack.js dashboard</h2>
    </div>
    <div class=”col-sm-12 well”>

    <!– gridstack.js elements go here –>
    <div class=”grid-stack ” id=”sortable”>
    <div class=”grid-stack-item col-md-3 col-sm-4″ data-gs-x=”0″ data-gs-y=”0″ data-gs-width=”2″
    data-gs-height=”2″>
    <div class=”grid-stack-item-content panel panel-primary”>
    <div class=”panel-heading”>
    <h3 class=”panel-title”>Widget 1</h3>
    </div>
    <div class=”panel-body”>
    content here
    </div>
    </div>
    </div>
    <div class=”grid-stack-item col-md-3 col-sm-4″ data-gs-x=”2″ data-gs-y=”0″ data-gs-width=”2″
    data-gs-height=”2″>
    <div class=”grid-stack-item-content panel panel-success”>
    <div class=”panel-heading”>
    <h3 class=”panel-title”>Widget 2</h3>
    </div>
    <div class=”panel-body”>
    content here
    </div>
    </div>
    </div>
    <div class=”grid-stack-item col-md-3 col-sm-4″ data-gs-x=”4″ data-gs-y=”0″ data-gs-width=”2″
    data-gs-height=”2″>
    <div class=”grid-stack-item-content panel panel-warning”>
    <div class=”panel-heading”>
    <h3 class=”panel-title”>Widget 3</h3>
    </div>
    <div class=”panel-body”>
    content here
    </div>
    </div>
    </div>
    <div class=”grid-stack-item col-md-3 col-sm-4″ data-gs-x=”6″ data-gs-y=”0″ data-gs-width=”2″
    data-gs-height=”2″>
    <div class=”grid-stack-item-content panel panel-danger”>
    <div class=”panel-heading”>
    <h3 class=”panel-title”>Widget 4</h3>
    </div>
    <div class=”panel-body”>
    content here
    </div>
    </div>
    </div>
    <div class=”grid-stack-item col-md-3 col-sm-4″ data-gs-x=”8″ data-gs-y=”0″ data-gs-width=”2″
    data-gs-height=”2″>
    <div class=”grid-stack-item-content panel panel-success”>
    <div class=”panel-heading”>
    <h3 class=”panel-title”>Widget 5</h3>
    </div>
    <div class=”panel-body”>
    content here

    </div>
    </div>
    </div>

    </div>
    </div>
    </div>
    </div>
    <script type=”text/javascript”>

    $(function () {
    $(‘.grid-stack’).gridstack();
    });

    $(function () {
    $(“#sortable”).sortable();
    $(“#sortable”).disableSelection();
    // $(“.panel”).draggable();
    // $(“.panel”).resizable();
    });
    </script>
    </body>

    </html>

    November 14, 2018 at 10:55 am #23437

    Priyanka M S

    @sateesh,

    Please take a look at this gallery example on rendering chart inside a resizable jquery element, which you can integrate with your code.

    __
    Priyanka M S
    Team CanvasJS

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.