function candleStickChart(config) {
    function setReSizeEvent(data) {
        var resizeTimer;
        var interval = 500;
        window.removeEventListener('resize', function () {});
        window.addEventListener('resize', function (event) {
            if (resizeTimer !== false) {
                clearTimeout(resizeTimer);
            }
            resizeTimer = setTimeout(function () {
                $(data.mainDiv).empty();
                drawCandleStickChart(data);
                clearTimeout(resizeTimer);
            }, interval);
        });
    }

    drawCandleStickChart(config);
    setReSizeEvent(config);
}

function drawCandleStickChart(config) {
    var data = config.data;
    var backgroundColor = config.backgroundColor;
    var foreColor = config.foreColor;
    var mainDiv = config.mainDiv;
    var minValue = config.minValue;
    var maxValue = config.maxValue;
    var avgValue = config.avgValue;
    var product = config.product;
    var xAxis = config.xAxis;
    var yAxis = config.yAxis;
    var columnsInfo = config.columnsInfo;
    var mainDivName = mainDiv.substr(1, mainDiv.length);


    d3.select(mainDiv).append("svg").attr("width", $(mainDiv).width()).attr("height", $(mainDiv).height());
    var svg = d3.select(mainDiv + " svg"),
        margin = {
            top: 20,
            right: 20,
            bottom: 40,
            left: 100
        },
        width = +svg.attr("width") - margin.left - margin.right,
        height = +svg.attr("height") - margin.top - margin.bottom;


    var g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    // g.append("rect")
    //     .attr("width", width)
    //     .attr("height", height)
    //     .style("fill", backgroundColor)
    //     .style("opacity", 0.1);

    var x = d3.scaleLinear().range([0, width]);
    x.domain([0,
        d3.max(data, function (d) {
            return d[maxValue];
        })
    ]);

    var y0 = d3.scaleBand()
        .rangeRound([height, 0])
        .paddingInner(0.1);


    var y1 = d3.scaleBand()
        .padding(0.05);

    var keys = Object.keys(columnsInfo);
    y0.domain(data.map(function (d) {
        return d[yAxis];
    }));
    y1.domain(keys).rangeRound([0, y0.bandwidth()]);

    var element = g.append("g")
        .selectAll("g")
        .data(data)
        .enter().append("g")
        .attr("transform", function (d) {
            return "translate(0," + y0(d[yAxis]) + ")";
        });

    var rect = element.selectAll("rect")
        .data(function (d) {
            return [d];
        })
        .enter().append("rect")
        .attr("y", function (d) {
            return y1(d[yAxis]);
        })
        .attr("width", function (d) {
            return width;
        })
        .attr("height", y1.bandwidth())
        .style("fill", backgroundColor)
        .style("opacity", 0.1);


    var element1 = g.append("g")
        .selectAll("g")
        .data(data)
        .enter().append("g")
        .attr("transform", function (d) {
            return "translate(0," + (y0(d[yAxis]) + 5) + ")";
        });

    var innerRect = element1.selectAll("rect")
        .data(function (d) {
            return [d];
        })
        .enter().append("rect")
        .attr("x", function (d) {
            return x(d[minValue]);
        })
        .attr("y", function (d) {
            return y1(d[yAxis]);
        })
        .attr("width", function (d) {
            return x(d[maxValue]) - x(d[minValue]);
        })
        .attr("data", function (d) {
            return JSON.stringify(d)
        })
        .attr("height", y1.bandwidth() - 10)
        .style("fill", foreColor)
        .style("opacity", 0.3)
        .on("mouseover", function () {
            $(this).css("opacity", 0.5);
            $("#tooltipDiv").show();
            var tooltipData = JSON.parse($(this).attr("data"));
            $("#tooltipDiv").find("#avgValue").text(avgValue + ":" + tooltipData[avgValue]+ " Lacks");
            $("#tooltipDiv").find("#product").text(product + ":" + tooltipData[product]);
            $("#tooltipDiv").find("#a1").text(minValue + ":" + tooltipData[minValue] + " Lacks");
            $("#tooltipDiv").find("#a2").text(maxValue + ":" + tooltipData[maxValue] + " Lacks");

        })
        .on("mousemove", function (e) {
            var mouse = d3.mouse(this);
            // $("#tooltipDiv").css("margin-left", mouse[0] - 10);
            // $("#tooltipDiv").css("margin-top",mouse[1]);
            $("#tooltipDiv").css({
                'top': d3.event.pageY + 10,
                'left': d3.event.pageX + 10
            });
        })
        .on("mouseout", function () {
            $(this).css("opacity", 0.3);
            $("#tooltipDiv").hide();
        });



    element1.selectAll("line")
        .data(function (d) {
            return [d];
        })
        .enter()
        .append("line")
        .attr("class", "avgAllProduct")
        .attr("x1", width / 2)
        .attr("y1", -5)
        .attr("x2", width / 2)
        .attr("y2", y1.bandwidth() - 5)
        .style("stroke", backgroundColor)
        .style("opacity", 0.3)
        .style("stroke-width", "3px");


    element1.selectAll("line1")
        .data(function (d) {
            return [d];
        })
        .enter()
        .append("line")
        .attr("class", "avgProduct")
        .attr("x1", function (d) {
            return x(d[avgValue])
        })
        .attr("y1", 0)
        .attr("x2", function (d) {
            return x(d[avgValue])
        })
        .attr("y2", y1.bandwidth() - 10)
        .style("stroke", foreColor)
        .style("stroke-width", "3px");




    var ele = g.append("g")
        .attr("class", "axis")
        .call(d3.axisLeft(y0).ticks(null, "s"))
    ele.selectAll("text")
        .attr("style", "font-size:12px");
    ele.append("text")
        .attr("x", height * 0.4 * -1)
        .attr("y", margin.left * 0.8 * -1) //y(y.ticks().pop()) + 0.5)
        .attr("dy", "0.71em")
        .attr("fill", "#000")
        .attr("transform", "rotate(-90)")
        .attr("font-weight", "bold")

        .text("Product");

        g.append("g")
        .attr("class", "axis")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(x).ticks(10))
        .append("text")
        .attr("x", width / 2)
        .attr("y", margin.bottom * 0.7)
        .attr("dx", "0.32em")
        .attr("fill", "#000")
        .attr("font-weight", "bold")
        .attr("text-anchor", "start")
        .text("Product Sales in Lacks");

}