• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    8.   <script nonce="undefined">
    9.     zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
    10.   </script>
    11.  
    12.   <script nonce="undefined" src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous">
    13.   </script>
    14.  
    15.   <script nonce="undefined" src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/simpsons.js'></script>
    16.   <style>
    17.     html,
    18.     body {
    19.       height: 100%;
    20.       width: 100%;
    21.       margin: 0;
    22.       padding: 0;
    23.     }
    24.  
    25.     #myChart {
    26.       height: 100%;
    27.       width: 100%;
    28.       min-height: 150px;
    29.     }
    30.  
    31.     .zc-ref {
    32.       display: none;
    33.     }
    34.   </style>
    35. </head>
    36.  
    37. <body>
    38.   <div id="myChart"></div>
    39.   <script>
    40.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
    41.     let chartData = [{
    42.         type: 'node',
    43.         id: 'n1',
    44.         cls: 'fam',
    45.         text: ' ',
    46.         dataFullName: ''
    47.       },
    48.       {
    49.         type: 'node',
    50.         id: 'Ned Stark',
    51.         text: 'Ned',
    52.         dataFullName: 'Ned Stark',
    53.         style: {
    54.           'background-fit': 'xy',
    55.           backgroundImage: 'https://i.imgur.com/OFrvsvv.png'
    56.         }
    57.       },
    58.       {
    59.         type: 'node',
    60.         id: 'Brandon Stark',
    61.         text: 'Brandon',
    62.         dataFullName: 'Brandon Stark',
    63.         style: {
    64.           'background-fit': 'xy',
    65.           backgroundImage: 'https://i.imgur.com/u9hoEJg.png'
    66.         }
    67.       },
    68.       {
    69.         type: 'node',
    70.         id: 'Benjen Stark',
    71.         text: 'Benjen',
    72.         dataFullName: 'Benjen Stark',
    73.         style: {
    74.           'background-fit': 'xy',
    75.           backgroundImage: 'https://i.imgur.com/nIYFwTa.png'
    76.         }
    77.       },
    78.       {
    79.         type: 'node',
    80.         id: 'Lyanna Stark',
    81.         text: 'Lyanna',
    82.         dataFullName: 'Lyanna Stark',
    83.         style: {
    84.           'background-fit': 'xy',
    85.           backgroundImage: 'https://i.imgur.com/x51Mx4U.png'
    86.         }
    87.       },
    88.       {
    89.         type: 'node',
    90.         id: 'Catelyn Stark',
    91.         text: 'Catelyn',
    92.         dataFullName: 'Catelyn Stark',
    93.         style: {
    94.           'background-fit': 'xy',
    95.           backgroundImage: 'https://i.imgur.com/4zN7Y24.png'
    96.         }
    97.       },
    98.       {
    99.         type: 'node',
    100.         id: 'Bran Stark',
    101.         text: 'Bran',
    102.         dataFullName: 'Bran Stark',
    103.         style: {
    104.           'background-fit': 'xy',
    105.           backgroundImage: 'https://i.imgur.com/2XEVyxr.png'
    106.         }
    107.       },
    108.       {
    109.         type: 'node',
    110.         id: 'Rickon Stark',
    111.         text: 'Rickon',
    112.         dataFullName: 'Rickon Stark',
    113.         style: {
    114.           'background-fit': 'xy',
    115.           backgroundImage: 'https://i.imgur.com/WYgOq7v.png'
    116.         }
    117.       },
    118.       {
    119.         type: 'node',
    120.         id: 'Robb Stark',
    121.         text: 'Robb',
    122.         dataFullName: 'Robb Stark',
    123.         style: {
    124.           'background-fit': 'xy',
    125.           backgroundImage: 'https://i.imgur.com/mfavdJs.png'
    126.         }
    127.       },
    128.       {
    129.         type: 'node',
    130.         id: 'Sansa Stark',
    131.         text: 'Sansa',
    132.         dataFullName: 'Sansa Stark',
    133.         style: {
    134.           'background-fit': 'xy',
    135.           backgroundImage: 'https://i.imgur.com/MsIjHMU.png'
    136.         }
    137.       },
    138.       {
    139.         type: 'node',
    140.         id: 'Arya Stark',
    141.         text: 'Arya',
    142.         dataFullName: 'Arya Stark',
    143.         style: {
    144.           'background-fit': 'xy',
    145.           backgroundImage: 'https://i.imgur.com/ae7VysW.png'
    146.         }
    147.       },
    148.  
    149.       {
    150.         type: 'node',
    151.         id: 'n2',
    152.         cls: 'fam',
    153.         text: ' ',
    154.         dataFullName: ''
    155.       },
    156.       {
    157.         type: 'node',
    158.         id: 'Lyarra Stark',
    159.         text: 'Lyarra',
    160.         dataFullName: 'Lyarra Stark',
    161.         style: {
    162.           'background-fit': 'xy',
    163.           backgroundImage: 'https://i.imgur.com/u9hoEJg.png'
    164.         }
    165.       },
    166.       {
    167.         type: 'node',
    168.         id: 'Rickard Stark',
    169.         text: 'Rickard',
    170.         dataFullName: 'Rickard Stark',
    171.         style: {
    172.           'background-fit': 'xy',
    173.           backgroundImage: 'https://i.imgur.com/fnDOYLn.png'
    174.         }
    175.       },
    176.  
    177.       {
    178.         type: 'node',
    179.         id: 'n3',
    180.         cls: 'fam',
    181.         text: ' ',
    182.         dataFullName: ''
    183.       },
    184.       {
    185.         type: 'node',
    186.         id: 'Rhaegar Targaryen',
    187.         text: 'Rhaegar Targaryen',
    188.         dataFullName: 'Rhaegar Targaryen',
    189.         style: {
    190.           'background-fit': 'xy',
    191.           backgroundImage: 'https://i.imgur.com/xUNu69z.png'
    192.         }
    193.       },
    194.       {
    195.         type: 'node',
    196.         id: 'Jon Snow',
    197.         text: 'Jon Snow',
    198.         dataFullName: 'Jon Snow',
    199.         style: {
    200.           'background-fit': 'xy',
    201.           backgroundImage: 'https://i.imgur.com/ePIDAeF.png'
    202.         }
    203.       },
    204.  
    205.       {
    206.         type: 'node',
    207.         id: 'n4',
    208.         cls: 'fam',
    209.         text: ' ',
    210.         dataFullName: ''
    211.       },
    212.       {
    213.         type: 'node',
    214.         id: 'Talisa Stark',
    215.         text: 'Talisa',
    216.         dataFullName: 'Talisa Stark',
    217.         style: {
    218.           'background-fit': 'xy',
    219.           backgroundImage: 'https://i.imgur.com/G8UYTPZ.png'
    220.         }
    221.       },
    222.  
    223.       {
    224.         type: 'node',
    225.         id: 'n5',
    226.         cls: 'fam',
    227.         text: ' ',
    228.         dataFullName: ''
    229.       },
    230.       {
    231.         type: 'node',
    232.         id: 'Ramsay Bolton',
    233.         text: 'Ramsay Bolton',
    234.         dataFullName: 'Ramsay Bolton',
    235.         style: {
    236.           'background-fit': 'xy',
    237.           backgroundImage: 'https://i.imgur.com/W0zBrVu.png'
    238.         }
    239.       },
    240.  
    241.       {
    242.         type: 'link',
    243.         source: 'n1',
    244.         target: 'Ned Stark'
    245.       },
    246.       {
    247.         type: 'link',
    248.         source: 'n1',
    249.         target: 'Catelyn Stark'
    250.       },
    251.       {
    252.         type: 'link',
    253.         source: 'n1',
    254.         target: 'Robb Stark'
    255.       },
    256.       {
    257.         type: 'link',
    258.         source: 'n1',
    259.         target: 'Bran Stark'
    260.       },
    261.       {
    262.         type: 'link',
    263.         source: 'n1',
    264.         target: 'Rickon Stark'
    265.       },
    266.       {
    267.         type: 'link',
    268.         source: 'n1',
    269.         target: 'Sansa Stark'
    270.       },
    271.       {
    272.         type: 'link',
    273.         source: 'n1',
    274.         target: 'Arya Stark'
    275.       },
    276.  
    277.       {
    278.         type: 'link',
    279.         source: 'n2',
    280.         target: 'Ned Stark'
    281.       },
    282.       {
    283.         type: 'link',
    284.         source: 'n2',
    285.         target: 'Brandon Stark'
    286.       },
    287.       {
    288.         type: 'link',
    289.         source: 'n2',
    290.         target: 'Benjen Stark'
    291.       },
    292.       {
    293.         type: 'link',
    294.         source: 'n2',
    295.         target: 'Lyanna Stark'
    296.       },
    297.       {
    298.         type: 'link',
    299.         source: 'n2',
    300.         target: 'Lyarra Stark'
    301.       },
    302.       {
    303.         type: 'link',
    304.         source: 'n2',
    305.         target: 'Rickard Stark'
    306.       },
    307.  
    308.       {
    309.         type: 'link',
    310.         source: 'n3',
    311.         target: 'Lyanna Stark'
    312.       },
    313.       {
    314.         type: 'link',
    315.         source: 'n3',
    316.         target: 'Rhaegar Targaryen'
    317.       },
    318.       {
    319.         type: 'link',
    320.         source: 'n3',
    321.         target: 'Jon Snow'
    322.       },
    323.  
    324.       {
    325.         type: 'link',
    326.         source: 'n4',
    327.         target: 'Robb Stark'
    328.       },
    329.       {
    330.         type: 'link',
    331.         source: 'n4',
    332.         target: 'Talisa Stark'
    333.       },
    334.  
    335.       {
    336.         type: 'link',
    337.         source: 'n5',
    338.         target: 'Sansa Stark'
    339.       },
    340.       {
    341.         type: 'link',
    342.         source: 'n5',
    343.         target: 'Ramsay Bolton'
    344.       },
    345.     ];
    346.  
    347.     let chartConfig = {
    348.       type: 'tree',
    349.       plot: {},
    350.       plotarea: {
    351.         margin: 40,
    352.         backgroundImage: 'https://i.imgur.com/tvrJh89.jpg',
    353.         backgroundFit: 'xy',
    354.         backgroundRepeat: false,
    355.       },
    356.       options: {
    357.         aspect: 'graph',
    358.         springLength: 75,
    359.         attractionConstant: 0.8,
    360.         repulsionConstant: 4000,
    361.         repulsionDistanceFactor: 20,
    362.         node: {
    363.           size: 24,
    364.           borderWidth: 3,
    365.           borderColor: 'white',
    366.           backgroundColor: '#fff',
    367.           backgroundRepeat: 'no-repeat',
    368.           backgroundScale: 0.75,
    369.           label: {
    370.             color: 'white',
    371.             fontWeight: 'bold',
    372.             offsetY: 35
    373.           },
    374.           tooltip: {
    375.             text: '%data-full-name',
    376.             visible: true,
    377.           }
    378.         },
    379.         'node[cls-fam]': {
    380.           size: 12,
    381.           borderWidth: 2,
    382.           borderColor: '#000',
    383.           backgroundColor: 'white',
    384.           label: {
    385.             visible: false
    386.           }
    387.         },
    388.         link: {
    389.           lineWidth: 3,
    390.           lineColor: 'white'
    391.         }
    392.       },
    393.       series: chartData
    394.     };
    395.  
    396.     zingchart.render({
    397.       id: 'myChart',
    398.       width: 900,
    399.       height: 600,
    400.       output: 'canvas',
    401.       data: chartConfig
    402.     });
    403.   </script>
    404. </body>
    405.  
    406. </html>
    1. <!DOCTYPE html>
    2. <html>
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingSoft Demo</title>
    7.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    8.   <script>
    9.     zingchart.MODULESDIR = "https://cdn.zingchart.com/modules/";
    10.   </script>
    11.  
    12.   <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous">
    13.   </script>
    14.  
    15.   <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/374756/simpsons.js'></script>
    16. </head>
    17.  
    18. <body>
    19.   <div id="myChart"></div>
    20. </body>
    21.  
    22. </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. let chartData = [{
    2.     type: 'node',
    3.     id: 'n1',
    4.     cls: 'fam',
    5.     text: ' ',
    6.     dataFullName: ''
    7.   },
    8.   {
    9.     type: 'node',
    10.     id: 'Ned Stark',
    11.     text: 'Ned',
    12.     dataFullName: 'Ned Stark',
    13.     style: {
    14.       'background-fit': 'xy',
    15.       backgroundImage: 'https://i.imgur.com/OFrvsvv.png'
    16.     }
    17.   },
    18.   {
    19.     type: 'node',
    20.     id: 'Brandon Stark',
    21.     text: 'Brandon',
    22.     dataFullName: 'Brandon Stark',
    23.     style: {
    24.       'background-fit': 'xy',
    25.       backgroundImage: 'https://i.imgur.com/u9hoEJg.png'
    26.     }
    27.   },
    28.   {
    29.     type: 'node',
    30.     id: 'Benjen Stark',
    31.     text: 'Benjen',
    32.     dataFullName: 'Benjen Stark',
    33.     style: {
    34.       'background-fit': 'xy',
    35.       backgroundImage: 'https://i.imgur.com/nIYFwTa.png'
    36.     }
    37.   },
    38.   {
    39.     type: 'node',
    40.     id: 'Lyanna Stark',
    41.     text: 'Lyanna',
    42.     dataFullName: 'Lyanna Stark',
    43.     style: {
    44.       'background-fit': 'xy',
    45.       backgroundImage: 'https://i.imgur.com/x51Mx4U.png'
    46.     }
    47.   },
    48.   {
    49.     type: 'node',
    50.     id: 'Catelyn Stark',
    51.     text: 'Catelyn',
    52.     dataFullName: 'Catelyn Stark',
    53.     style: {
    54.       'background-fit': 'xy',
    55.       backgroundImage: 'https://i.imgur.com/4zN7Y24.png'
    56.     }
    57.   },
    58.   {
    59.     type: 'node',
    60.     id: 'Bran Stark',
    61.     text: 'Bran',
    62.     dataFullName: 'Bran Stark',
    63.     style: {
    64.       'background-fit': 'xy',
    65.       backgroundImage: 'https://i.imgur.com/2XEVyxr.png'
    66.     }
    67.   },
    68.   {
    69.     type: 'node',
    70.     id: 'Rickon Stark',
    71.     text: 'Rickon',
    72.     dataFullName: 'Rickon Stark',
    73.     style: {
    74.       'background-fit': 'xy',
    75.       backgroundImage: 'https://i.imgur.com/WYgOq7v.png'
    76.     }
    77.   },
    78.   {
    79.     type: 'node',
    80.     id: 'Robb Stark',
    81.     text: 'Robb',
    82.     dataFullName: 'Robb Stark',
    83.     style: {
    84.       'background-fit': 'xy',
    85.       backgroundImage: 'https://i.imgur.com/mfavdJs.png'
    86.     }
    87.   },
    88.   {
    89.     type: 'node',
    90.     id: 'Sansa Stark',
    91.     text: 'Sansa',
    92.     dataFullName: 'Sansa Stark',
    93.     style: {
    94.       'background-fit': 'xy',
    95.       backgroundImage: 'https://i.imgur.com/MsIjHMU.png'
    96.     }
    97.   },
    98.   {
    99.     type: 'node',
    100.     id: 'Arya Stark',
    101.     text: 'Arya',
    102.     dataFullName: 'Arya Stark',
    103.     style: {
    104.       'background-fit': 'xy',
    105.       backgroundImage: 'https://i.imgur.com/ae7VysW.png'
    106.     }
    107.   },
    108.  
    109.   {
    110.     type: 'node',
    111.     id: 'n2',
    112.     cls: 'fam',
    113.     text: ' ',
    114.     dataFullName: ''
    115.   },
    116.   {
    117.     type: 'node',
    118.     id: 'Lyarra Stark',
    119.     text: 'Lyarra',
    120.     dataFullName: 'Lyarra Stark',
    121.     style: {
    122.       'background-fit': 'xy',
    123.       backgroundImage: 'https://i.imgur.com/u9hoEJg.png'
    124.     }
    125.   },
    126.   {
    127.     type: 'node',
    128.     id: 'Rickard Stark',
    129.     text: 'Rickard',
    130.     dataFullName: 'Rickard Stark',
    131.     style: {
    132.       'background-fit': 'xy',
    133.       backgroundImage: 'https://i.imgur.com/fnDOYLn.png'
    134.     }
    135.   },
    136.  
    137.   {
    138.     type: 'node',
    139.     id: 'n3',
    140.     cls: 'fam',
    141.     text: ' ',
    142.     dataFullName: ''
    143.   },
    144.   {
    145.     type: 'node',
    146.     id: 'Rhaegar Targaryen',
    147.     text: 'Rhaegar Targaryen',
    148.     dataFullName: 'Rhaegar Targaryen',
    149.     style: {
    150.       'background-fit': 'xy',
    151.       backgroundImage: 'https://i.imgur.com/xUNu69z.png'
    152.     }
    153.   },
    154.   {
    155.     type: 'node',
    156.     id: 'Jon Snow',
    157.     text: 'Jon Snow',
    158.     dataFullName: 'Jon Snow',
    159.     style: {
    160.       'background-fit': 'xy',
    161.       backgroundImage: 'https://i.imgur.com/ePIDAeF.png'
    162.     }
    163.   },
    164.  
    165.   {
    166.     type: 'node',
    167.     id: 'n4',
    168.     cls: 'fam',
    169.     text: ' ',
    170.     dataFullName: ''
    171.   },
    172.   {
    173.     type: 'node',
    174.     id: 'Talisa Stark',
    175.     text: 'Talisa',
    176.     dataFullName: 'Talisa Stark',
    177.     style: {
    178.       'background-fit': 'xy',
    179.       backgroundImage: 'https://i.imgur.com/G8UYTPZ.png'
    180.     }
    181.   },
    182.  
    183.   {
    184.     type: 'node',
    185.     id: 'n5',
    186.     cls: 'fam',
    187.     text: ' ',
    188.     dataFullName: ''
    189.   },
    190.   {
    191.     type: 'node',
    192.     id: 'Ramsay Bolton',
    193.     text: 'Ramsay Bolton',
    194.     dataFullName: 'Ramsay Bolton',
    195.     style: {
    196.       'background-fit': 'xy',
    197.       backgroundImage: 'https://i.imgur.com/W0zBrVu.png'
    198.     }
    199.   },
    200.  
    201.   {
    202.     type: 'link',
    203.     source: 'n1',
    204.     target: 'Ned Stark'
    205.   },
    206.   {
    207.     type: 'link',
    208.     source: 'n1',
    209.     target: 'Catelyn Stark'
    210.   },
    211.   {
    212.     type: 'link',
    213.     source: 'n1',
    214.     target: 'Robb Stark'
    215.   },
    216.   {
    217.     type: 'link',
    218.     source: 'n1',
    219.     target: 'Bran Stark'
    220.   },
    221.   {
    222.     type: 'link',
    223.     source: 'n1',
    224.     target: 'Rickon Stark'
    225.   },
    226.   {
    227.     type: 'link',
    228.     source: 'n1',
    229.     target: 'Sansa Stark'
    230.   },
    231.   {
    232.     type: 'link',
    233.     source: 'n1',
    234.     target: 'Arya Stark'
    235.   },
    236.  
    237.   {
    238.     type: 'link',
    239.     source: 'n2',
    240.     target: 'Ned Stark'
    241.   },
    242.   {
    243.     type: 'link',
    244.     source: 'n2',
    245.     target: 'Brandon Stark'
    246.   },
    247.   {
    248.     type: 'link',
    249.     source: 'n2',
    250.     target: 'Benjen Stark'
    251.   },
    252.   {
    253.     type: 'link',
    254.     source: 'n2',
    255.     target: 'Lyanna Stark'
    256.   },
    257.   {
    258.     type: 'link',
    259.     source: 'n2',
    260.     target: 'Lyarra Stark'
    261.   },
    262.   {
    263.     type: 'link',
    264.     source: 'n2',
    265.     target: 'Rickard Stark'
    266.   },
    267.  
    268.   {
    269.     type: 'link',
    270.     source: 'n3',
    271.     target: 'Lyanna Stark'
    272.   },
    273.   {
    274.     type: 'link',
    275.     source: 'n3',
    276.     target: 'Rhaegar Targaryen'
    277.   },
    278.   {
    279.     type: 'link',
    280.     source: 'n3',
    281.     target: 'Jon Snow'
    282.   },
    283.  
    284.   {
    285.     type: 'link',
    286.     source: 'n4',
    287.     target: 'Robb Stark'
    288.   },
    289.   {
    290.     type: 'link',
    291.     source: 'n4',
    292.     target: 'Talisa Stark'
    293.   },
    294.  
    295.   {
    296.     type: 'link',
    297.     source: 'n5',
    298.     target: 'Sansa Stark'
    299.   },
    300.   {
    301.     type: 'link',
    302.     source: 'n5',
    303.     target: 'Ramsay Bolton'
    304.   },
    305. ];
    306.  
    307. let chartConfig = {
    308.   type: 'tree',
    309.   plot: {},
    310.   plotarea: {
    311.     margin: 40,
    312.     backgroundImage: 'https://i.imgur.com/tvrJh89.jpg',
    313.     backgroundFit: 'xy',
    314.     backgroundRepeat: false,
    315.   },
    316.   options: {
    317.     aspect: 'graph',
    318.     springLength: 75,
    319.     attractionConstant: 0.8,
    320.     repulsionConstant: 4000,
    321.     repulsionDistanceFactor: 20,
    322.     node: {
    323.       size: 24,
    324.       borderWidth: 3,
    325.       borderColor: 'white',
    326.       backgroundColor: '#fff',
    327.       backgroundRepeat: 'no-repeat',
    328.       backgroundScale: 0.75,
    329.       label: {
    330.         color: 'white',
    331.         fontWeight: 'bold',
    332.         offsetY: 35
    333.       },
    334.       tooltip: {
    335.         text: '%data-full-name',
    336.         visible: true,
    337.       }
    338.     },
    339.     'node[cls-fam]': {
    340.       size: 12,
    341.       borderWidth: 2,
    342.       borderColor: '#000',
    343.       backgroundColor: 'white',
    344.       label: {
    345.         visible: false
    346.       }
    347.     },
    348.     link: {
    349.       lineWidth: 3,
    350.       lineColor: 'white'
    351.     }
    352.   },
    353.   series: chartData
    354. };
    355.  
    356. zingchart.render({
    357.   id: 'myChart',
    358.   width: 900,
    359.   height: 600,
    360.   output: 'canvas',
    361.   data: chartConfig
    362. });