title: amCharts not displaying when the page loads in AngularJs
body: <p>I am using amCharts to display some data and calling this in my init function. The following is my code:</p>
  
  <pre><code>export default class ACtrl {
      constructor($scope, $http, $state) {
  
  
  
          var sampleCharts = function () {
              let sampleChart;
              let sampleBarGraph;
              let sampleLine;
  
              const writeAlarmsample = data =&gt; {
                  const {
                      total,
                      users
                  } = data;
  
                  // Set cumulative percentage
                  let runningTotal = 0;
  
                  users.forEach(user =&gt; {
                      runningTotal += user.assetAvailability;
                      user.cumulativePercentage = runningTotal / total * 100;
                  });
  
                  sampleChart.dataProvider = users;
                  sampleChart.write('userAvailability');
                  sampleChart.validateData();
              };
  
              function handleClick(event){
                  $state.go("app.userdetails", { userID: event.item.category });
  
              }
  
              // Alarm sample
              AmCharts.ready(() =&gt; {
                  sampleChart = new AmCharts.AmSerialChart();
                  sampleChart.categoryField = "assetId";
  
                  //add click listener
                  sampleChart.addListener("clickGraphItem", handleClick);
  
                  var yAxis = new AmCharts.ValueAxis();
                  yAxis.position = "left";
                  sampleChart.addValueAxis(yAxis);
  
                  var yAxis2 = new AmCharts.ValueAxis();
                  yAxis2.position = "right";
                  sampleChart.addValueAxis(yAxis2);
  
                  sampleBarGraph = new AmCharts.AmGraph();
                  sampleBarGraph.valueField = "userAvailability";
                  sampleBarGraph.type = "column";
                  sampleBarGraph.fillAlphas = 1;
                  sampleBarGraph.lineColor = "#f0ab00";
                  sampleBarGraph.valueAxis = yAxis;
                  sampleChart.addGraph(sampleBarGraph);
  
                  sampleLine = new AmCharts.AmGraph();
                  sampleLine.valueField = "cumulativePercentage";
                  sampleLine.type = "line";
                  sampleLine.lineColor = "#cb0044";
                  sampleLine.valueAxis = yAxis2;
                  sampleChart.addGraph(sampleLine);
  
                  sampleChart.write('userAvailability');
  
                  $http.get(constants.LOCAL_HOST+"/dashboard/users")
                      .then(response =&gt; writeAlarmsample(response.data));
              });
          };
  
          $scope.init = function() {
              availabilityCharts();
          };
  
  
  
          })
      }
  </code></pre>
  
  <p>The charts load fine when I hit the refresh button, but they are not loaded when the page gets loaded for the first time. I also have a refresh button which calls the function to load the charts even that does not load the charts. If I click on one of the chart items it takes me to details page and when I come back to this page the charts do not load. I have to click on refresh again to load the charts. Can anyone let me know what is the reason for this issue and how I can fix it.</p>