Warum funktioniert mein jschart mit json nicht?

Question

Ich habe ein Tutorial dieser Website folgt:
http://kushagragour.in/blog/2013/06/getting-started-with-chartjs/

und das ist mein jsfiddle im Moment:

<div style="width: 500px; height: 500px;"> 
    <canvas id="canvas"></canvas> 
</div> 
var lineChartData = { 
    labels : ["January","February","March","April","May","June","July"], 
    datasets : [ 
     { 
      fillColor : "rgba(220,220,220,0.5)", 
      strokeColor : "rgba(220,220,220,1)", 
      pointColor : "rgba(220,220,220,1)", 
      pointStrokeColor : "#fff", 
      data : myData.mapProperty('rank') 
     }, 
     { 
      fillColor : "rgba(151,187,205,0.5)", 
      strokeColor : "rgba(151,187,205,1)", 
      pointColor : "rgba(151,187,205,1)", 
      pointStrokeColor : "#fff", 
      data : [28,48,40,19,96,27,100] 
     } 
    ] 

}; 

var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Line(lineChartData); 

die json im jsfiddle ist ..

http://jsfiddle.net/vrwjfg9z/2575/

Answer 1

Einige schnelle Änderungen an Ihrem js:

Array.prototype.mapProperty = function(property) { 
    return this.map(function (obj) { 
     return obj[property]; 
    }); 
}; 

var myData = [{ 
    "date": "02-03-2013", 
    "rank": 213869, 
    "sites-linking": 100 
}]; 

var lineChartData = { 
    labels : ["January","February","March","April","May","June","July"], 
    datasets : [{ 
      fillColor : "rgba(220,220,220,0.5)", 
      strokeColor : "rgba(220,220,220,1)", 
      pointColor : "rgba(220,220,220,1)", 
      pointStrokeColor : "#fff", 
      data : myData.mapProperty('rank') 
     }, { 
      fillColor : "rgba(151,187,205,0.5)", 
      strokeColor : "rgba(151,187,205,1)", 
      pointColor : "rgba(151,187,205,1)", 
      pointStrokeColor : "#fff", 
      data : [28,48,40,19,96,27,100] 
    }] 
}; 

var myLine = new Chart(document.getElementById("canvas").getContext("2d")).Line(lineChartData); 

var myData = [] hat keine Aussage Begrenzer haben - ;

Auch die mapProperty Erklärung über seinen Aufruf bewegen. In der Geige ist es am Ende der Datei. Die Zeile data : myData.mapProperty('rank') versucht eine Funktion aufzurufen, von der sie keine Kenntnis hat.