jQuery UI Widgets › Forums › Gauges and Maps › TreeMap › how to data update~

Tagged: , , , ,

This topic contains 1 reply, has 2 voices, and was last updated by  Dimitar 10 years, 11 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    how to data update~ Posts
  • October 21, 2013 at 5:09 am how to data update~ #31074

    sanosuke
    Member

    At the click of a button to show the changes to the data.
    Simply to render do I do?
    Or Is there any other way?

    October 21, 2013 at 6:08 am how to data update~ #31082

    Dimitar
    Participant

    Hello sanosuke,

    Here is an example, based on the demo Automatic Rendering, which shows how to update a TreeMap:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/gettheme.js"></script>
        <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxtreemap.js"></script>
        <script type="text/javascript">
            $(function () {
                var theme = "";
                var data = [
                    {
                        label: 'USA',
                        value: 104
                    },
                    {
                        label: 'People\'s Republic of China',
                        value: 88
                    },
                    {
                        label: 'Great Britain',
                        value: 65
                    }
                ];
                $('#treemap').jqxTreeMap({
                    width: 670,
                    height: 400,
                    source: data,
                    colorRange: 100,
                    theme: theme,
                    colorMode: 'autoColors',
                    baseColor: '#52CBFF',
                    legendScaleCallback: function (v) {
                        v = v.toFixed(1);
                        return v;
                    },
                    legendLabel: 'Olympic medal count - London 2012'
                });
                $("#update").click(function () {
                    data.push({ label: "Paraguay", value: 15 });
                    $('#treemap').jqxTreeMap("render");
                });
            });
    </script>
        <style type="text/css">
            .jqx-treemap-legend
            {
                background: rgba(0, 0, 0, 0.4);
            }
        </style>
    </head>
    <body>
        <button id="update">
            Update TreeMap</button>
        <div id="treemap">
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.