• 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.   <style>
    9.     html,
    10.     body {
    11.       margin: 0;
    12.       padding: 0;
    13.       width: 100%;
    14.       height: 100%;
    15.     }
    16.  
    17.     .chart--container {
    18.       min-height: 150px;
    19.       width: 100%;
    20.       height: 100%;
    21.     }
    22.  
    23.     .zc-ref {
    24.       display: none;
    25.     }
    26.   </style>
    27. </head>
    28.  
    29. <body>
    30.   <!-- CHART CONTAINER -->
    31.   <div id="myChart" class="chart--container">
    32.     <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
    33.   </div>
    34.   <script>
    35.     ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // window:load event for Javascript to run after HTML
    36.     // because this Javascript is injected into the document head
    37.     window.addEventListener('load', () => {
    38.       // Javascript code to execute after DOM content
    39.       let chartData = [{
    40.         id: 'flare',
    41.         text: 'flare',
    42.         parent: ''
    43.       }, {
    44.         id: 'analytics',
    45.         text: 'analytics',
    46.         parent: 'flare'
    47.       }, {
    48.         id: 'cluster',
    49.         text: 'cluster',
    50.         parent: 'analytics'
    51.       }, {
    52.         id: 'agglomerativecluster',
    53.         text: 'AgglomerativeCluster',
    54.         parent: 'cluster',
    55.         value: 3938
    56.       }, {
    57.         id: 'communitystructure',
    58.         text: 'CommunityStructure',
    59.         parent: 'cluster',
    60.         value: 3812
    61.       }, {
    62.         id: 'hierarchicalcluster',
    63.         text: 'HierarchicalCluster',
    64.         parent: 'cluster',
    65.         value: 6714
    66.       }, {
    67.         id: 'mergeedge',
    68.         text: 'MergeEdge',
    69.         parent: 'cluster',
    70.         value: 743
    71.       }, {
    72.         id: 'graph',
    73.         text: 'graph',
    74.         parent: 'analytics'
    75.       }, {
    76.         id: 'betweennesscentrality',
    77.         text: 'BetweennessCentrality',
    78.         parent: 'graph',
    79.         value: 3534
    80.       }, {
    81.         id: 'linkdistance',
    82.         text: 'LinkDistance',
    83.         parent: 'graph',
    84.         value: 5731
    85.       }, {
    86.         id: 'maxflowmincut',
    87.         text: 'MaxFlowMinCut',
    88.         parent: 'graph',
    89.         value: 7840
    90.       }, {
    91.         id: 'shortestpaths',
    92.         text: 'ShortestPaths',
    93.         parent: 'graph',
    94.         value: 5914
    95.       }, {
    96.         id: 'spanningtree',
    97.         text: 'SpanningTree',
    98.         parent: 'graph',
    99.         value: 3416
    100.       }, {
    101.         id: 'optimization',
    102.         text: 'optimization',
    103.         parent: 'analytics'
    104.       }, {
    105.         id: 'aspectratiobanker',
    106.         text: 'AspectRatioBanker',
    107.         parent: 'optimization',
    108.         value: 7074
    109.       }, {
    110.         id: 'animate',
    111.         text: 'animate',
    112.         parent: 'flare'
    113.       }, {
    114.         id: 'easing',
    115.         text: 'Easing',
    116.         parent: 'animate',
    117.         value: 17010
    118.       }, {
    119.         id: 'functionsequence',
    120.         text: 'FunctionSequence',
    121.         parent: 'animate',
    122.         value: 5842
    123.       }, {
    124.         id: 'interpolate',
    125.         text: 'interpolate',
    126.         parent: 'animate'
    127.       }, {
    128.         id: 'arrayinterpolator',
    129.         text: 'ArrayInterpolator',
    130.         parent: 'interpolate',
    131.         value: 1983
    132.       }, {
    133.         id: 'colorinterpolator',
    134.         text: 'ColorInterpolator',
    135.         parent: 'interpolate',
    136.         value: 2047
    137.       }, {
    138.         id: 'dateinterpolator',
    139.         text: 'DateInterpolator',
    140.         parent: 'interpolate',
    141.         value: 1375
    142.       }, {
    143.         id: 'interpolator',
    144.         text: 'Interpolator',
    145.         parent: 'interpolate',
    146.         value: 8746
    147.       }, {
    148.         id: 'matrixinterpolator',
    149.         text: 'MatrixInterpolator',
    150.         parent: 'interpolate',
    151.         value: 2202
    152.       }, {
    153.         id: 'numberinterpolator',
    154.         text: 'NumberInterpolator',
    155.         parent: 'interpolate',
    156.         value: 1382
    157.       }, {
    158.         id: 'objectinterpolator',
    159.         text: 'ObjectInterpolator',
    160.         parent: 'interpolate',
    161.         value: 1629
    162.       }, {
    163.         id: 'pointinterpolator',
    164.         text: 'PointInterpolator',
    165.         parent: 'interpolate',
    166.         value: 1675
    167.       }];
    168.       // full ZingChart schema can be found here:
    169.       // https://www.zingchart.com/docs/api/json-configuration/
    170.       let chartConfig = {
    171.         type: 'sunburst',
    172.         title: {
    173.           text: "Sunburst Chart"
    174.         },
    175.         options: {
    176.           palette: ['#2196F3', '#3F51B5', '#42A5F5', '#5C6BC0', '#64B5F6', '#7986CB', '#90CAF9', '#9FA8DA', '#BBDEFB', '#C5CAE9'],
    177.         },
    178.         series: chartData
    179.       };
    180.  
    181.       // render chart
    182.       zingchart.render({
    183.         id: 'myChart',
    184.         data: chartConfig,
    185.         height: '100%',
    186.         width: '100%',
    187.       });
    188.     });
    189.   </script>
    190. </body>
    191.  
    192. </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. </head>
    9.  
    10. <body>
    11.   <!-- CHART CONTAINER -->
    12.   <div id="myChart" class="chart--container">
    13.     <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
    14.   </div>
    15. </body>
    16.  
    17. </html>
    1. html,
    2. body {
    3.   margin: 0;
    4.   padding: 0;
    5.   width: 100%;
    6.   height: 100%;
    7. }
    8.  
    9. .chart--container {
    10.   min-height: 150px;
    11.   width: 100%;
    12.   height: 100%;
    13. }
    14.  
    15. .zc-ref {
    16.   display: none;
    17. }
    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.   // Javascript code to execute after DOM content
    5.   let chartData = [{
    6.     id: 'flare',
    7.     text: 'flare',
    8.     parent: ''
    9.   }, {
    10.     id: 'analytics',
    11.     text: 'analytics',
    12.     parent: 'flare'
    13.   }, {
    14.     id: 'cluster',
    15.     text: 'cluster',
    16.     parent: 'analytics'
    17.   }, {
    18.     id: 'agglomerativecluster',
    19.     text: 'AgglomerativeCluster',
    20.     parent: 'cluster',
    21.     value: 3938
    22.   }, {
    23.     id: 'communitystructure',
    24.     text: 'CommunityStructure',
    25.     parent: 'cluster',
    26.     value: 3812
    27.   }, {
    28.     id: 'hierarchicalcluster',
    29.     text: 'HierarchicalCluster',
    30.     parent: 'cluster',
    31.     value: 6714
    32.   }, {
    33.     id: 'mergeedge',
    34.     text: 'MergeEdge',
    35.     parent: 'cluster',
    36.     value: 743
    37.   }, {
    38.     id: 'graph',
    39.     text: 'graph',
    40.     parent: 'analytics'
    41.   }, {
    42.     id: 'betweennesscentrality',
    43.     text: 'BetweennessCentrality',
    44.     parent: 'graph',
    45.     value: 3534
    46.   }, {
    47.     id: 'linkdistance',
    48.     text: 'LinkDistance',
    49.     parent: 'graph',
    50.     value: 5731
    51.   }, {
    52.     id: 'maxflowmincut',
    53.     text: 'MaxFlowMinCut',
    54.     parent: 'graph',
    55.     value: 7840
    56.   }, {
    57.     id: 'shortestpaths',
    58.     text: 'ShortestPaths',
    59.     parent: 'graph',
    60.     value: 5914
    61.   }, {
    62.     id: 'spanningtree',
    63.     text: 'SpanningTree',
    64.     parent: 'graph',
    65.     value: 3416
    66.   }, {
    67.     id: 'optimization',
    68.     text: 'optimization',
    69.     parent: 'analytics'
    70.   }, {
    71.     id: 'aspectratiobanker',
    72.     text: 'AspectRatioBanker',
    73.     parent: 'optimization',
    74.     value: 7074
    75.   }, {
    76.     id: 'animate',
    77.     text: 'animate',
    78.     parent: 'flare'
    79.   }, {
    80.     id: 'easing',
    81.     text: 'Easing',
    82.     parent: 'animate',
    83.     value: 17010
    84.   }, {
    85.     id: 'functionsequence',
    86.     text: 'FunctionSequence',
    87.     parent: 'animate',
    88.     value: 5842
    89.   }, {
    90.     id: 'interpolate',
    91.     text: 'interpolate',
    92.     parent: 'animate'
    93.   }, {
    94.     id: 'arrayinterpolator',
    95.     text: 'ArrayInterpolator',
    96.     parent: 'interpolate',
    97.     value: 1983
    98.   }, {
    99.     id: 'colorinterpolator',
    100.     text: 'ColorInterpolator',
    101.     parent: 'interpolate',
    102.     value: 2047
    103.   }, {
    104.     id: 'dateinterpolator',
    105.     text: 'DateInterpolator',
    106.     parent: 'interpolate',
    107.     value: 1375
    108.   }, {
    109.     id: 'interpolator',
    110.     text: 'Interpolator',
    111.     parent: 'interpolate',
    112.     value: 8746
    113.   }, {
    114.     id: 'matrixinterpolator',
    115.     text: 'MatrixInterpolator',
    116.     parent: 'interpolate',
    117.     value: 2202
    118.   }, {
    119.     id: 'numberinterpolator',
    120.     text: 'NumberInterpolator',
    121.     parent: 'interpolate',
    122.     value: 1382
    123.   }, {
    124.     id: 'objectinterpolator',
    125.     text: 'ObjectInterpolator',
    126.     parent: 'interpolate',
    127.     value: 1629
    128.   }, {
    129.     id: 'pointinterpolator',
    130.     text: 'PointInterpolator',
    131.     parent: 'interpolate',
    132.     value: 1675
    133.   }];
    134.   // full ZingChart schema can be found here:
    135.   // https://www.zingchart.com/docs/api/json-configuration/
    136.   let chartConfig = {
    137.     type: 'sunburst',
    138.     title: {
    139.       text: "Sunburst Chart"
    140.     },
    141.     options: {
    142.       palette: ['#2196F3', '#3F51B5', '#42A5F5', '#5C6BC0', '#64B5F6', '#7986CB', '#90CAF9', '#9FA8DA', '#BBDEFB', '#C5CAE9'],
    143.     },
    144.     series: chartData
    145.   };
    146.  
    147.   // render chart
    148.   zingchart.render({
    149.     id: 'myChart',
    150.     data: chartConfig,
    151.     height: '100%',
    152.     width: '100%',
    153.   });
    154. });