• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.  
    8.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    9.   <style>
    10.     html,
    11.     body {
    12.       height: 100%;
    13.       width: 100%;
    14.       margin: 0;
    15.       padding: 0;
    16.     }
    17.  
    18.     #myChart {
    19.       height: 100%;
    20.       width: 100%;
    21.       min-height: 150px;
    22.     }
    23.  
    24.     .zc-ref {
    25.       display: none;
    26.     }
    27.   </style>
    28. </head>
    29.  
    30. <body>
    31.   <div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
    32.   <script>
    33.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    34.     var myConfig = {
    35.       "graphset": [{
    36.           "scaleX": null,
    37.           "y": null,
    38.           "type": null,
    39.           "x": null,
    40.           "options": null,
    41.           "legend": null,
    42.           "title": {
    43.  
    44.           },
    45.           "series": [],
    46.           "scaleY": null,
    47.           "utc": false,
    48.           "plot": {
    49.  
    50.           },
    51.           "labels": [{
    52.             "y": 0,
    53.             "text": "Multi Treemap showing hierarchy between categorical columns",
    54.             "font-size": "12px",
    55.             "font-family": null,
    56.             "x": "2%",
    57.             "font-color": null,
    58.             "font-weight": "bold"
    59.           }],
    60.           "width": "100%",
    61.           "plotarea": null,
    62.           "height": "5%"
    63.         },
    64.         {
    65.           "scaleX": null,
    66.           "y": "5.0%",
    67.           "type": "treemap",
    68.           "x": "0%",
    69.           "options": {
    70.             "aspect-type": "default"
    71.           },
    72.           "legend": null,
    73.           "title": {
    74.             "text": ["2016-06-01T00:00:00.000000000 to 2016-06-07T00:00:00.000000000"],
    75.             "font-size": "12px"
    76.           },
    77.           "series": [{
    78.               "text": "Dubai",
    79.               "value": null,
    80.               "children": [{
    81.                   "text": "Lego",
    82.                   "value": null,
    83.                   "children": [{
    84.                       "text": "Blue",
    85.                       "value": null,
    86.                       "children": [{
    87.                         "text": "Aziz",
    88.                         "value": 7,
    89.                         "children": []
    90.                       }]
    91.                     },
    92.                     {
    93.                       "text": "Pink",
    94.                       "value": null,
    95.                       "children": [{
    96.                         "text": "Mira",
    97.                         "value": 7,
    98.                         "children": []
    99.                       }]
    100.                     }
    101.                   ]
    102.                 },
    103.                 {
    104.                   "text": "Magnatiles",
    105.                   "value": null,
    106.                   "children": [{
    107.                     "text": "Purple",
    108.                     "value": null,
    109.                     "children": [{
    110.                       "text": "Noura",
    111.                       "value": 7,
    112.                       "children": []
    113.                     }]
    114.                   }]
    115.                 }
    116.               ]
    117.             },
    118.             {
    119.               "text": "London",
    120.               "value": null,
    121.               "children": [{
    122.                   "text": "Lego",
    123.                   "value": null,
    124.                   "children": [{
    125.                     "text": "Blue",
    126.                     "value": null,
    127.                     "children": [{
    128.                       "text": "Sami",
    129.                       "value": 7,
    130.                       "children": []
    131.                     }]
    132.                   }]
    133.                 },
    134.                 {
    135.                   "text": "Magnatiles",
    136.                   "value": null,
    137.                   "children": [{
    138.                     "text": "Pink",
    139.                     "value": null,
    140.                     "children": [{
    141.                       "text": "Saif",
    142.                       "value": 7,
    143.                       "children": []
    144.                     }]
    145.                   }]
    146.                 }
    147.               ]
    148.             }
    149.           ],
    150.           "scaleY": null,
    151.           "utc": false,
    152.           "plot": {
    153.  
    154.           },
    155.           "labels": [],
    156.           "width": null,
    157.           "plotarea": {
    158.             "x": null,
    159.             "y": null,
    160.             "adjust-layout": true
    161.           },
    162.           "height": "47.5%"
    163.         },
    164.       ]
    165.     }
    166.  
    167.     zingchart.render({
    168.       id: 'myChart',
    169.       data: myConfig,
    170.       height: '100%',
    171.       width: '100%'
    172.     });
    173.   </script>
    174. </body>
    175.  
    176. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.  
    8.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    9. </head>
    10.  
    11. <body>
    12.   <div id="myChart"><a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a></div>
    13. </body>
    14.  
    15. </html>
    1. html,
    2. body {
    3.   height: 100%;
    4.   width: 100%;
    5.   margin: 0;
    6.   padding: 0;
    7. }
    8.  
    9. #myChart {
    10.   height: 100%;
    11.   width: 100%;
    12.   min-height: 150px;
    13. }
    14.  
    15. .zc-ref {
    16.   display: none;
    17. }
    1. var myConfig = {
    2.   "graphset": [{
    3.       "scaleX": null,
    4.       "y": null,
    5.       "type": null,
    6.       "x": null,
    7.       "options": null,
    8.       "legend": null,
    9.       "title": {
    10.  
    11.       },
    12.       "series": [],
    13.       "scaleY": null,
    14.       "utc": false,
    15.       "plot": {
    16.  
    17.       },
    18.       "labels": [{
    19.         "y": 0,
    20.         "text": "Multi Treemap showing hierarchy between categorical columns",
    21.         "font-size": "12px",
    22.         "font-family": null,
    23.         "x": "2%",
    24.         "font-color": null,
    25.         "font-weight": "bold"
    26.       }],
    27.       "width": "100%",
    28.       "plotarea": null,
    29.       "height": "5%"
    30.     },
    31.     {
    32.       "scaleX": null,
    33.       "y": "5.0%",
    34.       "type": "treemap",
    35.       "x": "0%",
    36.       "options": {
    37.         "aspect-type": "default"
    38.       },
    39.       "legend": null,
    40.       "title": {
    41.         "text": ["2016-06-01T00:00:00.000000000 to 2016-06-07T00:00:00.000000000"],
    42.         "font-size": "12px"
    43.       },
    44.       "series": [{
    45.           "text": "Dubai",
    46.           "value": null,
    47.           "children": [{
    48.               "text": "Lego",
    49.               "value": null,
    50.               "children": [{
    51.                   "text": "Blue",
    52.                   "value": null,
    53.                   "children": [{
    54.                     "text": "Aziz",
    55.                     "value": 7,
    56.                     "children": []
    57.                   }]
    58.                 },
    59.                 {
    60.                   "text": "Pink",
    61.                   "value": null,
    62.                   "children": [{
    63.                     "text": "Mira",
    64.                     "value": 7,
    65.                     "children": []
    66.                   }]
    67.                 }
    68.               ]
    69.             },
    70.             {
    71.               "text": "Magnatiles",
    72.               "value": null,
    73.               "children": [{
    74.                 "text": "Purple",
    75.                 "value": null,
    76.                 "children": [{
    77.                   "text": "Noura",
    78.                   "value": 7,
    79.                   "children": []
    80.                 }]
    81.               }]
    82.             }
    83.           ]
    84.         },
    85.         {
    86.           "text": "London",
    87.           "value": null,
    88.           "children": [{
    89.               "text": "Lego",
    90.               "value": null,
    91.               "children": [{
    92.                 "text": "Blue",
    93.                 "value": null,
    94.                 "children": [{
    95.                   "text": "Sami",
    96.                   "value": 7,
    97.                   "children": []
    98.                 }]
    99.               }]
    100.             },
    101.             {
    102.               "text": "Magnatiles",
    103.               "value": null,
    104.               "children": [{
    105.                 "text": "Pink",
    106.                 "value": null,
    107.                 "children": [{
    108.                   "text": "Saif",
    109.                   "value": 7,
    110.                   "children": []
    111.                 }]
    112.               }]
    113.             }
    114.           ]
    115.         }
    116.       ],
    117.       "scaleY": null,
    118.       "utc": false,
    119.       "plot": {
    120.  
    121.       },
    122.       "labels": [],
    123.       "width": null,
    124.       "plotarea": {
    125.         "x": null,
    126.         "y": null,
    127.         "adjust-layout": true
    128.       },
    129.       "height": "47.5%"
    130.     },
    131.   ]
    132. }
    133.  
    134. zingchart.render({
    135.   id: 'myChart',
    136.   data: myConfig,
    137.   height: '100%',
    138.   width: '100%'
    139. });