HTMLcopy
1
<div id="container"></div>
CSScopy
6
1
html, body, #container {
2
width: 100%;
3
height: 100%;
4
margin: 0;
5
padding: 0;
6
}
JavaScriptcopy
x
1
anychart.onDocumentReady(function () {
2
3
//Create dataset
4
var dataSet = anychart.data.set([
5
['Winner', 50],
6
['Looser', 3]
7
])
8
dataSet.mapAs({x: 0, value: 1})
9
10
var chart = anychart.pie(dataSet);
11
12
// set chart title text settings
13
chart
14
.title('% WIN RATIO')
15
// set chart radius
16
.radius('50%')
17
// create empty area in pie chart
18
.innerRadius('60%');
19
// enable labels for a series
20
21
//Get numbers of winners and losers
22
var winnerCount = chart.getPoint(0).get("value")
23
var loserCount = chart.getPoint(1).get("value")
24
//Calculate winrate
25
var winRate = ((winnerCount*100)/(loserCount+winnerCount))
26
//Trim number and make it a String
27
var winRateString = winRate.toFixed(1).toString() + "%"
28
29
// Create and configure a centered label
30
var label = anychart.standalones.label();
31
label.text(winRateString); //<------Insert Dynamic value
32
label.width("100%");
33
label.height("100%");
34
label.fontColor("grey");
35
label.hAlign("center");
36
label.vAlign("middle");
37
label.fontSize("22");
38
39
// disable legend
40
var legend = chart.legend();
41
legend.enabled(false);
42
43
// set the label as the center content
44
chart.center().content(label);
45
46
// Information on hover
47
// configure tooltips on the chart
48
chart.tooltip().title("Volume");
49
chart.tooltip().format("{%value} Trades");
50
51
chart.labels(false);
52
chart.container('container');
53
54
// initiate chart drawing
55
chart.draw();
56
});
57