jQWidgets Forums

Tagged: data, jqxTreeMap, render, treemap, update

This topic contains 1 reply, has 2 voices, and was last updated by Dimitar 11 years, 6 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.