title: Draw a Chart.js with ajax data and responsive. A few problems and questions
body: <p>I am using Chart.js (<a href="http://www.chartjs.org/docs/" rel="noreferrer">http://www.chartjs.org/docs/</a>) for charting.</p>
  
  <p>I need to get the data from an Ajax request and the chart to be responsive. </p>
  
  <p>In my HTML code I added a canvas as follows:</p>
  
  <pre><code>&lt;div&gt;
    &lt;canvas id="userscreated" class="plot" data-url="/stats/userscreated"&gt;&lt;/canvas&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And in my javascript (JQuery) code I have:</p>
  
  <pre><code>var data2;
  
  $.ajax({
    url: $('#userscreated').data('url'),
    async: true,
    dataType: 'json',
    type: "get",
  }).done(function (data) {
  
      data2 = data;
  
      // Draw chart
      var context = $('#userscreated').get(0).getContext("2d");
      var wrapper = $('#userscreated').parent();
      var width = $('#userscreated').attr('width', $(wrapper).width());
  
      new Chart(context).Line(
      {
        labels: data.Dates,
        datasets: [
          { fillColor: #404040, data: data.Users }
        ]
      },
      { animation: false }
    );
  
  });
  
  // Redraw the chart with the same data
  $(window).resize(function () {
  
    var context = $('#userscreated').get(0).getContext("2d");
    var wrapper = $('#userscreated').parent();
    var width = $('#userscreated').attr('width', $(wrapper).width());
  
    new Chart(context).Line(
      {
        labels: data2.Dates,
        datasets: [
          { fillColor: #404040, data: data2.Users }
        ]
      },
      { animation: false }
    );
  
  });
  </code></pre>
  
  <p><strong>PROBLEMS</strong></p>
  
  <ol>
  <li>The chart is not being resized on window resize.</li>
  <li>Is there better code to do this? I think I am repeating to much code.</li>
  <li>In Google the drawing is fast. In firefox sometimes it hangs for a while.
  Is anything wrong with my code?</li>
  <li>Should the request be async or not?</li>
  </ol>