title: Display json data in fusion charts
body: <p>I want to show dynamic data in fusion charts which is coming from API. I'm using fusion charts to show value in angular chart. How to assign JSON data to value field of chart property. i have decoded the dataframe and getting the value like "24" in the console log . which i need to show in fusion chart angular chart. </p>
  
  <p><em>sample data</em></p>
  
  <pre><code>    {"id":4753666,"timestamp":"2017-02-17","dataFrame":"TEVOOjbb==","fcnt":243,"port":2,"rssi":-113,"snr":-4.19,"sf_used":9,"decrypted":true}
  </code></pre>
  
  <p>code</p>
  
  <p></p>
  
  <pre><code>        &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"&gt;&lt;/script&gt;
          &lt;script src="http://static.fusioncharts.com/code/latest/fusioncharts.js?cacheBust=8232"&gt;&lt;/script&gt;
          &lt;script src="http://fusioncharts.github.io/angular-fusioncharts/demos/js/angular-fusioncharts.min.js"&gt;&lt;/script&gt;
          &lt;script src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=8232"&gt;&lt;/script&gt;
  
          &lt;script&gt;
              var app = angular.module('myApp', ["ng-fusioncharts"])
              app.controller('MyController', function ($scope, $http) {
                  $http.get('https://example.com', {
                      headers: { 'Authorization': 'Basic passwordbase64==' }
                  })
                  .then(function (response) {
                       $scope.names = response.data;
                 $scope.decodedFrame = atob($scope.names.dataFrame);
                 $scope.decodedFrameNew = $scope.decodedFrame.substring(4);
                 $scope.distanceinFeet = $scope.decodedFrameNew * 11.5*2;
                 $scope.Value = $scope.distanceinFeet / 148;
                 $scope.ValueinCm = $scope.Value.toFixed(2);
                 console.log($scope.ValueinCm )
                  });
          });
  
               var myData = {
              "chart": {
                  "caption": "Bin 1",
                  "lowerLimit": "0",
                  "upperLimit": "14",
                  "showValue": "1",
                  "valueBelowPivot": "1",
                  "theme": "fint"
              },
              "colorRange": {
                  "color": [{
                      "minValue": "0",
                      "maxValue": "5",
                      "code": "#e44a00"
                  }, {
                      "minValue": "5",
                      "maxValue": "10",
                      "code": "#f8bd19"
                  }, {
                      "minValue": "10",
                      "maxValue": "14",
                      "code": "#6baa01"
                  }]
              },
              "dials": {
                  "dial": [{
                      "value": "34"
                  }]
              }
          };
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body ng-app="myApp"&gt;
      &lt;div ng-controller="MyController"&gt;
          &lt;fusioncharts id="chartContainer1" width="450" height="400" type="angulargauge" dataSource={{decodedFrame}}&gt;&lt;/fusioncharts&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>