• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>ZingSoft Demo</title>
    
        <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
        <style>
            html,
            body {
                height: 100%;
                width: 100%;
                margin: 0;
                padding: 0;
            }
    
            #myChart {
                height: 100%;
                width: 100%;
                min-height: 150px;
            }
    
            .zc-ref {
                display: none;
            }
    
            zing-grid[loading] {
                height: 450px;
            }
        </style>
    </head>
    
    <body>
        <div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
        <script>
            ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
            var myConfig = {
                "graphset": [{
                        "scaleX": null,
                        "y": null,
                        "type": null,
                        "x": null,
                        "options": null,
                        "legend": null,
                        "title": {
    
                        },
                        "series": [],
                        "scaleY": null,
                        "utc": false,
                        "plot": {
    
                        },
                        "labels": [{
                            "y": 0,
                            "text": "Multi Treemap showing hierarchy between categorical columns",
                            "font-size": "12px",
                            "font-family": null,
                            "x": "2%",
                            "font-color": null,
                            "font-weight": "bold"
                        }],
                        "width": "100%",
                        "plotarea": null,
                        "height": "5%"
                    },
                    {
                        "scaleX": null,
                        "y": "5.0%",
                        "type": "treemap",
                        "x": "0%",
                        "options": {
                            "aspect-type": "default"
                        },
                        "legend": null,
                        "title": {
                            "text": ["2016-06-01T00:00:00.000000000 to 2016-06-07T00:00:00.000000000"],
                            "font-size": "12px"
                        },
                        "series": [{
                                "text": "Dubai",
                                "value": null,
                                "children": [{
                                        "text": "Lego",
                                        "value": null,
                                        "children": [{
                                                "text": "Blue",
                                                "value": null,
                                                "children": [{
                                                    "text": "Aziz",
                                                    "value": 7,
                                                    "children": []
                                                }]
                                            },
                                            {
                                                "text": "Pink",
                                                "value": null,
                                                "children": [{
                                                    "text": "Mira",
                                                    "value": 7,
                                                    "children": []
                                                }]
                                            }
                                        ]
                                    },
                                    {
                                        "text": "Magnatiles",
                                        "value": null,
                                        "children": [{
                                            "text": "Purple",
                                            "value": null,
                                            "children": [{
                                                "text": "Noura",
                                                "value": 7,
                                                "children": []
                                            }]
                                        }]
                                    }
                                ]
                            },
                            {
                                "text": "London",
                                "value": null,
                                "children": [{
                                        "text": "Lego",
                                        "value": null,
                                        "children": [{
                                            "text": "Blue",
                                            "value": null,
                                            "children": [{
                                                "text": "Sami",
                                                "value": 7,
                                                "children": []
                                            }]
                                        }]
                                    },
                                    {
                                        "text": "Magnatiles",
                                        "value": null,
                                        "children": [{
                                            "text": "Pink",
                                            "value": null,
                                            "children": [{
                                                "text": "Saif",
                                                "value": 7,
                                                "children": []
                                            }]
                                        }]
                                    }
                                ]
                            }
                        ],
                        "scaleY": null,
                        "utc": false,
                        "plot": {
    
                        },
                        "labels": [],
                        "width": null,
                        "plotarea": {
                            "x": null,
                            "y": null,
                            "adjust-layout": true
                        },
                        "height": "47.5%"
                    },
                ]
            }
    
            zingchart.render({
                id: 'myChart',
                data: myConfig,
                height: '100%',
                width: '100%'
            });
        </script>
    </body>
    
    </html>
    <!DOCTYPE html>
    <html>
    	<head>
        <meta charset="utf-8">
        <title>ZingSoft Demo</title>
    	
    		<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    </head>
    	<body>
    		<div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
    	</body>
    </html>
    html, body {
    	height:100%;
    	width:100%;
    	margin:0;
    	padding:0;
    }
    #myChart {
    	height:100%;
    	width:100%;
    	min-height:150px;
    }
    .zc-ref {
    	display:none;
    }
    var myConfig = {
    "graphset":[
        {
            "scaleX":null,
            "y":null,
            "type":null,
            "x":null,
            "options":null,
            "legend":null,
            "title":{
                
            },
            "series":[],
            "scaleY":null,
            "utc":false,
            "plot":{
                
            },
            "labels":[
                {
                    "y":0,
                    "text":"Multi Treemap showing hierarchy between categorical columns",
                    "font-size":"12px",
                    "font-family":null,
                    "x":"2%",
                    "font-color":null,
                    "font-weight":"bold"
                }
            ],
            "width":"100%",
            "plotarea":null,
            "height":"5%"
        },
        {
            "scaleX":null,
            "y":"5.0%",
            "type":"treemap",
            "x":"0%",
            "options":{
              "aspect-type":"default"
            },
            "legend":null,
            "title":{
                "text":["2016-06-01T00:00:00.000000000 to 2016-06-07T00:00:00.000000000"],
                "font-size":"12px"
            },
            "series":[
                {
                    "text":"Dubai",
                    "value":null,
                    "children":[
                        {
                            "text":"Lego",
                            "value":null,
                            "children":[
                                {
                                    "text":"Blue",
                                    "value":null,
                                    "children":[
                                        {
                                            "text":"Aziz",
                                            "value":7,
                                            "children":[]
                                        }
                                    ]
                                },
                                {
                                    "text":"Pink",
                                    "value":null,
                                    "children":[
                                        {
                                            "text":"Mira",
                                            "value":7,
                                            "children":[]
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            "text":"Magnatiles",
                            "value":null,
                            "children":[
                                {
                                    "text":"Purple",
                                    "value":null,
                                    "children":[
                                        {
                                            "text":"Noura",
                                            "value":7,
                                            "children":[]
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                },
                {
                    "text":"London",
                    "value":null,
                    "children":[
                        {
                            "text":"Lego",
                            "value":null,
                            "children":[
                                {
                                    "text":"Blue",
                                    "value":null,
                                    "children":[
                                        {
                                            "text":"Sami",
                                            "value":7,
                                            "children":[]
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            "text":"Magnatiles",
                            "value":null,
                            "children":[
                                {
                                    "text":"Pink",
                                    "value":null,
                                    "children":[
                                        {
                                            "text":"Saif",
                                            "value":7,
                                            "children":[]
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                }
            ],
            "scaleY":null,
            "utc":false,
            "plot":{
                
            },
            "labels":[],
            "width":null,
            "plotarea":{
                "x":null,
                "y":null,
                "adjust-layout":true
            },
            "height":"47.5%"
        },
    ]
    }
    
    zingchart.render({ 
    	id: 'myChart', 
    	data: myConfig, 
    	height: '100%', 
    	width: '100%' 
    });