{"action":"closed","issue":{"url":"https://api.github.com/repos/nnnick/Chart.js/issues/256","labels_url":"https://api.github.com/repos/nnnick/Chart.js/issues/256/labels{/name}","comments_url":"https://api.github.com/repos/nnnick/Chart.js/issues/256/comments","events_url":"https://api.github.com/repos/nnnick/Chart.js/issues/256/events","html_url":"https://github.com/nnnick/Chart.js/issues/256","id":22412052,"number":256,"title":"Create Responsive Chart from Ajax","user":{"login":"mdmoura","id":372865,"avatar_url":"https://avatars.githubusercontent.com/u/372865?v=3","gravatar_id":"","url":"https://api.github.com/users/mdmoura","html_url":"https://github.com/mdmoura","followers_url":"https://api.github.com/users/mdmoura/followers","following_url":"https://api.github.com/users/mdmoura/following{/other_user}","gists_url":"https://api.github.com/users/mdmoura/gists{/gist_id}","starred_url":"https://api.github.com/users/mdmoura/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mdmoura/subscriptions","organizations_url":"https://api.github.com/users/mdmoura/orgs","repos_url":"https://api.github.com/users/mdmoura/repos","events_url":"https://api.github.com/users/mdmoura/events{/privacy}","received_events_url":"https://api.github.com/users/mdmoura/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":2,"created_at":"2013-11-10T17:19:03Z","updated_at":"2015-01-19T00:33:05Z","closed_at":"2015-01-19T00:33:05Z","body":"Hello,\r\n\r\nI need to get the data from an Ajax request and the chart to be responsive. \r\n\r\nIn my HTML code I added a canvas as follows:\r\n\r\n    <div>\r\n      <canvas id=\"userscreated\" class=\"plot\" data-url=\"/stats/userscreated\"></canvas>\r\n    </div>\r\n\r\nAnd in my javascript (JQuery) code I have:\r\n\r\n    var d ata2;\r\n\r\n    $.ajax({\r\n      url: $('#userscreated').data('url'),\r\n      async: true,\r\n      dataType: 'json',\r\n      type: \"get\",\r\n    }).done(function (data) {\r\n\r\n        data2 = data;\r\n\r\n        // Draw chart\r\n        var context = $('#userscreated').get(0).getContext(\"2d\");\r\n        var wrapper = $('#userscreated').parent();\r\n        var width = $('#userscreated').attr('width', $(wrapper).width());\r\n\r\n        new Chart(context).Line(\r\n        {\r\n          labels: data.Dates,\r\n          datasets: [\r\n            { fillColor: #404040, data: data.Users }\r\n          ]\r\n        },\r\n        { animation: false }\r\n      );\r\n\r\n    });\r\n\r\n    // Redraw the chart with the same data\r\n    $(window).resize(function () {\r\n \r\n      var context = $('#userscreated').get(0).getContext(\"2d\");\r\n      var wrapper = $('#userscreated').parent();\r\n      var width = $('#userscreated').attr('width', $(wrapper).width());\r\n\r\n      new Chart(context).Line(\r\n        {\r\n          labels: data2.Dates,\r\n          datasets: [\r\n            { fillColor: #404040, data: data2.Users }\r\n          ]\r\n        },\r\n        { animation: false }\r\n      );\r\n\r\n    });\r\n\r\n**PROBLEMS**\r\n\r\n1. The chart is not being resized on window resize.\r\n\r\n2. Is there better code to do this? I think I am repeating to much code.\r\n\r\n3. In Google the drawing is fast. In firefox sometimes it hangs for a while.\r\n   Is anything wrong with my code?\r\n\r\n4. Should the request be async or not?\r\n\r\nThank You,\r\nMiguel"}}