bar chart with D3.js

by mamounothman

HTML

<html lang="en">

  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Gantt chart with D3.js</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script type='text/javascript' src="https://d3js.org/d3.v4.min.js"></script>
  </head>

  <body>

    <div class="barlinechart" data-role="barlinechart" data-width=800 data-height=500 data-config='{"gutter": 0.1}' data-data="">
    </div>

  </body>

</html>

CSS

body {
  background: #eeeeee;
}

#holder {
  overflow: hidden;
}



body {
  background: #ffd;
}

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  position: relative;
}

text {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.toolTip {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  position: absolute;
  display: none;
  width: auto;
  height: auto;
  background: none repeat scroll 0 0 white;
  border: 0 none;
  border-radius: 8px 8px 8px 8px;
  box-shadow: -3px 3px 15px #888888;
  color: black;
  font: 12px sans-serif;
  padding: 5px;
  text-align: center;
}

.legend {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 60%;
}

rect {
  stroke-width: 2;
}

text {
  font: 10px sans-serif;
}

.axis text {
  font: 10px sans-serif;
}

.axis path {
  fill: none;
  stroke: #000;
}

.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.axis .tick line {
  stroke-width: 1;
  stroke: rgba(0, 0, 0, 0.2);
}

.axisHorizontal path {
  fill: none;
}

.axisHorizontal line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.axisHorizontal .tick line {
  stroke-width: 1;
  stroke: rgba(0, 0, 0, 0.2);
}

.bar {
  fill: steelblue;
  fill-opacity: .9;
}


/*
.x.axis path {
  display: none;
}*/

.active{
  opacity:1;
}


.inactive{
  opacity:0.5;
}

JavaScript

$(document).ready(function() {



var $this = $(".barlinechart");

        

        var data = [{
            label: "a",
            "Current Period": 20,
            "Prior Year": 10
        }, {
            label: "b",
            "Current Period": 15,
            "Prior Year": 30
        }, {
            label: "c",
            "Current Period": 25,
            "Prior Year": 40
        }, {
            label: "d",
            "Current Period": 5,
            "Prior Year": 60
        }];

        var configuration = [{
            "yLabel": "People Count"
        }];
        var w = 660;
        var h = 500;

        function colores_google(n) {
            var colores_g = ["#f7b363", "#448875", "#c12f39", "#2b2d39", "#f8dd2f", "#8bf41b"];
            return colores_g[n % colores_g.length];
        }

        //var y = d3.scaleBand()
        var colorScale = d3.scaleBand().range(["#f7b363", "#448875", "#c12f39", "#2b2d39", "#f8dd2f", "#8bf41b"]);

        var margin = {
                top: 20,
                right: 110,
                bottom: 30,
                left: 20
            },
            width = w - margin.left - margin.right,
            height = h - margin.top - margin.bottom;


        var svg = d3.select($this[0]).append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        var axisHolder = svg.append("g")
            .attr("class", "axis");
        var chartHolder = svg.append("g")
            .attr("class", "chart");
        var legendHolder = svg.append("g")
            .attr("class", "legend");

        var x0 = d3.scaleBand()
            .domain([0, width])
            //.range([0, 100])
            //.rangeRoundBands([0, width], .1);

        var x1 = d3.scaleBand();

        var y = d3.scaleLinear()
            .range([height, 0]);

      ...