Jquery flot line chart custom labels for x axis example with customized tooltip

Jquery flot line chart custom labels for x axis example with customized tooltip.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://static.pureexample.com/js/flot/excanvas.min.js"></script>
<script src="http://static.pureexample.com/js/flot/jquery.flot.min.js"></script>

<!-- CSS -->
<style type="text/css">
#flotcontainer {
    width: 600px;
    height: 200px;
    text-align: center;
    margin: 0 auto;
}
</style>


<!-- Javascript -->
<script type="text/javascript">
var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
var data9_1 = [
    [1, 1530], [2, 6580], [3, 1980],[4, 6630], [5, 8010], [6, 10800],
    [7, 3530], [8, 7490], [9, 5230],[10, 2580], [11, 6880], [12, 3640]
];

$.fn.UseTooltip = function () {
    var previousPoint = null;
   
    $(this).bind("plothover", function (event, pos, item) {        
        if (item) {
            if (previousPoint != item.dataIndex) {
                previousPoint = item.dataIndex;

                $("#tooltip").remove();
               
                var x = item.datapoint[0];
                var y = item.datapoint[1];              
               
                showTooltip(item.pageX, item.pageY,
                  months[x-  1] + "<br/>" + "<strong>" + y + "</strong> (" + item.series.label + ")");
            }
        }
        else {
            $("#tooltip").remove();
            previousPoint = null;
        }
    });
};

function showTooltip(x, y, contents) {
    $('<div id="tooltip">' + contents + '</div>').css({
        position: 'absolute',
        display: 'none',
        top: y + 5,
        left: x + 20,
        border: '2px solid #4572A7',
        padding: '2px',    
        size: '10',  
        'background-color': '#fff',
        opacity: 0.80,
        color:'#121DE1'
    }).appendTo("body").fadeIn(200);
}


$(function () {      
    $.plot($("#flotcontainer"),
        [{
              data: data9_1,label: "Page View",lines: { show: true},points: { show: true }
            }
        ],{          
            grid: {
                hoverable: true,
                clickable: false,
                mouseActiveRadius: 30,
                backgroundColor: { colors: ["#D1D1D1", "#7A7A7A"] }
            },
            xaxis:{
                   ticks: [
                            [1, "Jana"], [2, "Febe"], [3, "Marc"], [4, "Apri"], [5, "Maye"], [6, "June"],
                            [7, "July"], [8, "Augu"], [9, "Sept"], [10, "Octo"], [11, "Novm"], [12, "Dece"]
                   ]
            }    
        }
    );

    $("#flotcontainer").UseTooltip();
});
</script>

<!-- HTML -->
<div id="flotcontainer"></div>