regarding FLOT CHARTS API Error :Cannot read property 'length' of undefined

Question

hi this is my code for the FLOT charts API. I am getting the graph but I am getting the above mentioned error. Here is my code:

JavaScript:

$(function () {
    var a1 = [
        [0, 1],
        [1, 2],
        [2, 6],
        [3, 9],
        [4, 5]
    ];
    var a2 = [
        [0, 4],
        [1, 5],
        [2, 1],
        [3, 7],
        [4, 7]
    ];
    var data = [{
        label: "Pre Transformation",
        data: a1
    }, {
        label: "Post Transformation",
        data: a2
    }];

    $.plot($("#consolidate1"), data, {
        series: {
            bars: {
                show: true,
                barWidth: 0.13,
                order: 1,
                align: "center"
            }
        },
        xaxis: {
            ticks: [
                [0, "Overall"],
                [1, "SEA"],
                [2, "INDIA"],
                [3, "NEA"],
                [4, "PZ"]
            ],
            tickLength: 0
        },
        grid: {
            hoverable: true,
            clickable: true,
            labelMargin: 15
        },

        valueLabels: {
            show: false
        }
    });
});


var previousPoint = null,
    previousLabel = null;

function showTooltip(x, y, color, contents) {
    $('<div id="tooltip">' + contents + '</div>').css({
        position: 'absolute',
        display: 'none',
        top: y - 40,
        left: x - 120,
        border: '2px solid ' + color,
        padding: '3px',
            'font-size': '9px',
            'border-radius': '5px',
            'background-color': '#fff',
            'font-family': 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
        opacity: 0.9
    }).appendTo("body").fadeIn(200);
}

$("#consolidate1").on("plothover", function (event, pos, item) {
    if (item) {
        if ((previousLabel != item.series.label) || (previousPoint != item.dataIndex)) {
            previousPoint = item.dataIndex;
            previousLabel = item.series.label;
            $("#tooltip").remove();

            var x = item.dataIndex;
            var y = item.datapoint[1];
            var color = item.series.color;

            //console.log(item.series.xaxis.ticks[x].label);               

            showTooltip(item.pageX,
            item.pageY,
            color,
                "<strong>" + item.series.label + "</strong><br>" + item.series.xaxis.ticks[x].label + ":  <strong>" + y + "</strong>");
        }
    } else {
        $("#tooltip").remove();
        previousPoint = null;
    }
});

HTML Code:

<div>
    <p>Yearly Energy Consumption</p>
    <div id="consolidate1" style="width:500px;height:300px;"></div>
</div>

Code in Fiddle .

I am not able to figure out why this error is coming up.

Answer 1

I got the similar error ... on debugging i found that the error was pointing to "~/float.js" .... then later i checked my code, there was another chart that i was trying to plot and for that chart i commented out the Html part of the chart.. so i was getting the above mentioned error.

The way i fixed is : commented out the $.plot() for other chart.

Hope this might help someone!