Multi-Series Line Chart

<html>

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

var groupChartData = [{ "2614": 8, "4449": 15, "over": 1 }, { "2614": 15, "4449": 17, "over": 2 }, { "2614": 19, "4449": 22, "over": 3 }, { "2614": 38, "4449": 30, "over": 4 }, { "2614": 41, "4449": 37, "over": 5 }, { "2614": 47, "4449": 38, "over": 6 }, { "2614": 54, "4449": 44, "over": 7 }, { "2614": 67, "4449": 46, "over": 8 }, { "2614": 68, "4449": 54, "over": 9 }, { "2614": 76, "4449": 63, "over": 10 }, { "2614": 80, "4449": 71, "over": 11 }, { "2614": 80, "4449": 91, "over": 12 }, { "2614": 88, "4449": 94, "over": 13 }, { "2614": 93, "4449": 103, "over": 14 }, { "2614": 100, "4449": 108, "over": 15 }, { "2614": 109, "4449": 122, "over": 16 }, { "2614": 126, "4449": 137, "over": 17 }, { "2614": 147, "4449": 147, "over": 18 }, { "2614": 157, "4449": 150, "over": 19 }, { "2614": null, "4449": 155, "over": 20 }];

var columnsInfo = { "2614": "Team A", "4449": "Team B" };

$("#chart").empty();
    var muliSeriesChartConfig = {
        mainDiv: "#chart",
        colorRange: ["#2a98cd", "#df7247"],
        data: groupChartData,
        columnsInfo: columnsInfo,
        xAxis: "over",
        yAxis: "runs",
        label: {
            xAxis: "Over",
            yAxis: "Runs"
        },
        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