var data = [[0, ],[1, ],[2, ],[3, ],[4, ],[5, ],[6, ],[7, ],[8, ],[9, ],[10, ],[11, ]];
        var dataset = [{ data: data }];
        var ticks = [[0, "J"], [1, "F"], [2, "M"], [3, "A"],[4, "M"], [5, "J"], [6, "J"], [7, "A"], [8, "S"], [9, "O"], [10, "N"], [11, "D"]];
		var tipm = [["JANUARY "], ["FEBRUARY "], ["MARCH "], ["APRIL "],["MAY "], ["JUNE "], ["JULY "], ["AUGUST "], ["SEPTEMBER "], ["OCTOBER "], ["NOVEMBER "], ["DECEMBER "]];
 
        var options = {
            series: {
                bars: {
                    show: true,
                }
            },
            bars: {
                align: "center",
				color: "#333333",
                barWidth: 0.6,
                highlightColor: "#333333",
                fill:1
            },
            xaxis: {
                axisLabel: "World Cities",
                axisLabelUseCanvas: true,
                axisLabelFontSizePixels: 12,
				tickLength: 0,
                axisLabelFontFamily: 'Verdana, Arial',
                axisLabelPadding: 10,
                ticks: ticks
            },
            yaxis: {
                axisLabel: "Average Temperature",
                axisLabelUseCanvas: true,
                axisLabelFontSizePixels: 12,
                axisLabelFontFamily: 'Verdana, Arial',
                axisLabelPadding: 3,
                tickFormatter: function (v, axis) {
                    return v + "";
                }
            },
            legend: {
                noColumns: 0,
                labelBoxBorderColor: "#333333",
                position: "nw"
            },
            
            grid: {
                hoverable: true,
                borderWidth: 0,
                backgroundColor: { colors: ["#ffffff", "#ffffff"] }
            }
        };
 
        $(document).ready(function () {
            $.plot($("#flot-placeholder"), dataset, options);
            $("#flot-placeholder").UseTooltip();
        });
 
        function gd(year, month, day) {
            return new Date(year, month, day).getTime();
        }
 
        var previousPoint = null, previousLabel = null;
 
        $.fn.UseTooltip = function () {
            $(this).bind("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.datapoint[0];
                        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>" + tipm[x] + "<br>Temperature: " + y + "&deg;C</strong>");
                    }
                } else {
                    $("#tooltip").remove();
                    previousPoint = null;
                }
            });
        };
 
        function showTooltip(x, y, color, contents) {
            $('<div id="tooltip">' + contents + '</div>').css({
                position: 'absolute',
                display: 'none',
                top: y -5,
                left: x - 5,
                border: '2px solid #333333',
                padding: '3px',
                'font-size': '9px',
				'color': '#CCCCCC',
                'border-radius': '5px',
                'background-color': '#333333',
                'font-family': 'Verdana, Arial, Helvetica, Tahoma, sans-serif',
                opacity: 0.9
            }).appendTo("body").fadeIn(200);
        }