Hi. Help me. I cant understand what's going on. When i see tooltip month's label is undefined.
Image:
Code here:
var today = new Date(),
year = today.getFullYear(),
categoryObjectsTempelate = [
{label:'1-комнатная',color:'rgba(255, 0, 0,1)',highlightColor:'rgba(255, 0, 0,0.7)',fillColor:'rgba(255, 0, 0,0.2)'},
{label:'1,5-комнатная',color:'rgba(255, 127, 0,1)',highlightColor:'rgba(255, 127, 0,0.7)',fillColor:'rgba(255, 127, 0,0.2)'},
{label:'2-комнатная',color:'rgba(205, 205, 44,1)',highlightColor:'rgba(205, 205, 44,0.7)',fillColor:'rgba(205, 205, 44,0.2)'},
{label:'3-комнатная',color:'rgba( 0, 255, 0,1)',highlightColor:'rgba( 0, 255, 0,0.7)',fillColor:'rgba( 0, 255, 0,0.2)'},
{label:'4-комнатная',color:'rgba( 0, 0, 255,1)',highlightColor:'rgba( 0, 0, 255,0.7)',fillColor:'rgba( 0, 0, 255,0.2)'},
{label:'Гостинка',color:'rgba(75, 0, 130,1)',highlightColor:'rgba(75, 0, 130,0.7)',fillColor:'rgba(75, 0, 130,0.2)'},
{label:'Дача',color:'rgba(143, 0, 255,1)',highlightColor:'rgba(143, 0, 255,0.7)',fillColor:'rgba(143, 0, 255,0.2)'},
{label:'Дом',color:'rgba(164,164,164,1)',highlightColor:'rgba(164,164,164,0.7)',fillColor:'rgba(164,164,164,0.2)'},
{label:'Земельный участок',color:'rgba(254,5,54,1)',highlightColor:'rgba(254,5,54,0.7)',fillColor:'rgba(254,5,54,0.2)'},
{label:'Комната',color:'rgba(210,150,100,1)',highlightColor:'rgba(210,150,100,0.7)',fillColor:'rgba(210,150,100,0.2)'},
{label:'Коттедж',color:'rgba(111,181,205,1)',highlightColor:'rgba(111,181,205,0.7)',fillColor:'rgba(111,181,205,0.2)'},
{label:'Многокомнатная',color:'rgba(15,18,25,1)',highlightColor:'rgba(15,18,25,0.7)',fillColor:'rgba(15,18,25,0.2)'}
];
function getYearSellsObjects(year) {
$.ajax({
type: "POST",
async: false,
url: "/stats/yearsellsobjects",
data: 'year='+year,
success: function(data){
var response=JSON.parse(data),
months = ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль','Август','Сентябрь','Октябрь','Ноябрь','Декабрь'],
dataYearSellsObjects = {
labels: months,
datasets: [
{
label: categoryObjectsTempelate[0].label,
fillColor: categoryObjectsTempelate[0].fillColor,
strokeColor: categoryObjectsTempelate[0].color,
pointColor: categoryObjectsTempelate[0].color,
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: categoryObjectsTempelate[0].color,
data: response[1]
},
{
label: categoryObjectsTempelate[1].label,
fillColor: categoryObjectsTempelate[1].fillColor,
strokeColor: categoryObjectsTempelate[1].color,
pointColor: categoryObjectsTempelate[1].color,
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: categoryObjectsTempelate[1].color,
data: response[2]
},
{
label: categoryObjectsTempelate[2].label,
fillColor: categoryObjectsTempelate[2].fillColor,
strokeColor: categoryObjectsTempelate[2].color,
pointColor: categoryObjectsTempelate[2].color,
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: categoryObjectsTempelate[2].color,
data: response[3]
},
{
label: categoryObjectsTempelate[3].label,
fillColor: categoryObjectsTempelate[3].fillColor,
strokeColor: categoryObjectsTempelate[3].color,
pointColor: categoryObjectsTempelate[3].color,
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: categoryObjectsTempelate[3].color,
data: response[4]
},
{
label: categoryObjectsTempelate[4].label,
fillColor: categoryObjectsTempelate[4].fillColor,
strokeColor: categoryObjectsTempelate[4].color,
pointColor: categoryObjectsTempelate[4].color,
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: categoryObjectsTempelate[4].color,
data: response[5]
},
{
label: categoryObjectsTempelate[5].label,
fillColor: categoryObjectsTempelate[5].fillColor,
strokeColor: categoryObjectsTempelate[5].color,
pointColor: categoryObjectsTempelate[5].color,
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: categoryObjectsTempelate[5].color,
data: response[6]
},
{
label: categoryObjectsTempelate[6].label,
fillColor: categoryObjectsTempelate[6].fillColor,
strokeColor: categoryObjectsTempelate[6].color,
pointColor: categoryObjectsTempelate[6].color,
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: categoryObjectsTempelate[6].color,
data: response[7]
},
{
label: categoryObjectsTempelate[7].label,
fillColor: categoryObjectsTempelate[7].fillColor,
strokeColor: categoryObjectsTempelate[7].color,
pointColor: categoryObjectsTempelate[7].color,
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: categoryObjectsTempelate[7].color,
data: response[8]
},
{
label: categoryObjectsTempelate[8].label,
fillColor: categoryObjectsTempelate[8].fillColor,
strokeColor: categoryObjectsTempelate[8].color,
pointColor: categoryObjectsTempelate[8].color,
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: categoryObjectsTempelate[8].color,
data: response[9]
},
{
label: categoryObjectsTempelate[9].label,
fillColor: categoryObjectsTempelate[9].fillColor,
strokeColor: categoryObjectsTempelate[9].color,
pointColor: categoryObjectsTempelate[9].color,
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: categoryObjectsTempelate[9].color,
data: response[10]
},
{
label: categoryObjectsTempelate[10].label,
fillColor: categoryObjectsTempelate[10].fillColor,
strokeColor: categoryObjectsTempelate[10].color,
pointColor: categoryObjectsTempelate[10].color,
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: categoryObjectsTempelate[10].color,
data: response[11]
},
{
label: categoryObjectsTempelate[11].label,
fillColor: categoryObjectsTempelate[11].fillColor,
strokeColor: categoryObjectsTempelate[11].color,
pointColor: categoryObjectsTempelate[11].color,
pointStrokeColor: "#fff",
pointHighlightFill: "#fff",
pointHighlightStroke: categoryObjectsTempelate[11].color,
data: response[14]
},
]
};
var yearSellsObjects = document.getElementById("year-sells-objects").getContext("2d"),
legendYearSellsObjects=document.getElementById("legend-year-sells-objects");
new Chart(yearSellsObjects).Line(dataYearSellsObjects, {
bezierCurve: false,
responsive:true,
scaleGridLineWidth : 1,
datasetFill : false,
multiTooltipTemplate: function(valuesObject){
/*console.log(valuesObject);*/
// do different things here based on whatever you want;
return valuesObject.datasetLabel+' - '+valuesObject.value+' об.';
}
});
legend(legendYearSellsObjects, dataYearSellsObjects);
}
});
}
getYearSellsObjects(year);
Data from server:
{"1":{"jan":"0","feb":"0","mar":"0","apr":"0","may":"0","jun":"0","jul":"0","aug":"0","sep":"0","oct":"0","nov":"0","decem":"0"},"2":{"jan":"0","feb":"0","mar":"0","apr":"0","may":"0","jun":"0","jul":"0","aug":"1","sep":"2","oct":"4","nov":"0","decem":"0"},"3":{"jan":"0","feb":"0","mar":"0","apr":"0","may":"0","jun":"0","jul":"0","aug":"3","sep":"4","oct":"17","nov":"0","decem":"0"},"4":{"jan":"0","feb":"0","mar":"0","apr":"0","may":"0","jun":"0","jul":"0","aug":"1","sep":"15","oct":"9","nov":"0","decem":"0"},"5":{"jan":"0","feb":"0","mar":"0","apr":"0","may":"0","jun":"0","jul":"0","aug":"2","sep":"5","oct":"6","nov":"0","decem":"0"},"6":{"jan":"0","feb":"0","mar":"0","apr":"0","may":"0","jun":"0","jul":"0","aug":"0","sep":"0","oct":"2","nov":"0","decem":"0"},"7":{"jan":"0","feb":"0","mar":"0","apr":"0","may":"0","jun":"0","jul":"0","aug":"0","sep":"0","oct":"0","nov":"0","decem":"0"},"8":{"jan":"0","feb":"0","mar":"0","apr":"0","may":"0","jun":"0","jul":"0","aug":"0","sep":"0","oct":"0","nov":"0","decem":"0"},"9":{"jan":"0","feb":"0","mar":"0","apr":"0","may":"0","jun":"0","jul":"0","aug":"0","sep":"0","oct":"0","nov":"0","decem":"0"},"10":{"jan":"0","feb":"0","mar":"0","apr":"0","may":"0","jun":"0","jul":"0","aug":"0","sep":"0","oct":"0","nov":"0","decem":"0"},"11":{"jan":"0","feb":"0","mar":"0","apr":"0","may":"0","jun":"0","jul":"0","aug":"0","sep":"0","oct":"0","nov":"0","decem":"0"},"14":{"jan":"0","feb":"0","mar":"0","apr":"0","may":"0","jun":"0","jul":"0","aug":"1","sep":"0","oct":"1","nov":"0","decem":"0"}}
secondtonone
All 4 comments
The structure of your labels/datasets looks good at a quick glance.
Could it be the Cyrillic characters? Did you try with a Western alphabet to see if it worked?
Unrelated advice: you probably want to load your datasets in a for loop to minimize the size of your JS and improve legibility.
tbertran
on 24 Oct 2014
Thx for advice. And about this problem: yes, i tried Western alphabet and it changes nothing. But when i try without AJAX, it works normally.
secondtonone
on 24 Oct 2014
Wait a minute... Why do you have data: response[14] in your last dataset when it should probably be [12]?
Not sure if that's your problem but that doesn't look right, regardless.
tbertran
on 24 Oct 2014
I know it looks stupid. But in data after 11 goes 14.
And i finally found the solution. For example, response[14] is an object, but must be an array. It's my mistake.
Thx for help, sorry for my basic English.
secondtonone
on 25 Oct 2014
Related issues
benmccann
·
3Comments
nanospeck
·
3Comments
akashrajkn
·
3Comments
lbowers
·
3Comments
kennsippell
·
3Comments
Most helpful comment
I know it looks stupid. But in data after 11 goes 14.
And i finally found the solution. For example, response[14] is an object, but must be an array. It's my mistake.
Thx for help, sorry for my basic English.