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