<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ZingSoft Demo</title>
<script nonce="undefined" 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;
}
</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:load 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
// data format for sunburst chart
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 = {
type: 'sunburst',
globals: {
fontSize: '14px'
},
title: {
text: "Value Boxes"
},
subtitle: {
text: "with placement set to 'in' and 'out' based on the node value",
'font-weight': "normal"
},
options: {
palette: ['#7CA82B', '#29A2CC', '#D31E1E', '#EF8535', '#A05F18', '#265E96', '#6B7075', '#28536B', '#A87356', '#70AE6E', '#764493', '#BA163B', '#E8630A'],
slice: 0,
space: 0
},
// plot represents general series, or plots, styling
plot: {
// hoverstate
tooltip: {
align: 'left',
padding: '10px 15px',
borderRadius: '3px',
thousandsSeparator: ','
},
'value-box': {
text: "%v",
'font-size': 12,
'font-family': "Georgia",
'font-weight': "normal",
rules: [{
rule: "%v > 60001",
placement: "in",
'offset-r': "50%",
'font-color': "white",
},
{
rule: "%v <= 6000",
placement: "out",
'font-color': "gray",
}
]
}
},
plotarea: {
margin: '20px 5px 5px 5px'
},
scaleR: {
'-ref-angle': 180,
'-aperture': 180
},
series: chartData
};
// render chart
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
});
</script>
</body>
</html>
// window:load 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
// data format for sunburst chart
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 = {
type: 'sunburst',
globals: {
fontSize: '14px'
},
title: {
text: "Value Boxes"
},
subtitle: {
text: "with placement set to 'in' and 'out' based on the node value",
'font-weight': "normal"
},
options: {
palette: ['#7CA82B', '#29A2CC', '#D31E1E', '#EF8535', '#A05F18', '#265E96', '#6B7075', '#28536B', '#A87356', '#70AE6E', '#764493', '#BA163B', '#E8630A'],
slice: 0,
space: 0
},
// plot represents general series, or plots, styling
plot: {
// hoverstate
tooltip: {
align: 'left',
padding: '10px 15px',
borderRadius: '3px',
thousandsSeparator: ','
},
'value-box': {
text: "%v",
'font-size': 12,
'font-family': "Georgia",
'font-weight': "normal",
rules: [{
rule: "%v > 60001",
placement: "in",
'offset-r': "50%",
'font-color': "white",
},
{
rule: "%v <= 6000",
placement: "out",
'font-color': "gray",
}
]
}
},
plotarea: {
margin: '20px 5px 5px 5px'
},
scaleR: {
'-ref-angle': 180,
'-aperture': 180
},
series: chartData
};
// render chart
zingchart.render({
id: 'myChart',
data: chartConfig,
height: '100%',
width: '100%',
});
});