xxxxxxxxxx
<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