title: Handling two ajax calls on single page to pull data into Highcharts on another page
body: <p>I'm trying to get two highcharts to load with different data. One handles one set of data from one URL and other handles another. So far, I've only had one of the charts load and its been quite a problem. I'm not sure if I'm even doing this correctly because I read that having 2 ajax calls on a single page isn't wise, but I'm not sure. My code for the data model is as follows: </p>
  
  <pre><code>    public data: KnockoutObservableArray&lt;any&gt; = ko.observableArray();
      public incidentData: KnockoutObservableArray&lt;any&gt; = ko.observableArray();
      public plotDataLabels: KnockoutObservableArray&lt;any&gt; = ko.observableArray();
      public plotData: KnockoutObservableArray&lt;any&gt; = ko.observableArray();
      public isLoading: KnockoutObservable&lt;boolean&gt; = ko.observable(false);
      public isLoaded: KnockoutObservable&lt;boolean&gt; = ko.observable(false);
      public loadingError: KnockoutObservable&lt;boolean&gt; = ko.observable(false);
      public load: (month: number, year: number) =&gt; void;
      public setPlotData: (data: any) =&gt; void;
      public init(myself: MainDashboard) { };
      public incidentPlotData: KnockoutObservableArray&lt;any&gt; = ko.observableArray();
      public incidentSetPlotData: (incidentData: any) =&gt; void;
      public incidentIsLoading: KnockoutObservable&lt;boolean&gt; = ko.observable(false);
      public incidentIsLoaded: KnockoutObservable&lt;boolean&gt; = ko.observable(false);
  
  
      constructor() {
          var self = this;
  
          // Call an init function that allows for proper inheritance.
          if ($.isFunction(self.init)) {
              self.init(self);
          }
  
          self.load = (month: number, year: number) =&gt; {
              self.isLoading(true);
              self.isLoaded(false);
              self.incidentIsLoading(true);
              self.incidentIsLoaded(false);
  
              $.ajax({
                  xhrFields: { withCredentials: true },
                  url: areaUrl + "api/Change/SixMonthChangeCount",
                  success: data =&gt; {
                      self.isLoading(false);
                      self.data(data);
                      self.setPlotData(data);
                      self.isLoaded(true);
                  },
                  error: data =&gt; {
                      self.loadingError(true);
                  }
              });
  
              $.ajax({
                  xhrFields: { withCredentials: true },
                  url: areaUrl + "api/Incident/IncidentCount",
                  success: incidentData =&gt; {
                      self.incidentIsLoading(false);
                      self.data(incidentData);
                      self.setPlotData(incidentData);
                      self.incidentIsLoaded(true);
                  },
                  error: incidentData =&gt; {
                      self.loadingError(true);
                  }
              });
          }
  
          self.setPlotData = (data: any) =&gt; {
              self.plotData.push(
                  {
                      name: 'Significant',
                      data: [data.List[5].Significant, data.List[4].Significant, data.List[3].Significant, data.List[2].Significant, data.List[1].Significant, data.List[0].Significant],
                      color: '#fea156'
                  },
                  {
                      name: 'Normal',
                      data: [data.List[5].Normal, data.List[4].Normal, data.List[3].Normal, data.List[2].Normal, data.List[1].Normal, data.List[0].Normal],
                      color: '#b191c3'
                  },
                  {
                      name: 'Minor',
                      data: [data.List[5].Minor, data.List[4].Minor, data.List[3].Minor, data.List[2].Minor, data.List[1].Minor, data.List[0].Minor],
                      color: '#83bfd1'
                  },
                  {
                      name: 'Standard',
                      data: [data.List[5].Standard, data.List[4].Standard, data.List[3].Standard, data.List[2].Standard, data.List[1].Standard, data.List[0].Standard],
                      color: '#72e76d'
                  },
                  {
                      name: 'Urgent',
                      data: [data.List[5].Urgent, data.List[4].Urgent, data.List[3].Urgent, data.List[2].Urgent, data.List[1].Urgent, data.List[0].Urgent],
                      color: '#fa5a5a'
                  }
              );
          }
  
          self.incidentSetPlotData = (incidentData: any) =&gt; {
              self.incidentPlotData.push(
                  {
                      name: 'High',
                      data: [incidentData.List[0].High, incidentData.List[1].High, incidentData.List[2].High],
                      color: '#fea156'
                  },
                  {
                      name: 'Critical',
                      data: [incidentData.List[0].Critical, incidentData.List[1].Critical, incidentData.List[2].High],
                      color: '#fa5a5a'
                  }
              );
          }
      }
  </code></pre>
  
  <p>On top of this, there appears to be an error with the 'data' variable because the browser notes that the Significant is 'undefined'. Any help would be appreciated. Thanks!</p>