angularjs - Pass Angular Expression into Javascript -


below have angular expression {{usa_visits.maximum.value |number:0 }} use within javascript in order generate chart. current code:

<!-- angular expression -->  {{usa_visits.maximum.value |number:0 }}   <!-- chart code --> <script> var chart = amcharts.makechart("chartdiv", {     "theme": "light",     "type": "serial",     "startduration": 2,     "dataprovider": [{         "country": "usa",         "visits": {{usa_visits.maximum.value |number:0 }},         "color": "#ff0f00"     }, {         "country": "taiwan",         "visits": 500,         "color": "#333333"     }],     "valueaxes": [{         "position": "left",         "axisalpha":0,         "gridalpha":0     }],     "graphs": [{         "balloontext": "[[category]]: <b>[[value]]</b>",         "colorfield": "color",         "fillalphas": 0.85,         "linealpha": 0.1,         "type": "column",         "topradius":1,         "valuefield": "visits"     }],     "depth3d": 40,     "angle": 30,     "chartcursor": {         "categoryballoonenabled": false,         "cursoralpha": 0,         "zoomable": false     },     "categoryfield": "country",     "categoryaxis": {         "gridposition": "start",         "axisalpha":0,         "gridalpha":0      },     "export": {         "enabled": true      }  }, 0); </script>  <!-- html --> <div id="chartdiv"></div> 

clearly assigning "visits": {{usa_visits.maximum.value |number:0 }} within js code isn't working. how can this?

thank

edit2

refer latest fiddle

please run below code well

angular.module('myapp', []);    angular    .module('myapp')    .controller('stretch',function($scope){    	     });      /**below code out of angular context**/    angular.element(document).ready(function () {        var scope = angular.element(document.getelementbyid('access')).scope();  		         var chart = amcharts.makechart("chartdiv", {              "theme": "light",              "type": "serial",              "startduration": 2,              "dataprovider": [{                  "country": "usa",                  "visits": scope.quantity*scope.cost,               // want 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"              }, {                  "country": "brazil",                  "visits": 395,                  "color": "#754deb"              }, {                  "country": "italy",                  "visits": 386,                  "color": "#dddddd"              }, {                  "country": "taiwan",                  "visits": 338,                  "color": "#333333"              }],              "valueaxes": [{                  "position": "left",                  "axisalpha":0,                  "gridalpha":0              }],              "graphs": [{                  "balloontext": "[[category]]: <b>[[value]]</b>",                  "colorfield": "color",                  "fillalphas": 0.85,                  "linealpha": 0.1,                  "type": "column",                  "topradius":1,                  "valuefield": "visits"              }],              "depth3d": 40,            "angle": 30,              "chartcursor": {                  "categoryballoonenabled": false,                  "cursoralpha": 0,                  "zoomable": false              },              "categoryfield": "country",              "categoryaxis": {                  "gridposition": "start",                  "axisalpha":0,                  "gridalpha":0                },              "export": {                "enabled": true               }            }, 0);      });               
#chartdiv {    width: 100%;    height: 500px;  }		
<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>  <script src="//code.angularjs.org/1.5.4/angular.min.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>


Comments

Popular posts from this blog

ZeroMQ on Windows, with Qt Creator -

unity3d - Unity SceneManager.LoadScene quits application -

python - Error while using APScheduler: 'NoneType' object has no attribute 'now' -