Candle Stick Chart d3 v4

<html>

<body>
    <script src="https://code.jquery.com/jquery-latest.min.js"></script>
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <script src="candleStick.js"></script>
    <script>
        window.addEventListener('resize', function (event) {
            $("#chart").width(window.innerWidth * 0.9);
            $("#chart").height(window.innerHeight);
        });
    </script>

<div id="chart" style="width: 800;height: 500px;">
    </div>
    <div id="tooltipDiv" style="display:none;background:green;color:white;position: absolute;padding: 3;">
        
        <div id="product"></div>
        <div id="a1"></div>
        <div id="a2"></div>
        <div id="avgValue"></div>
    </div>
    <script>
        var chartData = [{
            product: "Paracetamol",
            batch: "A1-FFFF",
            minValue: 100,
            maxValue: 800,
            avgValue: 600,
            totalBatch: 5
        }];

var chartData1 = [{
            product: "Parle-G",
            minValue: 100,
            maxValue: 800,
            avgValue: 600
        }, {
            product: "Monaco",
            minValue: 150,
            maxValue: 1000,
            avgValue: 500
        }, {
            product: "Krack Jack",
            minValue: 200,
            maxValue: 1200,
            avgValue: 800
        }, {
            product: "Parle 20-20",
            minValue: 50,
            maxValue: 900,
            avgValue: 450
        }, {
            product: "Britania",
            minValue: 130,
            maxValue: 850,
            avgValue: 430
        }, {
            product: "Parle Chocolate",
            minValue: 300,
            maxValue: 1100,
            avgValue: 550
        }, {
            product: "Parle Kiss Me",
            minValue: 250,
            maxValue: 1050,
            avgValue: 500
        }, {
            product: "Parle Orange",
            minValue: 80,
            maxValue: 950,
            avgValue: 650
        }];

var columnsInfo = {
            "avgValue": "Product"
        };

$("#chart").empty();
        var chartConfig = {
            mainDiv: "#chart",
            backgroundColor: "black",
            foreColor: "#0c6471",
            data: chartData1,
            minValue: "minValue",
            maxValue: "maxValue",
            avgValue: "avgValue",
            product: "product",
            // batch: "batch",
            xAxis: "maxValue",
            yAxis: "product",
            columnsInfo:columnsInfo
        };
        var candleStickChart = new candleStickChart(chartConfig);
    </script>
</body>

</html>

Modified http://code.jquery.com/jquery-latest.min.js to a secure url

https://code.jquery.com/jquery-latest.min.js

https://d3js.org/d3.v4.min.js