D3 Examples - Grouped Bar Chart

xxxxxxxxxx
 
<!DOCTYPE>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Grouped Bar Chart</title>
​
<!-- JavaScript Libraries //-->
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.7.1/d3-tip.min.js"></script>
<link href="d3-tip.css" rel="stylesheet" type="text/css">
​
<!-- CSS Style //-->
<link href="style.css" rel="stylesheet" type="text/css">
​
<script type="text/javascript" src="main.js"></script>
</head>
​
<body>
    <div style="margin:16px;" class="chart"></div>
</body>
<script>
​
    var inputData = [];
    inputData.push({"State":"Credit","Jan":0,"Feb":0,"Mar":0,"Apr":0,"May":0,"Jun":0,"Jul":65536,"Aug":56702,"Sep":15634,"Oct":9988,"Nov":34777,"Dec":0});
    inputData.push({"State":"Debit","Jan":0,"Feb":0,"Mar":0,"Apr":0,"May":0,"Jun":0,"Jul":89007,"Aug":67988,"Sep":75000,"Oct":25000,"Nov":67688,"Dec":0});
​
    var innerColumns = {
              "column1" : ["Jan"],
              "column2" : ["Feb"],
              "column3" : ["Mar"],
              "column4" : ["Apr"],
              "column5" : ["May"],
              "column6" : ["Jun"],
              "column7" : ["Jul"],
              "column8" : ["Aug"],
              "column9" : ["Sep"],
              "column10" : ["Oct"],
              "column11" : ["Nov"],
              "column12" : ["Dec"]
          }
    var defaultColorScheme = ["#E57373","#BA68C8","#7986CB","#A1887F","#90A4AE","#AED581","#9575CD","#FF8A65","#4DB6AC","#FFF176","#64B5F6","#00E676"];
​
    renderGroupedBarChart (inputData,".chart", innerColumns,true, defaultColorScheme)</script>
</html>
    