Pass Angular Expression into Javascript

Question

Below I have an Angular expression {{USA_Visits.maximum.value |number:0 }} which I would like to use within JavaScript in order to generate a chart. This is my 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 the JS code isn't working. How can I do this?

Thank you

Could you post the error you're getting? That would help in determining why that property is not getting the value you want. — syciphj, Sep 14 '17 at 02:46
Possible duplicate of [How to use a filter in a controller?](https://stackoverflow.com/questions/14302267/how-to-use-a-filter-in-a-controller) — Icycool, Sep 14 '17 at 03:23
I don't think it is a duplicate @Icycool ... Here is a JSfiddle of what I am trying to do. In this instance I would like to pass {{ quantity * cost }} into the Javascript. https://jsfiddle.net/7hj7huj3/ — Henry Blue, Sep 14 '17 at 04:03
Ah..ok, I see what you are trying to do there. You'll need to move your chart script to be called inside your controller or wrap as a directive, because when js on script tag runs angular hasn't fully setup yet. — Icycool, Sep 14 '17 at 05:04

user1608841 · Answer 1 · 2017-09-15T03:53:22.573

EDIT2

Refer this latest Fiddle

please run below code as well

angular.module('myApp', []);

angular
  .module('myApp')
  .controller('stretch',function($scope){
    
  });

  /**Below code will be 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,
             // 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"
            }, {
                "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>

I have copied your fiddle into a separate fiddle and it doesn't work? When I run it there is no graph? see here: https://jsfiddle.net/daavzz8b/ — Henry Blue, Sep 14 '17 at 07:37
thanks for your response but I do not want to hard code the values in the javascript. I want to be able to an AngularJS expression and pass it into the javascript, not the other way around. Do you have any solutions for that? — Henry Blue, Sep 15 '17 at 01:03
@HenryBlue this is not hardcoding..... i have assigned values in controller so that u can use angular expression like u mention in question. and what I did is same as `ng-init` what you have used in your question. See updated answer — user1608841, Sep 15 '17 at 03:50

Canet Robern · Answer 2 · 2017-09-14T08:44:26.347

1

how about this.

<div id="chartdiv"></div>
<div ng-app="" ng-init="quantity=2000;cost=2">  
    <p id="usaVal">USA Value: {{ quantity * cost }}</p>   // give id as 'usaVal'
</div>

and add to js part

var usaVal = document.getElementById('usaVal');

.

UPDATE

using console.log(usaVal.innerHTML);, it will print like 'USA Value: 4000'.

So you slice usaVal like this.

var usaVal = document.getElementById('usaVal');
var val = usaVal.innerHTML;
val = parseInt(val.slice(val.indexOf(':')+2, val.length));
var chart = AmCharts.makeChart("chartdiv", {
    "theme": "light",
    "type": "serial",
    "startDuration": 2,
    "dataProvider": [{
        "country": "USA",
        "visits": val,
     // I want to use {{ quantity * cost }} instead of 4000
        "color": "#FF0F00"
    },
    ....
});

edited Sep 14 '17 at 08:44

answered Sep 14 '17 at 05:03

Canet Robern

1,049
2
11
28

I've run your solution on a fiddle here: https://jsfiddle.net/mr9dc0qo/2/ as you can see there is no column for USA, so I believe it isn't working. Have I implemented it correctly? – Henry Blue Sep 14 '17 at 07:41
@HenryBlue It's because of usaVal returns entire text of that HTML element. you can check what value printed by using console.log. Maybe usaVal returns including 'USA Value: '. So you have to slice that string – Canet Robern Sep 14 '17 at 08:12
I have updated the fiddle here: https://jsfiddle.net/mr9dc0qo/3/ and it works. My only issue is when I paste the HTML, JS and CSS into an HTML document, the USA column doesn't show again? – Henry Blue Sep 15 '17 at 01:00
Sorry I am quite new to HTML, how can I check this? – Henry Blue Sep 15 '17 at 01:06
@HenryBlue press F12 in chrome, you can see more info of your pages. It called 'devTool'. And you also modifying your codes in `Elements` tab. If you edit in there, effects are shown immediately, but this is not effects on your local code. – Canet Robern Sep 15 '17 at 01:10
@HenryBlue why are you using `W3Schools`'s trial? I tested in WebStorm, It works well. – Canet Robern Sep 15 '17 at 01:43

Pass Angular Expression into Javascript

2 Answers2