• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html class="zc-html">
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid: Blank Grid</title>
    7.   <script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
    8.   <style>
    9.     .chart--container {
    10.       min-height: 450px;
    11.       overflow: auto;
    12.       position: relative;
    13.       height: 100%;
    14.       width: 100%;
    15.     }
    16.  
    17.     .zc-ref {
    18.       display: none;
    19.     }
    20.   </style>
    21. </head>
    22.  
    23. <body class="zc-body">
    24.  
    25.   <!-- CHART CONTAINER -->
    26.   <div id="myChart" class="chart--container">
    27.     <a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a>
    28.   </div>
    29.  
    30.   <script>
    31.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // window:load event for Javascript to run after HTML
    32.     // because this Javascript is injected into the document head
    33.     window.addEventListener('load', () => {
    34.       let chartData = [{
    35.           type: 'node',
    36.           id: 'a',
    37.           name: 'α'
    38.         },
    39.         {
    40.           type: 'node',
    41.           id: 'b',
    42.           name: 'β'
    43.         },
    44.         {
    45.           type: 'node',
    46.           id: 'g',
    47.           name: 'γ'
    48.         },
    49.         {
    50.           type: 'link',
    51.           source: 'a',
    52.           target: 'b'
    53.         },
    54.         {
    55.           type: 'link',
    56.           source: 'a',
    57.           target: 'g'
    58.         },
    59.  
    60.         {
    61.           type: 'node',
    62.           id: 'd',
    63.           name: 'δ'
    64.         },
    65.         {
    66.           type: 'node',
    67.           id: 'e',
    68.           name: 'ε'
    69.         },
    70.         {
    71.           type: 'node',
    72.           id: 'z',
    73.           name: 'ζ'
    74.         },
    75.         {
    76.           type: 'node',
    77.           id: 'th',
    78.           name: 'θ'
    79.         },
    80.         {
    81.           type: 'link',
    82.           source: 'd',
    83.           target: 'e'
    84.         },
    85.         {
    86.           type: 'link',
    87.           source: 'e',
    88.           target: 'z'
    89.         },
    90.         {
    91.           type: 'link',
    92.           source: 'z',
    93.           target: 'th'
    94.         },
    95.         {
    96.           type: 'link',
    97.           source: 'th',
    98.           target: 'd'
    99.         },
    100.  
    101.         {
    102.           type: 'node',
    103.           id: 'i',
    104.           name: 'ι'
    105.         },
    106.         {
    107.           type: 'node',
    108.           id: 'k',
    109.           name: 'κ'
    110.         },
    111.         {
    112.           type: 'link',
    113.           source: 'i',
    114.           target: 'k'
    115.         },
    116.       ];
    117.  
    118.       let chartConfig = {
    119.         type: 'tree',
    120.         plotarea: {
    121.           margin: '50px'
    122.         },
    123.         options: {
    124.           aspect: 'graph',
    125.           springLength: 75,
    126.           attractionConstant: 0.8,
    127.           repulsionConstant: 4000,
    128.           repulsionDistanceFactor: 20,
    129.           link: {
    130.             lineColor: '#000',
    131.             lineWidth: '2px',
    132.             endPoint: {
    133.               type: 'triangle',
    134.               width: '7px',
    135.               length: '10px',
    136.               borderColor: '#505050',
    137.               backgroundColor: '#505050'
    138.             },
    139.           },
    140.           'link[source-i]': {
    141.             startPoint: {
    142.               type: 'triangle',
    143.               width: '7px',
    144.               length: '10px',
    145.               borderColor: '#505050',
    146.               backgroundColor: '#505050'
    147.             },
    148.           },
    149.           node: {
    150.             size: 24,
    151.             borderWidth: '3px',
    152.             borderColor: '#dedede',
    153.             backgroundColor: '#fff',
    154.             backgroundRepeat: 'no-repeat',
    155.             backgroundScale: 0.75,
    156.             label: {
    157.               color: '#505050',
    158.               fontSize: '18px'
    159.             }
    160.           },
    161.         },
    162.         series: chartData
    163.       };
    164.  
    165.       zingchart.render({
    166.         id: 'myChart',
    167.         width: '100%',
    168.         height: '100%',
    169.         data: chartConfig
    170.       });
    171.  
    172.     });
    173.   </script>
    174. </body>
    175.  
    176. </html>
    1. <!DOCTYPE html>
    2. <html class="zc-html">
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid: Blank Grid</title>
    7.   <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
    8. </head>
    9.  
    10. <body class="zc-body">
    11.  
    12.   <!-- CHART CONTAINER -->
    13.   <div id="myChart" class="chart--container">
    14.     <a class="zc-ref" href="https://www.zingchart.com">Powered by ZingChart</a>
    15.   </div>
    16.  
    17. </body>
    18.  
    19. </html>
    1. .chart--container {
    2.   min-height: 450px;
    3.   overflow: auto;
    4.   position: relative;
    5.   height: 100%;
    6.   width: 100%;
    7. }
    8.  
    9. .zc-ref {
    10.   display: none;
    11. }
    1. // window:load event for Javascript to run after HTML
    2. // because this Javascript is injected into the document head
    3. window.addEventListener('load', () => {
    4.   let chartData = [{
    5.       type: 'node',
    6.       id: 'a',
    7.       name: 'α'
    8.     },
    9.     {
    10.       type: 'node',
    11.       id: 'b',
    12.       name: 'β'
    13.     },
    14.     {
    15.       type: 'node',
    16.       id: 'g',
    17.       name: 'γ'
    18.     },
    19.     {
    20.       type: 'link',
    21.       source: 'a',
    22.       target: 'b'
    23.     },
    24.     {
    25.       type: 'link',
    26.       source: 'a',
    27.       target: 'g'
    28.     },
    29.  
    30.     {
    31.       type: 'node',
    32.       id: 'd',
    33.       name: 'δ'
    34.     },
    35.     {
    36.       type: 'node',
    37.       id: 'e',
    38.       name: 'ε'
    39.     },
    40.     {
    41.       type: 'node',
    42.       id: 'z',
    43.       name: 'ζ'
    44.     },
    45.     {
    46.       type: 'node',
    47.       id: 'th',
    48.       name: 'θ'
    49.     },
    50.     {
    51.       type: 'link',
    52.       source: 'd',
    53.       target: 'e'
    54.     },
    55.     {
    56.       type: 'link',
    57.       source: 'e',
    58.       target: 'z'
    59.     },
    60.     {
    61.       type: 'link',
    62.       source: 'z',
    63.       target: 'th'
    64.     },
    65.     {
    66.       type: 'link',
    67.       source: 'th',
    68.       target: 'd'
    69.     },
    70.  
    71.     {
    72.       type: 'node',
    73.       id: 'i',
    74.       name: 'ι'
    75.     },
    76.     {
    77.       type: 'node',
    78.       id: 'k',
    79.       name: 'κ'
    80.     },
    81.     {
    82.       type: 'link',
    83.       source: 'i',
    84.       target: 'k'
    85.     },
    86.   ];
    87.  
    88.   let chartConfig = {
    89.     type: 'tree',
    90.     plotarea: {
    91.       margin: '50px'
    92.     },
    93.     options: {
    94.       aspect: 'graph',
    95.       springLength: 75,
    96.       attractionConstant: 0.8,
    97.       repulsionConstant: 4000,
    98.       repulsionDistanceFactor: 20,
    99.       link: {
    100.         lineColor: '#000',
    101.         lineWidth: '2px',
    102.         endPoint: {
    103.           type: 'triangle',
    104.           width: '7px',
    105.           length: '10px',
    106.           borderColor: '#505050',
    107.           backgroundColor: '#505050'
    108.         },
    109.       },
    110.       'link[source-i]': {
    111.         startPoint: {
    112.           type: 'triangle',
    113.           width: '7px',
    114.           length: '10px',
    115.           borderColor: '#505050',
    116.           backgroundColor: '#505050'
    117.         },
    118.       },
    119.       node: {
    120.         size: 24,
    121.         borderWidth: '3px',
    122.         borderColor: '#dedede',
    123.         backgroundColor: '#fff',
    124.         backgroundRepeat: 'no-repeat',
    125.         backgroundScale: 0.75,
    126.         label: {
    127.           color: '#505050',
    128.           fontSize: '18px'
    129.         }
    130.       },
    131.     },
    132.     series: chartData
    133.   };
    134.  
    135.   zingchart.render({
    136.     id: 'myChart',
    137.     width: '100%',
    138.     height: '100%',
    139.     data: chartConfig
    140.   });
    141.  
    142. });