Metalbreath Metalbreath - 6 months ago 13
jQuery Question

Chart.js wont display normal chart

I have an issue with Chart.js. when I had my data inside Javascript, it showed the graph just fine. Now I would like to make it ready from JSON. but for some reason its reading wrong.
I followed the example from their website and it suppose to show me this
enter image description here
but instead I get to see this
enter image description here
Notice the 3 first weeks have data on them. when I hover over them it shows me the data. here is the JSON

[{
"label": "Net Comp",
"color": "#F02626",
"data": [520, 600, 850, 900, 300]
},
{
"label": "AnalyzerHR",
"color": "#26F041",
"data": [ [6, 300], [7, 400], [8, 550], [9, 750], [10, 200] ]
},
{
"label": "Question Right",
"color": "#20AEFA",
"data": [ [6, 200], [7, 150], [8, 380], [9, 400], [10, 100] ]


}]
so the 3 data are packed as array and they are display on the 3 first labels.
So when I hover it shows to me
520, 600, 850, 900, 300
.
And this is wrong because each value in data should be over 1 of the weeks. not the 1 data in the 1st week only.
here is my Javascript

$(document).ready(function() {

$.getJSON('data.json', function(data){
console.log(data);

var myData = (data);

Array.prototype.mapProperty = function(property) {
return this.map(function (obj) {
return obj[property];
});
};
lineChartData = {
labels : [["Week 47"],[7,"week 48"], [8,"Week 49"], [9,"Week 50"], [10,"Week 51"], [11,"Week 52"]],
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 : myData.mapProperty("data"),

}]};
var ctx = document.getElementById("myLineChart").getContext("2d");
var myLineChart = new Chart(ctx).Line(lineChartData);

});


});

How can I set each data value to a different week?
I cant see any mistake in my code (I know there is somewhere). Chartjs is able to read JSON and display it, but in the wrong place

Thank you in advance

Edited
I found where the problem is but I can't find the way to fix it. I made some testings and it seems that while in Javascript Chartjs is reading the data as
[1,2,3,4,5,6,7]
. But when I call it, it gets all 3 objects. and it wont accept when I write something like
data : chartjsData.data
inside the datasets

Answer

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.