• Edit
  • Download
  • <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>ZingSoft Demo</title>
        <script src="https://cdn.zingchart.com/zingchart.min.js"></script>
        <style>
            html,
            body {
                margin: 0;
                padding: 0;
                width: 100%;
                height: 100%;
            }
    
            .chart--container {
                min-height: 150px;
                width: 100%;
                height: 100%;
            }
    
            .zc-ref {
                display: none;
            }
    
            zing-grid[loading] {
                height: 450px;
            }
        </style>
    </head>
    
    <body>
        <!-- CHART CONTAINER -->
        <div id="myChart" class="chart--container">
            <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
        </div>
        <script>
            ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"]; // window.onload event for Javascript to run after HTML
            // because this Javascript is injected into the document head
            window.addEventListener('load', () => {
                // Javascript code to execute after DOM content
                let chartData = [{
                    id: 'flare',
                    text: 'flare',
                    parent: ''
                }, {
                    id: 'analytics',
                    text: 'analytics',
                    parent: 'flare'
                }, {
                    id: 'cluster',
                    text: 'cluster',
                    parent: 'analytics'
                }, {
                    id: 'agglomerativecluster',
                    text: 'AgglomerativeCluster',
                    parent: 'cluster',
                    value: 3938
                }, {
                    id: 'communitystructure',
                    text: 'CommunityStructure',
                    parent: 'cluster',
                    value: 3812
                }, {
                    id: 'hierarchicalcluster',
                    text: 'HierarchicalCluster',
                    parent: 'cluster',
                    value: 6714
                }, {
                    id: 'mergeedge',
                    text: 'MergeEdge',
                    parent: 'cluster',
                    value: 743
                }, {
                    id: 'graph',
                    text: 'graph',
                    parent: 'analytics'
                }, {
                    id: 'betweennesscentrality',
                    text: 'BetweennessCentrality',
                    parent: 'graph',
                    value: 3534
                }, {
                    id: 'linkdistance',
                    text: 'LinkDistance',
                    parent: 'graph',
                    value: 5731
                }, {
                    id: 'maxflowmincut',
                    text: 'MaxFlowMinCut',
                    parent: 'graph',
                    value: 7840
                }, {
                    id: 'shortestpaths',
                    text: 'ShortestPaths',
                    parent: 'graph',
                    value: 5914
                }, {
                    id: 'spanningtree',
                    text: 'SpanningTree',
                    parent: 'graph',
                    value: 3416
                }, {
                    id: 'optimization',
                    text: 'optimization',
                    parent: 'analytics'
                }, {
                    id: 'aspectratiobanker',
                    text: 'AspectRatioBanker',
                    parent: 'optimization',
                    value: 7074
                }, {
                    id: 'animate',
                    text: 'animate',
                    parent: 'flare'
                }, {
                    id: 'easing',
                    text: 'Easing',
                    parent: 'animate',
                    value: 17010
                }, {
                    id: 'functionsequence',
                    text: 'FunctionSequence',
                    parent: 'animate',
                    value: 5842
                }, {
                    id: 'interpolate',
                    text: 'interpolate',
                    parent: 'animate'
                }, {
                    id: 'arrayinterpolator',
                    text: 'ArrayInterpolator',
                    parent: 'interpolate',
                    value: 1983
                }, {
                    id: 'colorinterpolator',
                    text: 'ColorInterpolator',
                    parent: 'interpolate',
                    value: 2047
                }, {
                    id: 'dateinterpolator',
                    text: 'DateInterpolator',
                    parent: 'interpolate',
                    value: 1375
                }, {
                    id: 'interpolator',
                    text: 'Interpolator',
                    parent: 'interpolate',
                    value: 8746
                }, {
                    id: 'matrixinterpolator',
                    text: 'MatrixInterpolator',
                    parent: 'interpolate',
                    value: 2202
                }, {
                    id: 'numberinterpolator',
                    text: 'NumberInterpolator',
                    parent: 'interpolate',
                    value: 1382
                }, {
                    id: 'objectinterpolator',
                    text: 'ObjectInterpolator',
                    parent: 'interpolate',
                    value: 1629
                }, {
                    id: 'pointinterpolator',
                    text: 'PointInterpolator',
                    parent: 'interpolate',
                    value: 1675
                }];
                // full ZingChart schema can be found here:
                // https://www.zingchart.com/docs/api/json-configuration/
                let chartConfig = {
                    type: 'sunburst',
                    title: {
                        text: "Sunburst Chart"
                    },
                    series: chartData
                };
    
                // render chart
                zingchart.render({
                    id: 'myChart',
                    data: chartConfig,
                    height: '100%',
                    width: '100%',
                });
            });
        </script>
    </body>
    
    </html>
    <!DOCTYPE html>
    <html>
    	<head>
        <meta charset="utf-8">
        <title>ZingSoft Demo</title>
    		<script src="https://cdn.zingchart.com/zingchart.min.js"></script>
      </head>
      <body>
        <!-- CHART CONTAINER -->
        <div id="myChart" class="chart--container">
          <a class="zc-ref" href="https://www.zingchart.com/">Powered by ZingChart</a>
        </div>
      </body>
    </html>
    html, body {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
    }
    
    .chart--container {
      min-height: 150px;
      width: 100%;
      height: 100%;
    }
    
    .zc-ref {
      display: none;
    }
    // window.onload event for Javascript to run after HTML
    // because this Javascript is injected into the document head
    window.addEventListener('load', () => {
      // Javascript code to execute after DOM content
    	let chartData = [{id: 'flare', text: 'flare', parent: ''}, {id: 'analytics', text: 'analytics', parent: 'flare'}, {id: 'cluster', text: 'cluster', parent: 'analytics'}, {id: 'agglomerativecluster', text: 'AgglomerativeCluster', parent: 'cluster', value: 3938}, {id: 'communitystructure', text: 'CommunityStructure', parent: 'cluster', value: 3812}, {id: 'hierarchicalcluster', text: 'HierarchicalCluster', parent: 'cluster', value: 6714}, {id: 'mergeedge', text: 'MergeEdge', parent: 'cluster', value: 743}, {id: 'graph', text: 'graph', parent: 'analytics'}, {id: 'betweennesscentrality', text: 'BetweennessCentrality', parent: 'graph', value: 3534}, {id: 'linkdistance', text: 'LinkDistance', parent: 'graph', value: 5731}, {id: 'maxflowmincut', text: 'MaxFlowMinCut', parent: 'graph', value: 7840}, {id: 'shortestpaths', text: 'ShortestPaths', parent: 'graph', value: 5914}, {id: 'spanningtree', text: 'SpanningTree', parent: 'graph', value: 3416}, {id: 'optimization', text: 'optimization', parent: 'analytics'}, {id: 'aspectratiobanker', text: 'AspectRatioBanker', parent: 'optimization', value: 7074}, {id: 'animate', text: 'animate', parent: 'flare'}, {id: 'easing', text: 'Easing', parent: 'animate', value: 17010}, {id: 'functionsequence', text: 'FunctionSequence', parent: 'animate', value: 5842}, {id: 'interpolate', text: 'interpolate', parent: 'animate'}, {id: 'arrayinterpolator', text: 'ArrayInterpolator', parent: 'interpolate', value: 1983}, {id: 'colorinterpolator', text: 'ColorInterpolator', parent: 'interpolate', value: 2047}, {id: 'dateinterpolator', text: 'DateInterpolator', parent: 'interpolate', value: 1375}, {id: 'interpolator', text: 'Interpolator', parent: 'interpolate', value: 8746}, {id: 'matrixinterpolator', text: 'MatrixInterpolator', parent: 'interpolate', value: 2202}, {id: 'numberinterpolator', text: 'NumberInterpolator', parent: 'interpolate', value: 1382}, {id: 'objectinterpolator', text: 'ObjectInterpolator', parent: 'interpolate', value: 1629}, {id: 'pointinterpolator', text: 'PointInterpolator', parent: 'interpolate', value: 1675}];
      // full ZingChart schema can be found here:
      // https://www.zingchart.com/docs/api/json-configuration/
      let chartConfig = {
      	type: 'sunburst',
        title: {
        	text: "Sunburst Chart"
        },
        series: chartData 
      };
    
      // render chart
      zingchart.render({
        id: 'myChart',
        data: chartConfig,
        height: '100%',
        width: '100%',
      });
    });