<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2>
<script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="http://www.amcharts.com/lib/3/pie.js"></script>
<script src="http://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>
</div>
</div>
#chartdiv {
width: 100%;
height: 500px;
}
var chartSettings = {
angle: 30,
balloonText: "[[title]]: [[View_Total_Sales_formatted]]",
dataProvider: [ {
"view_Customer_Code": "Turkey",
"View_Total_Sales": 501.9
}, {
"view_Customer_Code": "Czech Republic",
"View_Total_Sales": 301.9
}, {
"view_Customer_Code": "Ireland",
"View_Total_Sales": 201.1
}, {
"view_Customer_Code": "Germany",
"View_Total_Sales": 165.8
}, {
"view_Customer_Code": "Australia",
"View_Total_Sales": 13.1
}, {
"view_Customer_Code": "Austria",
"View_Total_Sales": 12.3
}, {
"view_Customer_Code": "UK",
"View_Total_Sales": 9
}, {
"view_Customer_Code": "Belgium",
"View_Total_Sales": 6
}, {
"view_Customer_Code": "The Netherlands",
"View_Total_Sales": 5
} ],
depth3D: 20,
groupPercent: 2.5,
groupedTitle: "Other",
labelFunction: function(item) {
// format value
var value = Math.round( item.value );
// format percent
var percent = Math.round( item.percents );
// format and return the label content
return item.title + ": " + value + " (" + percent + "%)";
},
maxAngle: 60,
maxDepth: 30,
minAngle: 0,
minDepth: 1,
outlineAlpha: 0.4,
startDuration: 0,
theme: "light",
titleField: "view_Customer_Code",
type: "pie",
valueField: "View_Total_Sales"
};
var chart = AmCharts.makeChart( "chartdiv", chartSettings );
