What can cause axisX and axisY to be undefined?

[ayy]

I haven’t looked at my canvasjs project for over a month or so, and last time I touched it it was working fine.

I access the axis objects like so: chart.axisY[0]. My chart is not undefined and when I log the chart object and I can see that the axis objects are being set correctly. I was wondering what can cause the axis to be undefined?

Here is how I set the y axis

` axisY:
{
title: “Curve Data”,
lineThickness: 2,
lineColor: “black”,
gridColor: “#f1f0ed”,
tickLength: 0,
labelFormatter: function(e)
{
return “”;
}
}, `

and here is where is try to access axisY

`for(var i = chart.axisY[0].get(“minimum”); i < chart.axisY[0].get(“maximum”); i+=chart.axisY[0].get(“interval”))
{
chart.axisY[0].addTo(“stripLines”,
{
value: i, color: “transparent”, label: i, showOnTop: true, labelAlign: “near”, labelFontColor: “black”
})
}`

[Indranil]

@ayy,

Kindly make sure that chart is rendered before get method is used.

If the issue still persists, can you kindly create a jsfiddlereproducing the same so that we can understand your requirements better and help you out.

_________
Indranil Deo,
Team CanvasJS

[davidhbigelow]

I found this due to a problem with “undefined” values showing up in the axis for some values – either by default or by zooming.

The problem had to do with the zoom level intervals and whether data existed in my values array for the axis specific to the label formatter.

After a bit of debugging – I found that the canvas.js lib was computing the interval automatically (fine) – but the calculated location for the e.value was sometimes a floating number instead of a perfect integer.

Since the array values can be found by their integer index position, the floating number was throwing an “undefined” value back to the labelFormatter. Hence “undefined” was showing up in the axis for the auto-computed intervals on the chart.

To fix this — I used the following code for my labelFormatter.

Note — the (e.value % 1 === 0) is a test to see if the e.value is an integer — if not a empty string is returned.

axisX: {
labelAngle: 90,
labelFormatter: function (e) {
if (e.value % 1 === 0) {
if (typeof xAxisValsArr[e.value] !== “undefined”) {
return xAxisValsArr[e.value];
}
} else {
return “”;
}
}
},
axisY: {
labelFormatter: function (e) {
if (e.value % 1 === 0) {
if (typeof yAxisValsArr[e.value] !== “undefined”) {
return yAxisValsArr[e.value];
}
} else {
return “”;
}
}
},

Hope this helps someone that also struggled with this… If anyone has any other suggestions, please reply.

————
SimilarParts.ai
Dave

[davidhbigelow]

Small correction – to my previous post… another return “” is required for when the array index does not exist for a e.value.

axisX: {
labelAngle: 90,
labelFormatter: function (e) {

if (e.value % 1 === 0) {
if (typeof xAxisValsArr[e.value] !== “undefined”) {
return xAxisValsArr[e.value];
} else {
return “”;
}
} else {
return “”;
}
}
},
axisY: {
labelFormatter: function (e) {
console.log(e.value);
if (e.value % 1 === 0) {
if (typeof yAxisValsArr[e.value] !== “undefined”) {
return yAxisValsArr[e.value];
} else {
return “”;
}
} else {
return “”;
}
}
},