Angular: Empty Fiddle
http://angularjs.org/
HTML
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/plugins/export/export.min.js"></script>
<link rel="stylesheet" href="https://www.amcharts.com/lib/3/plugins/export/export.css" type="text/css" media="all" />
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div ng-app="myApp" ng-controller="stretch" ng-init="quantity=2000;cost=2">
{{quantity}}
<p id="access">USA Value: {{ quantity * cost }}</p>
</div>
<div id="chartdiv"></div>
CSS
</style>
<script src="//code.angularjs.org/1.5.4/angular.min.js"></script>
<style>
#chartdiv {
width: 100%;
height: 500px;
}
JavaScript
angular.module('myApp', []);
angular
.module('myApp')
.controller('stretch',function($scope){
});
angular.element(document).ready(function () {
var scope = angular.element(document.getElementById('access')).scope();
console.log(scope);
var chart = AmCharts.makeChart("chartdiv", {
"theme": "light",
"type": "serial",
"startDuration": 2,
"dataProvider": [{
"country": "USA",
"visits": scope.quantity*scope.cost,
// I want to use {{ quantity * cost }} instead of 4000
"color": "#FF0F00"
}, {
"country": "China",
"visits": 1882,
"color": "#FF6600"
}, {
"country": "Japan",
"visits": 1809,
"color": "#FF9E01"
}, {
"country": "Germany",
"visits": 1322,
"color": "#FCD202"
}, {
"country": "UK",
"visits": 1122,
"color": "#F8FF01"
}, {
"country": "France",
"visits": 1114,
"color": "#B0DE09"
}, {
"country": "India",
"visits": 984,
"color": "#04D215"
}, {
"country": "Spain",
"visits": 711,
"color": "#0D8ECF"
}, {
"country": "Netherlands",
"visits": 665,
"color": "#0D52D1"
}, {
"country": "Russia",
"visits": 580,
"color": "#2A0CD0"
}, {
"country": "South Korea",
"visits": 443,
"color": "#8A0CCF"
}, {
"country": "Canada",
"visits": 441,
"color": "#CD0D74"
}, {
...