title: Drawing chart.js with external JSON
body: <p>I have this issue I can't seem to figuere out on my own. I am unable to draw a chart with chart.js with an external JSON file. When I console.log(data) the data it shows correctly, in an array, but nothing shows up on the canvas. I have managed to draw a chart with static JSON data using this code:</p>
  
  <pre><code>var myData2 = [
  
     {
   "name": "1. The Wolf of Wall Street",
      "gross": 116.901
     },
     {
      "name": "2. Frozen",
      "gross": 400.738
  },
  {
      "name": "3. RoboCop (1987)",
      "gross": 58.607
  },
  {
      "name": "4. Gravity",
      "gross": 274.092
  },
  {
      "name": "5. The Hobbit: The Desolation of Smaug",
      "gross": 258.366
  },
  {
      "name": "6. Thor: The Dark World",
      "gross": 206.362
  },
  {
      "name": "7. Captain America: The Winter Soldier",
      "gross": 259.766
  },
  {
      "name": "8. The Legend of Hercules",
      "gross": 18.848
  },
  {
      "name": "9. X-Men: Days of Future Past",
      "gross": 233.921
  },
  {
      "name": "10. 12 Years a Slave",
      "gross": 56.671
  }
       ]
    Array.prototype.mapProperty = function(property) {
        return this.map(function (obj) {
         return obj[property];
        });
  
       };
   console.log(myData);  
  
  
  // Example: myData.mapProperty('rank') to get an array of all ranks 
       lineChartData = {
          labels : myData.mapProperty('name'),
           datasets : [
             {
         label: "My First dataset",
         fillColor : "rgba(220,220,220,0.2)",
         strokeColor : "rgba(220,220,220,1)",
         pointColor : "rgba(220,220,220,1)",
         pointStrokeColor : "#fff",
         pointHighlightFill : "#fff",
         pointHighlightStroke : "rgba(220,220,220,1)",
         data : myData.mapProperty('downloads')
        }
             ]
        };
       lineChartData2 = {
          labels : myData2.mapProperty('name'),
           datasets : [
             {
         label: "My First dataset",
         fillColor : "rgba(220,220,220,0.2)",
         strokeColor : "rgba(220,220,220,1)",
         pointColor : "rgba(220,220,220,1)",
         pointStrokeColor : "#fff",
         pointHighlightFill : "#fff",
         pointHighlightStroke : "rgba(220,220,220,1)",
         data : myData2.mapProperty('gross')
        }
             ]
        };
  
  
  window.onload = function()
  {
   var ctx = document.getElementById("canvas").getContext("2d");
   window.myLine = new Chart(ctx).Line(lineChartData);
   var ctx2 = document.getElementById("canvas2").getContext("2d");
   window.myLine2 = new Chart(ctx2).Line(lineChartData2);
  }
  </code></pre>
  
  <p>However when I try and use the following code (with an external JSON) it doesn't doesn't draw a chart, but the console log shows that the array is exactly the same, without any other errors or issues.</p>
  
  <pre><code> &lt;script src="Chart.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="chartCanvas"&gt;
       &lt;canvas id="canvas"&gt;&lt;/canvas&gt;
       &lt;br&gt;
      &lt;/div&gt;
  
  
  &lt;script type="text/javascript"&gt;
      $.getJSON("js/dataverkeer.json",function(data){
        var myData = (data);
  
     Array.prototype.mapProperty = function(property) {
            return this.map(function (obj) {
             return obj[property];
            });
  
           };
  
            console.log(myData);
     // Example: myData.mapProperty('rank') to get an array of all ranks 
       lineChartData = {
          labels : myData.mapProperty('jaar'),
           datasets : [
             {
         label: "My First dataset",
         fillColor : "rgba(220,220,220,0.2)",
         strokeColor : "rgba(220,220,220,1)",
         pointColor : "rgba(220,220,220,1)",
         pointStrokeColor : "#fff",
         pointHighlightFill : "#fff",
         pointHighlightStroke : "rgba(220,220,220,1)",
         data : myData.mapProperty('verbruikInGB')
        }
             ]
        };
  
  
      window.onload = function()
      {
       var ctx = document.getElementById("canvas").getContext("2d");
       window.myLine = new Chart(ctx).Line(lineChartData);
      }  
  
  
  
  
    });
  &lt;/script&gt;
  </code></pre>
  
  <p>And the external JSON   </p>
  
  <pre><code>  [
        {
          "jaar": "1999",
          "verbruikInGB": 1074.44
        },
        {
          "jaar": "2000",
          "verbruikInGB": 1095.89
        },
        {
          "jaar": "2001",
          "verbruikInGB": 1117.88
        },
        {
          "jaar": "2002",
          "verbruikInGB": 1140.24
        },
        {
          "jaar": "2003",
          "verbruikInGB": 1163.02
        },
        {
          "jaar": "2004",
          "verbruikInGB": 1186.31
        },
        {
          "jaar": "2005",
          "verbruikInGB": 1210
        },
        {
          "jaar": "2006",
          "verbruikInGB": 1234
        },
        {
          "jaar": "2007",
          "verbruikInGB": 1259
        },
        {
          "jaar": "2008",
          "verbruikInGB": 1309.6
        },
        {
          "jaar": "2009",
          "verbruikInGB": 1387.5
        },
        {
          "jaar": "2010",
          "verbruikInGB": 1387.5
        },
        {
          "jaar": "2011",
          "verbruikInGB": 1415.24
        }
    ]
  </code></pre>
  
  <p>I really can't find the problem, hopefully someone here can see what my error is. Thank you in advance!</p>