title: Why does using setTimeout work to show chart
body: <p>I have a Single Page App.</p>
  
  <p>In code, I fetch data, and then display it in a chart.</p>
  
  <p>However, there is a timing issue: The data is fetched before the chart has instantiated itself. So the chart ends up showing nothing.</p>
  
  <p>The workaround I found has been to use setTimeout().  But the odd thing is, I set the interval for only 1 milliseconds and chart then displays correctly.</p>
  
  <p>I am guessing that what is really happening is that by using setTimeout(), the current thread is completing the current tasks, and then coming back to the refresh function and then executing. Is that correct?  </p>
  
  <p>Is there some other way I should be doing this, as setTimeout() seems to be hackish, and of course, we don't want that.</p>
  
  <p>This is the code that gets the data.</p>
  
  <pre><code>async getItemStatusSummary(parentId:number) {
      this.logger.info("getItemStatusSummary()");
      this.itemStatusInfos = await this.statInfoService.getItemStatusInfoByFolderId(parentId, 'ALL');
      this.refreshItemStatusSummaryChart();
  }
  </code></pre>
  
  <p>This is the refresh:</p>
  
  <pre><code>refreshItemStatusSummaryChart() {
  
      this.logger.info('RefreshingItemStatusSummaryChart()');
      const chart = $("#itemStatusSummaryChart").data("ejChart");
      if (chart) {
          chart.model.series[0].dataSource = this.itemStatusInfos;
          chart.animate(null);
      }
      else {
          this.logger.info('Chart is null');
          window.setTimeout(() =&gt; {
              this.refreshItemStatusSummaryChart();
          }, 1);
      }
  }
  </code></pre>