[Chartjs]-Chart.js wont display normal chart

by

0👍

✅

For anyone who has the same problem, I found the Solution. Obviously it was right in front of my eyes.

I ve changed the 

var myData = (data);

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

with a bit different code -> 

var chartjsData = [];
for (var i = 0; i < data.length; i++) {
    chartjsData.push(data[i].data); 
};

But the main reason why the data was printed incorrect, it was because of the way I set the datasets inside lineChartData. I only used ONE datasets. Which this equals of course into 1 data. so I just added all 3 json.data inside datasets (data). Each datasets (data) is 1 line. so I got 3 response in one line. So the obvious thing to do is

Create more datasets (data). Here is my solution:

datasets: [
    {        
        label: "Test",
        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 : chartjsData[0]
    },{
        label: "Test2",
        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 : chartjsData[1]
    },{
        label: "Test3",
        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 : chartjsData[2]
    }
]

I hope this will help some people that just starting with Chartjs. Its a great library.

Leave a comment