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
Post a Comment