<!doctype html>
<html class="zc-html">
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script nonce="undefined" src="https://cdn.zingchart.com/zingchart.min.js"></script>
<style>
.zc-body {
background: #fff;
}
.chart--container {
height: 100%;
width: 100%;
min-height: 800px;
}
.zc-ref {
display: none;
}
</style>
</head>
<body class="zc-body">
<div id="myChart" class="chart--container">
<a href="https://www.zingchart.com/" rel="noopener" class="zc-ref">Powered by ZingChart</a>
</div>
<script>
ZC.LICENSE = ["569d52cefae586f634c54f86dc99e6a9", "b55b025e438fa8a98e32482b5f768ff5"];
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
},
{
"id": "rectangleinterpolator",
"text": "RectangleInterpolator",
"parent": "interpolate",
"value": 2042
},
{
"id": "ischedulable",
"text": "ISchedulable",
"parent": "animate",
"value": 1041
},
{
"id": "parallel",
"text": "Parallel",
"parent": "animate",
"value": 5176
},
{
"id": "pause",
"text": "Pause",
"parent": "animate",
"value": 449
},
{
"id": "scheduler",
"text": "Scheduler",
"parent": "animate",
"value": 5593
},
{
"id": "sequence",
"text": "Sequence",
"parent": "animate",
"value": 5534
},
{
"id": "transition",
"text": "Transition",
"parent": "animate",
"value": 9201
},
{
"id": "transitioner",
"text": "Transitioner",
"parent": "animate",
"value": 19975
},
{
"id": "transitionevent",
"text": "TransitionEvent",
"parent": "animate",
"value": 1116
},
{
"id": "tween",
"text": "Tween",
"parent": "animate",
"value": 6006
},
{
"id": "data",
"text": "data",
"parent": "flare"
},
{
"id": "converters",
"text": "converters",
"parent": "data"
},
{
"id": "converters1",
"text": "Converters",
"parent": "converters",
"value": 721
},
{
"id": "delimitedtextconverter",
"text": "DelimitedTextConverter",
"parent": "converters",
"value": 4294
},
{
"id": "graphmlconverter",
"text": "GraphMLConverter",
"parent": "converters",
"value": 9800
},
{
"id": "idataconverter",
"text": "IDataConverter",
"parent": "converters",
"value": 1314
},
{
"id": "jsonconverter",
"text": "JSONConverter",
"parent": "converters",
"value": 2220
},
{
"id": "datafield",
"text": "DataField",
"parent": "data",
"value": 1759
},
{
"id": "dataschema",
"text": "DataSchema",
"parent": "data",
"value": 2165
},
{
"id": "dataset",
"text": "DataSet",
"parent": "data",
"value": 586
},
{
"id": "datasource",
"text": "DataSource",
"parent": "data",
"value": 3331
},
{
"id": "datatable",
"text": "DataTable",
"parent": "data",
"value": 772
},
{
"id": "datautil",
"text": "DataUtil",
"parent": "data",
"value": 3322
},
{
"id": "display",
"text": "display",
"parent": "flare"
},
{
"id": "dirtysprite",
"text": "DirtySprite",
"parent": "display",
"value": 8833
},
{
"id": "linesprite",
"text": "LineSprite",
"parent": "display",
"value": 1732
},
{
"id": "rectsprite",
"text": "RectSprite",
"parent": "display",
"value": 3623
},
{
"id": "textsprite",
"text": "TextSprite",
"parent": "display",
"value": 10066
},
{
"id": "flex",
"text": "flex",
"parent": "flare"
},
{
"id": "flarevis",
"text": "FlareVis",
"parent": "flex",
"value": 4116
},
{
"id": "physics",
"text": "physics",
"parent": "flare"
},
{
"id": "dragforce",
"text": "DragForce",
"parent": "physics",
"value": 1082
},
{
"id": "gravityforce",
"text": "GravityForce",
"parent": "physics",
"value": 1336
},
{
"id": "iforce",
"text": "IForce",
"parent": "physics",
"value": 319
},
{
"id": "nbodyforce",
"text": "NBodyForce",
"parent": "physics",
"value": 10498
},
{
"id": "particle",
"text": "Particle",
"parent": "physics",
"value": 2822
},
{
"id": "simulation",
"text": "Simulation",
"parent": "physics",
"value": 9983
},
{
"id": "spring",
"text": "Spring",
"parent": "physics",
"value": 2213
},
{
"id": "springforce",
"text": "SpringForce",
"parent": "physics",
"value": 1681
},
{
"id": "query",
"text": "query",
"parent": "flare"
},
{
"id": "aggregateexpression",
"text": "AggregateExpression",
"parent": "query",
"value": 1616
},
{
"id": "and",
"text": "And",
"parent": "query",
"value": 1027
},
{
"id": "arithmetic",
"text": "Arithmetic",
"parent": "query",
"value": 3891
},
{
"id": "average",
"text": "Average",
"parent": "query",
"value": 891
},
{
"id": "binaryexpression",
"text": "BinaryExpression",
"parent": "query",
"value": 2893
},
{
"id": "comparison",
"text": "Comparison",
"parent": "query",
"value": 5103
},
{
"id": "compositeexpression",
"text": "CompositeExpression",
"parent": "query",
"value": 3677
},
{
"id": "count",
"text": "Count",
"parent": "query",
"value": 781
},
{
"id": "dateutil",
"text": "DateUtil",
"parent": "query",
"value": 4141
},
{
"id": "distinct",
"text": "Distinct",
"parent": "query",
"value": 933
},
{
"id": "expression",
"text": "Expression",
"parent": "query",
"value": 5130
},
{
"id": "expressioniterator",
"text": "ExpressionIterator",
"parent": "query",
"value": 3617
},
{
"id": "fn",
"text": "Fn",
"parent": "query",
"value": 3240
},
{
"id": "if",
"text": "If",
"parent": "query",
"value": 2732
},
{
"id": "isa",
"text": "IsA",
"parent": "query",
"value": 2039
},
{
"id": "literal",
"text": "Literal",
"parent": "query",
"value": 1214
},
{
"id": "match",
"text": "Match",
"parent": "query",
"value": 3748
},
{
"id": "maximum",
"text": "Maximum",
"parent": "query",
"value": 843
},
{
"id": "methods",
"text": "methods",
"parent": "query"
},
{
"id": "add",
"text": "add",
"parent": "methods",
"value": 593
},
{
"id": "and1",
"text": "and",
"parent": "methods",
"value": 330
},
{
"id": "average1",
"text": "average",
"parent": "methods",
"value": 287
},
{
"id": "count1",
"text": "count",
"parent": "methods",
"value": 277
},
{
"id": "distinct1",
"text": "distinct",
"parent": "methods",
"value": 292
},
{
"id": "div",
"text": "div",
"parent": "methods",
"value": 595
},
{
"id": "eq",
"text": "eq",
"parent": "methods",
"value": 594
},
{
"id": "fn1",
"text": "fn",
"parent": "methods",
"value": 460
},
{
"id": "gt",
"text": "gt",
"parent": "methods",
"value": 603
},
{
"id": "gte",
"text": "gte",
"parent": "methods",
"value": 625
},
{
"id": "iff",
"text": "iff",
"parent": "methods",
"value": 748
},
{
"id": "isa1",
"text": "isa",
"parent": "methods",
"value": 461
},
{
"id": "lt",
"text": "lt",
"parent": "methods",
"value": 597
},
{
"id": "lte",
"text": "lte",
"parent": "methods",
"value": 619
},
{
"id": "max",
"text": "max",
"parent": "methods",
"value": 283
},
{
"id": "min",
"text": "min",
"parent": "methods",
"value": 283
},
{
"id": "mod",
"text": "mod",
"parent": "methods",
"value": 591
},
{
"id": "mul",
"text": "mul",
"parent": "methods",
"value": 603
},
{
"id": "neq",
"text": "neq",
"parent": "methods",
"value": 599
},
{
"id": "not",
"text": "not",
"parent": "methods",
"value": 386
},
{
"id": "or",
"text": "or",
"parent": "methods",
"value": 323
},
{
"id": "orderby",
"text": "orderby",
"parent": "methods",
"value": 307
},
{
"id": "range",
"text": "range",
"parent": "methods",
"value": 772
},
{
"id": "select",
"text": "select",
"parent": "methods",
"value": 296
},
{
"id": "stddev",
"text": "stddev",
"parent": "methods",
"value": 363
},
{
"id": "sub",
"text": "sub",
"parent": "methods",
"value": 600
},
{
"id": "sum",
"text": "sum",
"parent": "methods",
"value": 280
},
{
"id": "update",
"text": "update",
"parent": "methods",
"value": 307
},
{
"id": "variance",
"text": "variance",
"parent": "methods",
"value": 335
},
{
"id": "where",
"text": "where",
"parent": "methods",
"value": 299
},
{
"id": "xor",
"text": "xor",
"parent": "methods",
"value": 354
},
{
"id": "_",
"text": "_",
"parent": "methods",
"value": 264
},
{
"id": "minimum",
"text": "Minimum",
"parent": "query",
"value": 843
},
{
"id": "not1",
"text": "Not",
"parent": "query",
"value": 1554
},
{
"id": "or1",
"text": "Or",
"parent": "query",
"value": 970
},
{
"id": "query1",
"text": "Query",
"parent": "query",
"value": 13896
},
{
"id": "range1",
"text": "Range",
"parent": "query",
"value": 1594
},
{
"id": "stringutil",
"text": "StringUtil",
"parent": "query",
"value": 4130
},
{
"id": "sum1",
"text": "Sum",
"parent": "query",
"value": 791
},
{
"id": "variable",
"text": "Variable",
"parent": "query",
"value": 1124
},
{
"id": "variance1",
"text": "Variance",
"parent": "query",
"value": 1876
},
{
"id": "xor1",
"text": "Xor",
"parent": "query",
"value": 1101
},
{
"id": "scale",
"text": "scale",
"parent": "flare"
},
{
"id": "iscalemap",
"text": "IScaleMap",
"parent": "scale",
"value": 2105
},
{
"id": "linearscale",
"text": "LinearScale",
"parent": "scale",
"value": 1316
},
{
"id": "logscale",
"text": "LogScale",
"parent": "scale",
"value": 3151
},
{
"id": "ordinalscale",
"text": "OrdinalScale",
"parent": "scale",
"value": 3770
},
{
"id": "quantilescale",
"text": "QuantileScale",
"parent": "scale",
"value": 2435
},
{
"id": "quantitativescale",
"text": "QuantitativeScale",
"parent": "scale",
"value": 4839
},
{
"id": "rootscale",
"text": "RootScale",
"parent": "scale",
"value": 1756
},
{
"id": "scale1",
"text": "Scale",
"parent": "scale",
"value": 4268
},
{
"id": "scaletype",
"text": "ScaleType",
"parent": "scale",
"value": 1821
},
{
"id": "timescale",
"text": "TimeScale",
"parent": "scale",
"value": 5833
},
{
"id": "util",
"text": "util",
"parent": "flare"
},
{
"id": "arrays",
"text": "Arrays",
"parent": "util",
"value": 8258
},
{
"id": "colors",
"text": "Colors",
"parent": "util",
"value": 10001
},
{
"id": "dates",
"text": "Dates",
"parent": "util",
"value": 8217
},
{
"id": "displays",
"text": "Displays",
"parent": "util",
"value": 12555
},
{
"id": "filter",
"text": "Filter",
"parent": "util",
"value": 2324
},
{
"id": "geometry",
"text": "Geometry",
"parent": "util",
"value": 10993
},
{
"id": "heap",
"text": "heap",
"parent": "util"
},
{
"id": "fibonacciheap",
"text": "FibonacciHeap",
"parent": "heap",
"value": 9354
},
{
"id": "heapnode",
"text": "HeapNode",
"parent": "heap",
"value": 1233
},
{
"id": "ievaluable",
"text": "IEvaluable",
"parent": "util",
"value": 335
},
{
"id": "ipredicate",
"text": "IPredicate",
"parent": "util",
"value": 383
},
{
"id": "ivalueproxy",
"text": "IValueProxy",
"parent": "util",
"value": 874
},
{
"id": "math",
"text": "math",
"parent": "util"
},
{
"id": "densematrix",
"text": "DenseMatrix",
"parent": "math",
"value": 3165
},
{
"id": "imatrix",
"text": "IMatrix",
"parent": "math",
"value": 2815
},
{
"id": "sparsematrix",
"text": "SparseMatrix",
"parent": "math",
"value": 3366
},
{
"id": "maths",
"text": "Maths",
"parent": "util",
"value": 17705
},
{
"id": "orientation",
"text": "Orientation",
"parent": "util",
"value": 1486
},
{
"id": "palette",
"text": "palette",
"parent": "util"
},
{
"id": "colorpalette",
"text": "ColorPalette",
"parent": "palette",
"value": 6367
},
{
"id": "palette1",
"text": "Palette",
"parent": "palette",
"value": 1229
},
{
"id": "shapepalette",
"text": "ShapePalette",
"parent": "palette",
"value": 2059
},
{
"id": "sizepalette",
"text": "SizePalette",
"parent": "palette",
"value": 2291
},
{
"id": "property",
"text": "Property",
"parent": "util",
"value": 5559
},
{
"id": "shapes",
"text": "Shapes",
"parent": "util",
"value": 19118
},
{
"id": "sort",
"text": "Sort",
"parent": "util",
"value": 6887
},
{
"id": "stats",
"text": "Stats",
"parent": "util",
"value": 6557
},
{
"id": "strings",
"text": "Strings",
"parent": "util",
"value": 22026
},
{
"id": "vis",
"text": "vis",
"parent": "flare"
},
{
"id": "axis",
"text": "axis",
"parent": "vis"
},
{
"id": "axes",
"text": "Axes",
"parent": "axis",
"value": 1302
},
{
"id": "axis1",
"text": "Axis",
"parent": "axis",
"value": 24593
},
{
"id": "axisgridline",
"text": "AxisGridLine",
"parent": "axis",
"value": 652
},
{
"id": "axislabel",
"text": "AxisLabel",
"parent": "axis",
"value": 636
},
{
"id": "cartesianaxes",
"text": "CartesianAxes",
"parent": "axis",
"value": 6703
},
{
"id": "controls",
"text": "controls",
"parent": "vis"
},
{
"id": "anchorcontrol",
"text": "AnchorControl",
"parent": "controls",
"value": 2138
},
{
"id": "clickcontrol",
"text": "ClickControl",
"parent": "controls",
"value": 3824
},
{
"id": "control",
"text": "Control",
"parent": "controls",
"value": 1353
},
{
"id": "controllist",
"text": "ControlList",
"parent": "controls",
"value": 4665
},
{
"id": "dragcontrol",
"text": "DragControl",
"parent": "controls",
"value": 2649
},
{
"id": "expandcontrol",
"text": "ExpandControl",
"parent": "controls",
"value": 2832
},
{
"id": "hovercontrol",
"text": "HoverControl",
"parent": "controls",
"value": 4896
},
{
"id": "icontrol",
"text": "IControl",
"parent": "controls",
"value": 763
},
{
"id": "panzoomcontrol",
"text": "PanZoomControl",
"parent": "controls",
"value": 5222
},
{
"id": "selectioncontrol",
"text": "SelectionControl",
"parent": "controls",
"value": 7862
},
{
"id": "tooltipcontrol",
"text": "TooltipControl",
"parent": "controls",
"value": 8435
},
{
"id": "data1",
"text": "data",
"parent": "vis"
},
{
"id": "data2",
"text": "Data",
"parent": "data1",
"value": 20544
},
{
"id": "datalist",
"text": "DataList",
"parent": "data1",
"value": 19788
},
{
"id": "datasprite",
"text": "DataSprite",
"parent": "data1",
"value": 10349
},
{
"id": "edgesprite",
"text": "EdgeSprite",
"parent": "data1",
"value": 3301
},
{
"id": "nodesprite",
"text": "NodeSprite",
"parent": "data1",
"value": 19382
},
{
"id": "render",
"text": "render",
"parent": "data1"
},
{
"id": "arrowtype",
"text": "ArrowType",
"parent": "render",
"value": 698
},
{
"id": "edgerenderer",
"text": "EdgeRenderer",
"parent": "render",
"value": 5569
},
{
"id": "irenderer",
"text": "IRenderer",
"parent": "render",
"value": 353
},
{
"id": "shaperenderer",
"text": "ShapeRenderer",
"parent": "render",
"value": 2247
},
{
"id": "scalebinding",
"text": "ScaleBinding",
"parent": "data1",
"value": 11275
},
{
"id": "tree",
"text": "Tree",
"parent": "data1",
"value": 7147
},
{
"id": "treebuilder",
"text": "TreeBuilder",
"parent": "data1",
"value": 9930
},
{
"id": "events",
"text": "events",
"parent": "vis"
},
{
"id": "dataevent",
"text": "DataEvent",
"parent": "events",
"value": 2313
},
{
"id": "selectionevent",
"text": "SelectionEvent",
"parent": "events",
"value": 1880
},
{
"id": "tooltipevent",
"text": "TooltipEvent",
"parent": "events",
"value": 1701
},
{
"id": "visualizationevent",
"text": "VisualizationEvent",
"parent": "events",
"value": 1117
},
{
"id": "legend",
"text": "legend",
"parent": "vis"
},
{
"id": "legend1",
"text": "Legend",
"parent": "legend",
"value": 20859
},
{
"id": "legenditem",
"text": "LegendItem",
"parent": "legend",
"value": 4614
},
{
"id": "legendrange",
"text": "LegendRange",
"parent": "legend",
"value": 10530
},
{
"id": "operator",
"text": "operator",
"parent": "vis"
},
{
"id": "distortion",
"text": "distortion",
"parent": "operator"
},
{
"id": "bifocaldistortion",
"text": "BifocalDistortion",
"parent": "distortion",
"value": 4461
},
{
"id": "distortion1",
"text": "Distortion",
"parent": "distortion",
"value": 6314
},
{
"id": "fisheyedistortion",
"text": "FisheyeDistortion",
"parent": "distortion",
"value": 3444
},
{
"id": "encoder",
"text": "encoder",
"parent": "operator"
},
{
"id": "colorencoder",
"text": "ColorEncoder",
"parent": "encoder",
"value": 3179
},
{
"id": "encoder1",
"text": "Encoder",
"parent": "encoder",
"value": 4060
},
{
"id": "propertyencoder",
"text": "PropertyEncoder",
"parent": "encoder",
"value": 4138
},
{
"id": "shapeencoder",
"text": "ShapeEncoder",
"parent": "encoder",
"value": 1690
},
{
"id": "sizeencoder",
"text": "SizeEncoder",
"parent": "encoder",
"value": 1830
},
{
"id": "filter1",
"text": "filter",
"parent": "operator"
},
{
"id": "fisheyetreefilter",
"text": "FisheyeTreeFilter",
"parent": "filter1",
"value": 5219
},
{
"id": "graphdistancefilter",
"text": "GraphDistanceFilter",
"parent": "filter1",
"value": 3165
},
{
"id": "visibilityfilter",
"text": "VisibilityFilter",
"parent": "filter1",
"value": 3509
},
{
"id": "ioperator",
"text": "IOperator",
"parent": "operator",
"value": 1286
},
{
"id": "label",
"text": "label",
"parent": "operator"
},
{
"id": "labeler",
"text": "Labeler",
"parent": "label",
"value": 9956
},
{
"id": "radiallabeler",
"text": "RadialLabeler",
"parent": "label",
"value": 3899
},
{
"id": "stackedarealabeler",
"text": "StackedAreaLabeler",
"parent": "label",
"value": 3202
},
{
"id": "layout",
"text": "layout",
"parent": "operator"
},
{
"id": "axislayout",
"text": "AxisLayout",
"parent": "layout",
"value": 6725
},
{
"id": "bundlededgerouter",
"text": "BundledEdgeRouter",
"parent": "layout",
"value": 3727
},
{
"id": "circlelayout",
"text": "CircleLayout",
"parent": "layout",
"value": 9317
},
{
"id": "circlepackinglayout",
"text": "CirclePackingLayout",
"parent": "layout",
"value": 12003
},
{
"id": "dendrogramlayout",
"text": "DendrogramLayout",
"parent": "layout",
"value": 4853
},
{
"id": "forcedirectedlayout",
"text": "ForceDirectedLayout",
"parent": "layout",
"value": 8411
},
{
"id": "icicletreelayout",
"text": "IcicleTreeLayout",
"parent": "layout",
"value": 4864
},
{
"id": "indentedtreelayout",
"text": "IndentedTreeLayout",
"parent": "layout",
"value": 3174
},
{
"id": "layout1",
"text": "Layout",
"parent": "layout",
"value": 7881
},
{
"id": "nodelinktreelayout",
"text": "NodeLinkTreeLayout",
"parent": "layout",
"value": 12870
},
{
"id": "pielayout",
"text": "PieLayout",
"parent": "layout",
"value": 2728
},
{
"id": "radialtreelayout",
"text": "RadialTreeLayout",
"parent": "layout",
"value": 12348
},
{
"id": "randomlayout",
"text": "RandomLayout",
"parent": "layout",
"value": 870
},
{
"id": "stackedarealayout",
"text": "StackedAreaLayout",
"parent": "layout",
"value": 9121
},
{
"id": "treemaplayout",
"text": "TreeMapLayout",
"parent": "layout",
"value": 9191
},
{
"id": "operator1",
"text": "Operator",
"parent": "operator",
"value": 2490
},
{
"id": "operatorlist",
"text": "OperatorList",
"parent": "operator",
"value": 5248
},
{
"id": "operatorsequence",
"text": "OperatorSequence",
"parent": "operator",
"value": 4190
},
{
"id": "operatorswitch",
"text": "OperatorSwitch",
"parent": "operator",
"value": 2581
},
{
"id": "sortoperator",
"text": "SortOperator",
"parent": "operator",
"value": 2023
},
{
"id": "visualization",
"text": "Visualization",
"parent": "vis",
"value": 16540
}
];
// full ZingChart schema can be found here:
// https://www.zingchart.com/docs/api/json-configuration/
let chartConfig = {
backgroundColor: '#eee #ddd',
graphset: [{
type: 'sunburst',
plotarea: {
margin: '5px'
},
options: {
space: 0,
slice: 0,
palette: ['#7CA82B', '#29A2CC', '#D31E1E', '#EF8535', '#A05F18', '#265E96', '#6B7075', '#28536B', '#A87356', '#70AE6E', '#764493', '#BA163B', '#E8630A']
},
scaleR: {
RefAngle: 180,
Aperture: 180
},
tooltip: {
align: 'left',
thousandsSeparator: ','
},
plot: {
tooltipText: '<span style=font-size:19px>%plot-text</span><br/>Size: %node-value',
alpha: 1,
borderAlpha: 0.1,
valueBox: {
color: '#000',
fontSize: '10px',
visible: null,
text: '%data-vbtext'
}
},
series: chartData
}]
};
zingchart.render({
id: 'myChart',
width: '100%',
height: '100%',
data: chartConfig
});
</script>
</body>
</html>
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},
{"id":"rectangleinterpolator","text":"RectangleInterpolator","parent":"interpolate","value":2042},
{"id":"ischedulable","text":"ISchedulable","parent":"animate","value":1041},
{"id":"parallel","text":"Parallel","parent":"animate","value":5176},
{"id":"pause","text":"Pause","parent":"animate","value":449},
{"id":"scheduler","text":"Scheduler","parent":"animate","value":5593},
{"id":"sequence","text":"Sequence","parent":"animate","value":5534},
{"id":"transition","text":"Transition","parent":"animate","value":9201},
{"id":"transitioner","text":"Transitioner","parent":"animate","value":19975},
{"id":"transitionevent","text":"TransitionEvent","parent":"animate","value":1116},
{"id":"tween","text":"Tween","parent":"animate","value":6006},
{"id":"data","text":"data","parent":"flare"},
{"id":"converters","text":"converters","parent":"data"},
{"id":"converters1","text":"Converters","parent":"converters","value":721},
{"id":"delimitedtextconverter","text":"DelimitedTextConverter","parent":"converters","value":4294},
{"id":"graphmlconverter","text":"GraphMLConverter","parent":"converters","value":9800},
{"id":"idataconverter","text":"IDataConverter","parent":"converters","value":1314},
{"id":"jsonconverter","text":"JSONConverter","parent":"converters","value":2220},
{"id":"datafield","text":"DataField","parent":"data","value":1759},
{"id":"dataschema","text":"DataSchema","parent":"data","value":2165},
{"id":"dataset","text":"DataSet","parent":"data","value":586},
{"id":"datasource","text":"DataSource","parent":"data","value":3331},
{"id":"datatable","text":"DataTable","parent":"data","value":772},
{"id":"datautil","text":"DataUtil","parent":"data","value":3322},
{"id":"display","text":"display","parent":"flare"},
{"id":"dirtysprite","text":"DirtySprite","parent":"display","value":8833},
{"id":"linesprite","text":"LineSprite","parent":"display","value":1732},
{"id":"rectsprite","text":"RectSprite","parent":"display","value":3623},
{"id":"textsprite","text":"TextSprite","parent":"display","value":10066},
{"id":"flex","text":"flex","parent":"flare"},
{"id":"flarevis","text":"FlareVis","parent":"flex","value":4116},
{"id":"physics","text":"physics","parent":"flare"},
{"id":"dragforce","text":"DragForce","parent":"physics","value":1082},
{"id":"gravityforce","text":"GravityForce","parent":"physics","value":1336},
{"id":"iforce","text":"IForce","parent":"physics","value":319},
{"id":"nbodyforce","text":"NBodyForce","parent":"physics","value":10498},
{"id":"particle","text":"Particle","parent":"physics","value":2822},
{"id":"simulation","text":"Simulation","parent":"physics","value":9983},
{"id":"spring","text":"Spring","parent":"physics","value":2213},
{"id":"springforce","text":"SpringForce","parent":"physics","value":1681},
{"id":"query","text":"query","parent":"flare"},
{"id":"aggregateexpression","text":"AggregateExpression","parent":"query","value":1616},
{"id":"and","text":"And","parent":"query","value":1027},
{"id":"arithmetic","text":"Arithmetic","parent":"query","value":3891},
{"id":"average","text":"Average","parent":"query","value":891},
{"id":"binaryexpression","text":"BinaryExpression","parent":"query","value":2893},
{"id":"comparison","text":"Comparison","parent":"query","value":5103},
{"id":"compositeexpression","text":"CompositeExpression","parent":"query","value":3677},
{"id":"count","text":"Count","parent":"query","value":781},
{"id":"dateutil","text":"DateUtil","parent":"query","value":4141},
{"id":"distinct","text":"Distinct","parent":"query","value":933},
{"id":"expression","text":"Expression","parent":"query","value":5130},
{"id":"expressioniterator","text":"ExpressionIterator","parent":"query","value":3617},
{"id":"fn","text":"Fn","parent":"query","value":3240},
{"id":"if","text":"If","parent":"query","value":2732},
{"id":"isa","text":"IsA","parent":"query","value":2039},
{"id":"literal","text":"Literal","parent":"query","value":1214},
{"id":"match","text":"Match","parent":"query","value":3748},
{"id":"maximum","text":"Maximum","parent":"query","value":843},
{"id":"methods","text":"methods","parent":"query"},
{"id":"add","text":"add","parent":"methods","value":593},
{"id":"and1","text":"and","parent":"methods","value":330},
{"id":"average1","text":"average","parent":"methods","value":287},
{"id":"count1","text":"count","parent":"methods","value":277},
{"id":"distinct1","text":"distinct","parent":"methods","value":292},
{"id":"div","text":"div","parent":"methods","value":595},
{"id":"eq","text":"eq","parent":"methods","value":594},
{"id":"fn1","text":"fn","parent":"methods","value":460},
{"id":"gt","text":"gt","parent":"methods","value":603},
{"id":"gte","text":"gte","parent":"methods","value":625},
{"id":"iff","text":"iff","parent":"methods","value":748},
{"id":"isa1","text":"isa","parent":"methods","value":461},
{"id":"lt","text":"lt","parent":"methods","value":597},
{"id":"lte","text":"lte","parent":"methods","value":619},
{"id":"max","text":"max","parent":"methods","value":283},
{"id":"min","text":"min","parent":"methods","value":283},
{"id":"mod","text":"mod","parent":"methods","value":591},
{"id":"mul","text":"mul","parent":"methods","value":603},
{"id":"neq","text":"neq","parent":"methods","value":599},
{"id":"not","text":"not","parent":"methods","value":386},
{"id":"or","text":"or","parent":"methods","value":323},
{"id":"orderby","text":"orderby","parent":"methods","value":307},
{"id":"range","text":"range","parent":"methods","value":772},
{"id":"select","text":"select","parent":"methods","value":296},
{"id":"stddev","text":"stddev","parent":"methods","value":363},
{"id":"sub","text":"sub","parent":"methods","value":600},
{"id":"sum","text":"sum","parent":"methods","value":280},
{"id":"update","text":"update","parent":"methods","value":307},
{"id":"variance","text":"variance","parent":"methods","value":335},
{"id":"where","text":"where","parent":"methods","value":299},
{"id":"xor","text":"xor","parent":"methods","value":354},
{"id":"_","text":"_","parent":"methods","value":264},
{"id":"minimum","text":"Minimum","parent":"query","value":843},
{"id":"not1","text":"Not","parent":"query","value":1554},
{"id":"or1","text":"Or","parent":"query","value":970},
{"id":"query1","text":"Query","parent":"query","value":13896},
{"id":"range1","text":"Range","parent":"query","value":1594},
{"id":"stringutil","text":"StringUtil","parent":"query","value":4130},
{"id":"sum1","text":"Sum","parent":"query","value":791},
{"id":"variable","text":"Variable","parent":"query","value":1124},
{"id":"variance1","text":"Variance","parent":"query","value":1876},
{"id":"xor1","text":"Xor","parent":"query","value":1101},
{"id":"scale","text":"scale","parent":"flare"},
{"id":"iscalemap","text":"IScaleMap","parent":"scale","value":2105},
{"id":"linearscale","text":"LinearScale","parent":"scale","value":1316},
{"id":"logscale","text":"LogScale","parent":"scale","value":3151},
{"id":"ordinalscale","text":"OrdinalScale","parent":"scale","value":3770},
{"id":"quantilescale","text":"QuantileScale","parent":"scale","value":2435},
{"id":"quantitativescale","text":"QuantitativeScale","parent":"scale","value":4839},
{"id":"rootscale","text":"RootScale","parent":"scale","value":1756},
{"id":"scale1","text":"Scale","parent":"scale","value":4268},
{"id":"scaletype","text":"ScaleType","parent":"scale","value":1821},
{"id":"timescale","text":"TimeScale","parent":"scale","value":5833},
{"id":"util","text":"util","parent":"flare"},
{"id":"arrays","text":"Arrays","parent":"util","value":8258},
{"id":"colors","text":"Colors","parent":"util","value":10001},
{"id":"dates","text":"Dates","parent":"util","value":8217},
{"id":"displays","text":"Displays","parent":"util","value":12555},
{"id":"filter","text":"Filter","parent":"util","value":2324},
{"id":"geometry","text":"Geometry","parent":"util","value":10993},
{"id":"heap","text":"heap","parent":"util"},
{"id":"fibonacciheap","text":"FibonacciHeap","parent":"heap","value":9354},
{"id":"heapnode","text":"HeapNode","parent":"heap","value":1233},
{"id":"ievaluable","text":"IEvaluable","parent":"util","value":335},
{"id":"ipredicate","text":"IPredicate","parent":"util","value":383},
{"id":"ivalueproxy","text":"IValueProxy","parent":"util","value":874},
{"id":"math","text":"math","parent":"util"},
{"id":"densematrix","text":"DenseMatrix","parent":"math","value":3165},
{"id":"imatrix","text":"IMatrix","parent":"math","value":2815},
{"id":"sparsematrix","text":"SparseMatrix","parent":"math","value":3366},
{"id":"maths","text":"Maths","parent":"util","value":17705},
{"id":"orientation","text":"Orientation","parent":"util","value":1486},
{"id":"palette","text":"palette","parent":"util"},
{"id":"colorpalette","text":"ColorPalette","parent":"palette","value":6367},
{"id":"palette1","text":"Palette","parent":"palette","value":1229},
{"id":"shapepalette","text":"ShapePalette","parent":"palette","value":2059},
{"id":"sizepalette","text":"SizePalette","parent":"palette","value":2291},
{"id":"property","text":"Property","parent":"util","value":5559},
{"id":"shapes","text":"Shapes","parent":"util","value":19118},
{"id":"sort","text":"Sort","parent":"util","value":6887},
{"id":"stats","text":"Stats","parent":"util","value":6557},
{"id":"strings","text":"Strings","parent":"util","value":22026},
{"id":"vis","text":"vis","parent":"flare"},
{"id":"axis","text":"axis","parent":"vis"},
{"id":"axes","text":"Axes","parent":"axis","value":1302},
{"id":"axis1","text":"Axis","parent":"axis","value":24593},
{"id":"axisgridline","text":"AxisGridLine","parent":"axis","value":652},
{"id":"axislabel","text":"AxisLabel","parent":"axis","value":636},
{"id":"cartesianaxes","text":"CartesianAxes","parent":"axis","value":6703},
{"id":"controls","text":"controls","parent":"vis"},
{"id":"anchorcontrol","text":"AnchorControl","parent":"controls","value":2138},
{"id":"clickcontrol","text":"ClickControl","parent":"controls","value":3824},
{"id":"control","text":"Control","parent":"controls","value":1353},
{"id":"controllist","text":"ControlList","parent":"controls","value":4665},
{"id":"dragcontrol","text":"DragControl","parent":"controls","value":2649},
{"id":"expandcontrol","text":"ExpandControl","parent":"controls","value":2832},
{"id":"hovercontrol","text":"HoverControl","parent":"controls","value":4896},
{"id":"icontrol","text":"IControl","parent":"controls","value":763},
{"id":"panzoomcontrol","text":"PanZoomControl","parent":"controls","value":5222},
{"id":"selectioncontrol","text":"SelectionControl","parent":"controls","value":7862},
{"id":"tooltipcontrol","text":"TooltipControl","parent":"controls","value":8435},
{"id":"data1","text":"data","parent":"vis"},
{"id":"data2","text":"Data","parent":"data1","value":20544},
{"id":"datalist","text":"DataList","parent":"data1","value":19788},
{"id":"datasprite","text":"DataSprite","parent":"data1","value":10349},
{"id":"edgesprite","text":"EdgeSprite","parent":"data1","value":3301},
{"id":"nodesprite","text":"NodeSprite","parent":"data1","value":19382},
{"id":"render","text":"render","parent":"data1"},
{"id":"arrowtype","text":"ArrowType","parent":"render","value":698},
{"id":"edgerenderer","text":"EdgeRenderer","parent":"render","value":5569},
{"id":"irenderer","text":"IRenderer","parent":"render","value":353},
{"id":"shaperenderer","text":"ShapeRenderer","parent":"render","value":2247},
{"id":"scalebinding","text":"ScaleBinding","parent":"data1","value":11275},
{"id":"tree","text":"Tree","parent":"data1","value":7147},
{"id":"treebuilder","text":"TreeBuilder","parent":"data1","value":9930},
{"id":"events","text":"events","parent":"vis"},
{"id":"dataevent","text":"DataEvent","parent":"events","value":2313},
{"id":"selectionevent","text":"SelectionEvent","parent":"events","value":1880},
{"id":"tooltipevent","text":"TooltipEvent","parent":"events","value":1701},
{"id":"visualizationevent","text":"VisualizationEvent","parent":"events","value":1117},
{"id":"legend","text":"legend","parent":"vis"},
{"id":"legend1","text":"Legend","parent":"legend","value":20859},
{"id":"legenditem","text":"LegendItem","parent":"legend","value":4614},
{"id":"legendrange","text":"LegendRange","parent":"legend","value":10530},
{"id":"operator","text":"operator","parent":"vis"},
{"id":"distortion","text":"distortion","parent":"operator"},
{"id":"bifocaldistortion","text":"BifocalDistortion","parent":"distortion","value":4461},
{"id":"distortion1","text":"Distortion","parent":"distortion","value":6314},
{"id":"fisheyedistortion","text":"FisheyeDistortion","parent":"distortion","value":3444},
{"id":"encoder","text":"encoder","parent":"operator"},
{"id":"colorencoder","text":"ColorEncoder","parent":"encoder","value":3179},
{"id":"encoder1","text":"Encoder","parent":"encoder","value":4060},
{"id":"propertyencoder","text":"PropertyEncoder","parent":"encoder","value":4138},
{"id":"shapeencoder","text":"ShapeEncoder","parent":"encoder","value":1690},
{"id":"sizeencoder","text":"SizeEncoder","parent":"encoder","value":1830},
{"id":"filter1","text":"filter","parent":"operator"},
{"id":"fisheyetreefilter","text":"FisheyeTreeFilter","parent":"filter1","value":5219},
{"id":"graphdistancefilter","text":"GraphDistanceFilter","parent":"filter1","value":3165},
{"id":"visibilityfilter","text":"VisibilityFilter","parent":"filter1","value":3509},
{"id":"ioperator","text":"IOperator","parent":"operator","value":1286},
{"id":"label","text":"label","parent":"operator"},
{"id":"labeler","text":"Labeler","parent":"label","value":9956},
{"id":"radiallabeler","text":"RadialLabeler","parent":"label","value":3899},
{"id":"stackedarealabeler","text":"StackedAreaLabeler","parent":"label","value":3202},
{"id":"layout","text":"layout","parent":"operator"},
{"id":"axislayout","text":"AxisLayout","parent":"layout","value":6725},
{"id":"bundlededgerouter","text":"BundledEdgeRouter","parent":"layout","value":3727},
{"id":"circlelayout","text":"CircleLayout","parent":"layout","value":9317},
{"id":"circlepackinglayout","text":"CirclePackingLayout","parent":"layout","value":12003},
{"id":"dendrogramlayout","text":"DendrogramLayout","parent":"layout","value":4853},
{"id":"forcedirectedlayout","text":"ForceDirectedLayout","parent":"layout","value":8411},
{"id":"icicletreelayout","text":"IcicleTreeLayout","parent":"layout","value":4864},
{"id":"indentedtreelayout","text":"IndentedTreeLayout","parent":"layout","value":3174},
{"id":"layout1","text":"Layout","parent":"layout","value":7881},
{"id":"nodelinktreelayout","text":"NodeLinkTreeLayout","parent":"layout","value":12870},
{"id":"pielayout","text":"PieLayout","parent":"layout","value":2728},
{"id":"radialtreelayout","text":"RadialTreeLayout","parent":"layout","value":12348},
{"id":"randomlayout","text":"RandomLayout","parent":"layout","value":870},
{"id":"stackedarealayout","text":"StackedAreaLayout","parent":"layout","value":9121},
{"id":"treemaplayout","text":"TreeMapLayout","parent":"layout","value":9191},
{"id":"operator1","text":"Operator","parent":"operator","value":2490},
{"id":"operatorlist","text":"OperatorList","parent":"operator","value":5248},
{"id":"operatorsequence","text":"OperatorSequence","parent":"operator","value":4190},
{"id":"operatorswitch","text":"OperatorSwitch","parent":"operator","value":2581},
{"id":"sortoperator","text":"SortOperator","parent":"operator","value":2023},
{"id":"visualization","text":"Visualization","parent":"vis","value":16540}
];
// full ZingChart schema can be found here:
// https://www.zingchart.com/docs/api/json-configuration/
let chartConfig = {
backgroundColor: '#eee #ddd',
graphset: [
{
type: 'sunburst',
plotarea: {
margin: '5px'
},
options: {
space: 0,
slice: 0,
palette: ['#7CA82B', '#29A2CC', '#D31E1E', '#EF8535', '#A05F18', '#265E96', '#6B7075', '#28536B', '#A87356', '#70AE6E', '#764493', '#BA163B', '#E8630A']
},
scaleR: {
RefAngle: 180,
Aperture: 180
},
tooltip: {
align: 'left',
thousandsSeparator: ','
},
plot: {
tooltipText: '<span style=font-size:19px>%plot-text</span><br/>Size: %node-value',
alpha: 1,
borderAlpha: 0.1,
valueBox: {
color: '#000',
fontSize: '10px',
visible: null,
text: '%data-vbtext'
}
},
series: chartData
}
]
};
zingchart.render({
id: 'myChart',
width: '100%',
height: '100%',
data: chartConfig
});
