Home forums Using CanvasJS What can cause axisX and axisY to be undefined?

This topic contains 3 replies, has 3 voices, and was last updated by  davidhbigelow 1 week ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #17248

    ayy
    Member

    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”
    })
    }`

    #17253

    Indranil Deo
    Member

    @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

    #24278

    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

    #24279

    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 “”;
    }
    }
    },

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.