arraysjsonjscharts

Why is my jschart with json not working?


I've followed a tutorial of this website:
http://kushagragour.in/blog/2013/06/getting-started-with-chartjs/

and this is my jsfiddle at the 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);

the json is in the jsfiddle..

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


Solution

  • Some quick changes to your 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 = [] did not have a statement delimiter - ;

    Also, move the mapProperty declaration above its invocation. In the fiddle it is at the end of the file. The line data : myData.mapProperty('rank') is trying to call a function it has no knowledge of.