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="multiSeriesLineChart1.js"></script>
<script src="data.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>
<a href="https://stackoverflow.com/users/7430694/chandrakant-thakkar" style="position: absolute;top: 87%;left: 77%;" target="_blank">
<img src="https://stackoverflow.com/users/flair/7430694.png" width="208" height="58" alt="profile for Chandrakant Thakkar at Stack Overflow, Q&A for professional and enthusiast programmers" title="profile for Chandrakant Thakkar at Stack Overflow, Q&A for professional and enthusiast programmers">
</a>
<div id="tooltipDiv" style="display:none;background:green;color:white;position: absolute;padding: 3;">
<div id="batch"></div>
<div id="product"></div>
<div id="a1"></div>
<div id="a2"></div>
</div>
<script>
$("#chart").empty();
var columnsInfo = {
"productASales": "Product A Sales",
"productBSales": "Product B Sales"
};
var muliSeriesChartConfig = {
mainDiv: "#chart",
colorRange: ["#ff0000", "#008000"],
data: data,
columnsInfo: columnsInfo,
xAxis: "startDate",
yAxis: "productASales",
label: {
xAxis: "Date",
yAxis: "Product A Sales (Lacks)"
},
requireCircle: false,
requireLegend: true,
};
var muliSeriesChart = new multiSeriesLineChart(
muliSeriesChartConfig);
</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