Set Bar color and display average Line in Horizontal Bar chart using jQuery Flot Plugin

Hi Rockstar8,

Refer below code.

HTML

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery.flot-0.8.3.min.js"></script>
<script type="text/javascript" src="jshashtable-2.1.js"></script>
<script type="text/javascript" src="jquery.flot.axislabels.js"></script>
<script type="text/javascript" src="jquery.numberformatter-1.2.3.min.js"></script>
<script type="text/javascript">
    $(function () {
        var rawData = [{ data: [[1582.3, 0]] },
                    { data: [[28.95, 1]] },
                    { data: [[1603, 2]] },
                    { data: [[774, 3]] },
                    { data: [[1245, 4]] },
                    { data: [[85, 5]] },
                    { data: [[1025, 6]]}];

        for (var i = 0; i < rawData.length; i++) {
            if (rawData[i].data[0][0] > 1500) {
                rawData[i].color = "#1998D7";
            } else {
                rawData[i].color = "#00FF00";
            }
        }
        var ticks = [[0, "Gold"], [1, "Silver"], [2, "Platinum"], [3, "Palldium"], [4, "Rhodium"], [5, "Ruthenium"], [6, "Iridium"]];
        var options = {
            series: { bars: { show: true} },
            bars: {
                align: "center",
                barWidth: 0.5,
                horizontal: true,
                fillColor: { colors: [{ opacity: 0.5 }, { opacity: 1}] },
                lineWidth: 1
            },
            xaxis: {
                axisLabel: "Price (Rupees)",
                axisLabelUseCanvas: true,
                axisLabelFontSizePixels: 12,
                axisLabelFontFamily: 'Verdana, Arial',
                axisLabelPadding: 10,
                max: 2000,
                tickColor: "#5E5E5E",
                tickFormatter: function (v, axis) {
                    return $.formatNumber(v, { format: "#,###", locale: "in" });
                },
                color: "black"
            },
            yaxis: {
                axisLabel: "Precious Metals",
                axisLabelUseCanvas: true,
                axisLabelFontSizePixels: 12,
                axisLabelFontFamily: 'Verdana, Arial',
                axisLabelPadding: 3,
                tickColor: "#5E5E5E",
                ticks: ticks,
                color: "black"
            },
            legend: {
                noColumns: 0,
                labelBoxBorderColor: "#858585",
                position: "ne"
            },
            grid: {
                hoverable: true,
                borderWidth: 2,
                backgroundColor: '#FFFF76',
                markings: [{ xaxis: { from: 1500, to: 1500 }, color: "red"}] // Draw Average line.
            }
        };

        $.plot($('#placeholder'), rawData, options);
    });
</script>
<div id="placeholder" style="width: 400px; height: 300px;">
</div>