Отобразить данные json в диаграммах слияния

Я хочу показать динамические данные в графиках слияния, которые поступают из API. Я использую графики слияния, чтобы показать значение в угловой диаграмме. Как назначить данные JSON для значения поля свойства диаграммы. Я дешифровал dataframe и получил значение «24» в журнале консоли. которые мне нужно показать в графической диаграмме графика слияния.Отобразить данные json в диаграммах слияния

выборочные данные

{"id":4753666,"timestamp":"2017-02-17","dataFrame":"TEVOOjbb==","fcnt":243,"port":2,"rssi":-113,"snr":-4.19,"sf_used":9,"decrypted":true}

код

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> 
     <script src="http://static.fusioncharts.com/code/latest/fusioncharts.js?cacheBust=8232"></script> 
     <script src="http://fusioncharts.github.io/angular-fusioncharts/demos/js/angular-fusioncharts.min.js"></script> 
     <script src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=8232"></script> 

     <script> 
      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" 
       }] 
      } 
     }; 
    </script> 
</head> 
<body ng-app="myApp"> 
    <div ng-controller="MyController"> 
     <fusioncharts id="chartContainer1" width="450" height="400" type="angulargauge" dataSource={{decodedFrame}}></fusioncharts> 
    </div> 
</body>

источник

2017-02-17 Swapna

Вы можете по ссылке для хранения JSON: link

И ссылки на программу: link

И вы можете следовать приведенному ниже коду, который выполняется успешно.

<html> 
     <head> 
      <title></title> 
      <meta charset="utf-8" /> 
      <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> 
      <script src="http://static.fusioncharts.com/code/latest/fusioncharts.js?cacheBust=8232"></script> 
      <script src="http://fusioncharts.github.io/angular-fusioncharts/demos/js/angular-fusioncharts.min.js"></script> 
      <script src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=8232"></script> 

      <script> 
       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);*/ 

           //Here you can plot you response json in fusioncharts 

           var myChart = new FusionCharts({ 
             type: 'angulargauge', 
             renderAt: 'chart-container', 

             dataFormat: 'json', 
             dataSource: { 
               "chart": { 
                "caption": "Customer Satisfaction Score", 
                "subcaption": "Last week", 
                "lowerLimit": "0", 
                "upperLimit": "100", 
                "lowerLimitDisplay": "Bad", 
                "upperLimitDisplay": "Good", 
                "showValue": "1", 
                "valueBelowPivot": "1", 
                "theme": "fint" 
               }, 
               "colorRange": { 
                "color": [{ 
                 "minValue": "0", 
                 "maxValue": "50", 
                 "code": "#e44a00" 
                }, { 
                 "minValue": "50", 
                 "maxValue": "75", 
                 "code": "#f8bd19" 
                }, { 
                 "minValue": "75", 
                 "maxValue": "100", 
                 "code": "#6baa01" 
                }] 
               }, 
               "dials": { 
                "dial": [{ 
                 "value": "67" 
                }] 
               } 
              } 
             }); 

            // Render the chart. 
            myChart.render(); 
          //}); 
          }); 

         //  var myData = { 
         //  "chart": { 
         //   "caption": "Bin 1", 
         //   "lowerLimit": "0", 
         //   "upperLimit": "14", 
         //   "showValue": "1", 
         //   "valueBelowPivot": "1", 
         //   "theme": "fint" 
         //  }, 
        //  chart: { 
        //   caption: "Harry's SuperMart", 
        //   subCaption: "Top 5 stores in last month by revenue", 
        //  }, 
        //  data:[{ 
        //   label: "Bakersfield Central", 
        //   value: "880000" 
        //  }, 
        //  { 
        //   label: "Garden Groove harbour", 
        //   value: "730000" 
        //  }, 
        //  { 
        //   label: "Los Angeles Topanga", 
        //   value: "590000" 
        //  }, 
        //  { 
        //   label: "Compton-Rancho Dom", 
        //   value: "520000" 
        //  }, 
        //  { 
        //   label: "Daly City Serramonte", 
        //   value: "330000" 
        //  }] 
        // } 
         //  "colorRange": { 
         //   "color": [{ 
         //    "minValue": "0", 
         //    "maxValue": "5", 
         //    "code": "#e44a00" 
         //   }, { 
         //    "minValue": "5", 
         //    "maxValue": "10", 
         //    "code": "#f8bd19" 
         //   }, { 
         //    "minValue": "10", 
         //    "maxValue": "14", 
         //    "code": "#6baa01" 
         //   }] 
         //  }, 
         //  "dials": { 
         //   "dial": [{ 
         //    "value": "34" 
         //   }] 
         //  } 
         // }; 
      </script> 
     </head> 
     <body ng-app="myApp"> 
      <div ng-controller="MyController"> 
       <div id="chart-container">FusionCharts will load here...</div> 
       <!-- <fusioncharts id="chartContainer1" width="450" height="400" type="angulargauge" dataSource="myData"></fusioncharts> --> 
      </div> 
     </body> 
     </html>

источник

2017-02-17 10:43:10

Мне нужны динамические данные, а не статические данные, которые были исправлены. – Swapna

если вы дадите мне свой образец ответа, то я дам вам подсказку, как сделать для динамического рендеринга. –

Отобразить данные json в диаграммах слияния

ответ

Смежные вопросы