-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathNestedPieChart.js
More file actions
102 lines (88 loc) · 3.99 KB
/
Copy pathNestedPieChart.js
File metadata and controls
102 lines (88 loc) · 3.99 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
/// <reference path="JsChart-vsdoc.js" />
var Charting = MindFusion.Charting;
var Controls = Charting.Controls;
var Collections = MindFusion.Common.Collections;
var Drawing = MindFusion.Drawing;
var LabelKinds = Charting.LabelKinds;
var ToolTip = Charting.ToolTip;
// create the pie chart JS object
var pieChartEl = document.getElementById('pieChart');
pieChartEl.width = pieChartEl.offsetParent.clientWidth;
pieChartEl.height = pieChartEl.offsetParent.clientHeight;
var pieChart = new Controls.PieChart(pieChartEl);
pieChart.startAngle = 45;
pieChart.title = "Nested Performance Analysis";
pieChart.showDataLabels = LabelKinds.ToolTip | LabelKinds.OuterLabel;
// create a list with years starting from the last year always
var currentYear = new Date().getFullYear();
var years = [(currentYear - 1).toString(), (currentYear - 2).toString(), (currentYear - 3).toString()];
// create the outer pie series
var values = new Collections.List([10, 7, 6, 8, 6, 12, 8, 4, 7, 3]);
var outerLabels = new Collections.List(["D1", "D2", "D3", "D4", "D5", "D6", "D7", "D8", "D9", "D10"]);
var series = new Charting.PieSeries(values, null, outerLabels);
var total = 0;
for(var i = 0; i < values.count(); i++) total += values.items()[i];
series.supportedLabels = LabelKinds.ToolTip | LabelKinds.OuterLabel;
series.getLabel = function (index, kind) {
if (kind == LabelKinds.ToolTip)
return (values.items()[index]/total * 100).toFixed(1) + "%";
if (kind == LabelKinds.OuterLabel)
return this.outerLabels.items()[index];
return null;
};
pieChart.series = series;
// create the inner pie series
var series1 = new Charting.PieSeries(new Collections.List([23, 14, 34]), new Collections.List(years));
var p_renderer = new Charting.PieRenderer();
p_renderer.doughnut = true;
p_renderer.series = series1;
pieChart.plot.seriesRenderers.add(p_renderer);
// brushes and strokes for the internal pie
var brushes1 = new Collections.List([
new Drawing.Brush("#26a69a"), // Teal
new Drawing.Brush("#3f51b5"), // Indigo
new Drawing.Brush("#ffa000") // Amber
]);
var strokes1 = new Collections.List([new Drawing.Brush("#ffffff")]);
var seriesStrokes1 = new Collections.List([strokes1]);
var thicknesses1 = new Collections.List([6.0]);
var seriesThicknesses1 = new Collections.List([thicknesses1]);
p_renderer.seriesStyle = new Charting.PerElementSeriesStyle(
new Collections.List([brushes1]),
seriesStrokes1,
seriesThicknesses1
);
// brushes and strokes for the outer pie
var brushes = new Collections.List([
new Drawing.Brush("#4db6ac"), new Drawing.Brush("#80cbc4"), new Drawing.Brush("#b2dfdb"), // Teal shades
new Drawing.Brush("#7986cb"), new Drawing.Brush("#9fa8da"), // Indigo shades
new Drawing.Brush("#ffb300"), new Drawing.Brush("#ffca28"), new Drawing.Brush("#ffe082"), // Amber shades
new Drawing.Brush("#ef5350"), new Drawing.Brush("#e57373") // Red shades
]);
var strokes = new Collections.List([new Drawing.Brush("#ffffff")]);
var seriesStrokes = new Collections.List([strokes]);
var thicknesses = new Collections.List([6.0]);
var seriesThicknesses = new Collections.List([thicknesses]);
pieChart.plot.seriesStyle = new Charting.PerElementSeriesStyle(
new Collections.List([brushes]),
seriesStrokes,
seriesThicknesses
);
// pie styling
pieChart.theme.dataLabelsBrush = new Drawing.Brush("#455a64");
pieChart.theme.highlightStroke = new Drawing.Brush("#263238");
// chart legend
pieChart.legendRenderer.showSeriesElements = true;
pieChart.legendRenderer.title = "Annual Distribution (Last 3 Years)";
pieChart.legendRenderer.background = new Drawing.Brush("#ffffff");
pieChart.legendRenderer.borderStroke = new Drawing.Brush("#eeeeee");
pieChart.legendRenderer.elementLabelKind = LabelKinds.InnerLabel;
pieChart.showLegend = true;
// style for the tooltip
ToolTip.brush = new Drawing.Brush("#263238");
ToolTip.pen = new Drawing.Pen("#37474f");
ToolTip.textBrush = new Drawing.Brush("#ffffff");
ToolTip.font = new Drawing.Font("Inter", 11, Drawing.FontStyle.Bold);
ToolTip.horizontalPadding = 8;
ToolTip.verticalPadding = 6;
pieChart.draw();