jQuery UI Widgets Forums Gauges and Maps TreeMap how to used destroy??

This topic contains 3 replies, has 2 voices, and was last updated by  Dimitar 6 years, 5 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • how to used destroy?? #26657

    sanosuke
    Member

    Only one area in the destroy method How to remove

    Custom Rendering example, the check box again to remove Chrome only the area are trying to create a tree map.

    I will respond to wait.
    Please let me know

    how to used destroy?? #26665

    Dimitar
    Participant

    Hello

    Here is a modified version of the Custom Rendering demo that shows how to remove one of the items from the tree map (in this case – Chrome) with the click of a button:

    <!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.1.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>
    $(function () {
    var data = [
    {
    label: 'Chrome',
    value: 44.06,
    color: "#37c837"
    },
    {
    label: 'Internet Explorer',
    value: 22.08,
    color: "#0066ff"
    },
    {
    label: 'Firefox',
    value: 18.17,
    color: "#ed7b0f"
    },
    {
    label: 'Others',
    value: 9.07,
    color: "#818181"
    },
    {
    label: 'Opera',
    value: 3.38,
    color: "#9a0900"
    },
    {
    label: 'Safari',
    value: 3.24,
    color: "#4dbff1"
    }
    ];
    $('#treemap').jqxTreeMap({
    width: 600,
    height: 300,
    source: data,
    renderCallbacks: {
    '*': function (element, data) {
    element.css({
    color: '#ffffff'
    });
    element.html('<span style="font-size: 11px;" class="jqx-treemap-label">' + data.label + ', ' + data.value + '%</span>');
    return true;
    }
    }
    });
    $("#removeChrome").click(function () {
    data.splice(0, 1);
    $("#treemap").jqxTreeMap("render");
    });
    });
    </script>
    </head>
    <body>
    <button id="removeChrome">
    Remove Chrome</button>
    <div id="treemap">
    </div>
    <span style="font-size: 13px; font-family: Verdana;">Non-mobile web browser usage for
    Wikimedia visitors as of March 2013</span>
    </body>
    </html>

    Best Regards,
    Dimitar

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

    how to used destroy?? #26671

    sanosuke
    Member

    Thank You

    But

    When the check box is checked and unchecked when the show tries to be hidden.

    Raise my source.

    Uncheck Only Is there a way to delete that?

    Please Help me

    <!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.1.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>
    $(function () {
    var data = [
    {
    label: 'Chrome',
    value: 44.06,
    color: "#37c837"
    },
    {
    label: 'Internet Explorer',
    value: 22.08,
    color: "#0066ff"
    },
    {
    label: 'Firefox',
    value: 18.17,
    color: "#ed7b0f"
    },
    {
    label: 'Others',
    value: 9.07,
    color: "#818181"
    },
    {
    label: 'Opera',
    value: 3.38,
    color: "#9a0900"
    },
    {
    label: 'Safari',
    value: 3.24,
    color: "#4dbff1"
    }
    ];
    $('#treemap').jqxTreeMap({
    width: 600,
    height: 300,
    source: data,
    renderCallbacks: {
    '*': function (element, data) {
    element.css({
    color: '#ffffff'
    });
    element.html('<span style="font-size: 11px;" class="jqx-treemap-label">' + data.label + ', ' + data.value + '%</span>');
    return true;
    }
    }
    });
    $("#removeChrome").click(function () {
    data.splice(0, 1);
    $("#treemap").jqxTreeMap("render");
    });
    if($('input[name=boxall]').is(":checked") == true) {
    $("input[name=box]").prop("checked", true);
    $('#treemap').jqxTreeMap('render');
    }
    $("input[name=boxall]").click(function(){
    $('#treemap').jqxTreeMap('render');
    if ($(this).prop("checked") == true) {
    $("input[name=box]").prop("checked", true);
    } else {
    alert("한개라도 선택이 되어 있어야 합니다.");
    $("input[name=boxall]").prop("checked", true);
    }
    });
    $("input[name=box]").click(function(){
    $("input[name=boxall]").prop("checked", false);
    });
    $("#chk2").click(function(){
    if ($("#chk2").prop("checked") == false){
    data.splice(0,1);
    $("#treemap").jqxTreeMap("render");
    } else {
    }
    });
    $("#chk3").click(function(){
    if ($("#chk3").prop("checked") == false) {
    } else {
    }
    });
    $("#chk4").click(function(){
    if ($("#chk4").prop("checked") == false) {
    } else {
    }
    });
    $("#chk5").click(function(){
    if ($("#chk5").prop("checked") == false) {
    } else {
    }
    });
    $("#chk6").click(function(){
    if ($("#chk6").prop("checked") == false) {
    } else {
    }
    });
    $("#chk7").click(function(){
    if ($("#chk7").prop("checked") == false) {
    } else {
    }
    });
    });
    </script>
    </head>
    <body>
    <ul class="treemap-catelist">
    <li class="chk-label1"><label for="chk1"><input type="checkbox" name="boxall" id="chk1" checked="checked">all</label></li>
    <li class="chk-label2"><label for="chk2"><input type="checkbox" name="box" id="chk2">Chrom</label></li>
    <li class="chk-label3"><label for="chk3"><input type="checkbox" name="box" id="chk3">Internet Explorer</label></li>
    <li class="chk-label4"><label for="chk4"><input type="checkbox" name="box" id="chk4">Firefox</label></li>
    <li class="chk-label5"><label for="chk5"><input type="checkbox" name="box" id="chk5">Others</label></li>
    <li class="chk-label6"><label for="chk6"><input type="checkbox" name="box" id="chk6">Opera</label></li>
    <li class="chk-label7"><label for="chk7"><input type="checkbox" name="box" id="chk7">Safari</label></li>
    </ul>
    <div id="treemap">
    </div>
    <span style="font-size: 13px; font-family: Verdana;">Non-mobile web browser usage for
    Wikimedia visitors as of March 2013</span>
    </body>
    </html>
    • This reply was modified 6 years, 5 months ago by  sanosuke.
    how to used destroy?? #26673

    Dimitar
    Participant

    Hi sanosuke,

    Here is how it should be:

    $("#chk2").click(function () {
    if ($("#chk2").prop("checked") == false) {
    data.splice(0, 1);
    $("#treemap").jqxTreeMap("render");
    } else {
    data.splice(0, 0, {
    label: 'Chrome',
    value: 44.06,
    color: "#37c837"
    });
    $("#treemap").jqxTreeMap("render");
    };
    });

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.