title: Charts do not render unless I reroute to another page and go back to my charts route
body: <p>I am working on dashboard chart. I am using chartjs for my charts and angularjs http.get method to get data from the server to my charts. I checked the console and the data is loaded and working properly, but the charts won't render unless I reroute to another page and then go back to my charts route page.</p>
  
  <p>This is the code:</p>
  
  <pre><code>$scope.tripTotalts = "";
  $scope.tripdstatus = "";
  $scope.tripddstatus = "";
  $scope.tripcstatus = "";
  $scope.totalshow = "";
  
  $scope.tripStatus = function() {
  
      $http.get("/api/statusDispatched").success(function(response) {
          dispatched = response;
           $scope.tripdstatus = response[0];
      });
  
      $http.get("/api/statusDelivered").success(function(response) {
          delivered = response;
          $scope.tripddstatus = response[0];
      });
  
      $http.get("/api/totalTripsintheSystem").success(function(response) {
          $scope.tripTotalts = response[0];
          totalFleetTrips = response[0];
      });
  
      $http.get("/api/statusCompleted").success(function(response) {
          completed = response;
          $scope.tripcstatus = response[0];
      });
  
      $scope.totalshow = Math.round(((dispatched+delivered+completed) / totalFleetTrips) * 100)
  
      console.log("CHECKOUT HERE");
      console.log(dispatched);
      console.log(delivered);
      console.log(completed);
  
      var tstatid = $("#tstatusChart");
      tstatid.attr('height', 100);
      var tripsatusChartInitiate = new Chart(tstatid, {
          type: 'pie',
          data: {
              datasets: [{
                  data: [dispatched, delivered, completed],
                  backgroundColor: [
                      "rgba(" + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + ", 1)",
                      "rgba(" + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + ", 1)",
                      "rgba(" + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + ", 1)"
                  ],
                  borderColor: [
                      "rgba(" + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + ", 1)",
                      "rgba(" + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + ", 1)",
                      "rgba(" + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + ", 1)"
                  ], borderWidth: 1
              }],
              labels: ["Dispatched", "Delivered", "Completed"]
          },
          options: {
              tooltips: {
                      callbacks: {
                          label: function(tooltipItem, data) {
                              var allData = data.datasets[tooltipItem.datasetIndex].data;
                              var tooltipLabel = data.labels[tooltipItem.index];
                              var tooltipData = allData[tooltipItem.index];
                              var total = 0;
                              for (var i in allData) {
                                  total += allData[i];
                              }
                              var tooltipPercentage = Math.round((tooltipData / total) * 100);
                              return '[Day: ' +tooltipLabel + '] Data: ' + tooltipData + ' [Percentage: ' + tooltipPercentage + '%]';
                          }
                      }
                  },
                  animation: {
                      duration: 0
                  }
          }
          });
  
  }
  </code></pre>