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

Tagged: , , , ,

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

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    how to used destroy?? Posts
  • August 12, 2013 at 4:34 am 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

    August 12, 2013 at 5:58 am 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/

    August 12, 2013 at 6:48 am 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>
    August 12, 2013 at 7:09 am 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/

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

You must be logged in to reply to this topic.