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

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

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • 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?

    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/

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

You must be logged in to reply to this topic.