Chartjs-Angular Chart data-pushing from another javascript

0👍

If you want to reuse that method for retrieving data, it would be best to decouple it into a service. Then, you can use it all of your controllers.

Please note that code below is just to showcase the implementation, it might not work straight away if you just copy-paste it.

//statisticsSvc.js
angular.module('statisticsApp').service('statisticsService',['$http' function($http){
   var data = [];
   return {
     getStatistics: function(){
       return $http({
                method : "POST",
                url : "GatewayAPI.php",
              })
              .then(function(response){
                var mydata,myJSON,myresult,myjava, myobj;
                var i;
                var Result; 
                var chartResultTemp = [];
                var chartResultph = [];
                var chartResultHum = [];
                var resultType = [];


                for(i=0; i<72;i++)
                {
                  //storing data
                  mydata = response.data.data[i];

                  //retrieving data

                  myobj = mydata.data.substring(3,4);
                  resultType = mydata.data.substring(3, 4);

                  if(resultType === "A") {
                    chartResultTemp.push([mydata.data.substring(6,9)]);
                  } else if (resultType ==="B") {
                    chartResultph.push([mydata.data.substring(6, 9)]);   
                  } else {
                    chartResultHum.push([mydata.data.substring(6, 9)]);   
                  };

                  return {
                    records: response.data.data,
                    Result: Result,
                    chartResultTemp: chartResultTemp,
                    resultType: resultType,
                    chartResultph: chartResultph,
                    chartResultHum: chartResultHum
                  };
                }
              })
              .catch(function(error){
                console.log(error);
                return error;
              })
     },
              setData: function(a){ data = a;},
              getData: function(){ return data;} 
   };
}]);

Then, you can use this service in your controllers:

    //myCtrl
    var app = angular.module('statisticsApp', [chart.js]).controller('myCtrl',
    function ($scope, $http,statisticsService) {

    //your call to service
    statisticsService.getStatistics().then(function(response){
      $scope.records = response.records;
      $scope.test = response.Result;
      $scope.test2 = response.chartResultTemp;
      $scope.test3 = response. resultType;
    }).error(function(error){
      console.log(error);
    });


    //get data
    $scope.data = statisticsService.getData();

});

//LineCtrl
var app = angular.module("statisticsApp", ["chart.js"]);
app.controller("LineCtrl", function ($scope, statisticsService) {
"use strict";
$scope.labels = ["0200", "0400", "0600", "0800", "1000", "1200", "1400", 
"1600", "1800", "2000", "2200", "0000"];
$scope.series = ['Temperature (°C)'];
$scope.data = [
[26.5, 26.8, 26.3, 25.8, 29.4, 30.2, 31.5, 31.0, 28.4, 27.6, 26.3, 25.7]
];

//set data
statisticsService.setData($scope.data);

$scope.onClick = function (points, evt) {
console.log(points, evt);
 };
});

Leave a comment