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="timelinechart" data-role="timelinechart" data-width=800 data-height=500 data-config='{"gutter": 0.1}' data-data="">
    </div>

  </body>

</html>

CSS

body {
  background: #eeeeee;
}

#holder {
  overflow: hidden;
}

/*
.chart {
	shape-rendering: crispEdges;
}
*/

.timelinechart {
  /*width:100%;
	border: 1px solid red;*/
}

.timelinechart svg {
  width: 100%;
  /*border: 1px solid green;*/
}

.timelinechartg {}

.mini text {}

.main text {}

.axis {}

.miniItem {
  fill: #0072ce;
  stroke-width: 6;
}

.miniItem.future {
  fill: #448875;
}

text.future {
  fill: #f7b363;
}


.brush .extent {
  stroke: #b6b8b9;
  fill: #57585b;
  fill-opacity: .365;
  stroke-width: .2;
}

.laneImg {
  border-radius: 25px;
}

.currentLine {
  stroke-width: 2;
}


.axis text {
  font-size: 12px;
}

.base.axis text {
  font-size: 10px;
}

.laneText {
  font-size: 12px;
}



div.tooltip {
  position: absolute;
  text-align: left;
  width: 120px;
  height: 28px;
  padding: 2px;
  font: 12px sans-serif;
  background: #ffffff;
  border: 0px;
  pointer-events: none;
}


.noselect {
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Old versions of Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */
}


.selection{
  fill: #ffffff;
  stroke: #0072ce;
  stroke-width: 1.5px;
  fill-opacity: 0.5;
}

.currentLine{
  stroke: darkgrey;
}

JavaScript

$(document).ready(function() {



  var data = [
    {
      "label": "Japan prom",
      "isIncluded": true,
      "region": "SIEJA-JAPAN",
      "times": [
        {"text": "", "starting_time": Date.parse('2020-01-14T15:20:00Z'), "ending_time": Date.parse('2020-02-14T15:20:00Z')}
      ]
    },
    {
      "label": "China promos",
      "isIncluded": true,
      "region": "SIEJA-ASIA",
      "times": [
        {"text": "", "starting_time":Date.parse('2020-01-17T03:24:00'), "ending_time": Date.parse('2020-03-17T03:24:00')}
      ]
    },
    {
      "label": "France",
      "isIncluded": true,
      "region": "SIEE",
      "times": [
        {"text": "", "starting_time": Date.parse('2020-01-20T03:24:00'), "ending_time": Date.parse('2020-02-17T03:24:00')}
      ]
    }
  ];



        //let data = this.props.data;
        console.log('myTIMELINE DATA', data);

        //console.log("this", this);

        var $this = $('.timelinechart');
        //var $this = $(this);

        var chartW = $this.data('width');
        var chartH = $this.data('height');
        var config = $this.data('config');



        var { gutter } = config;

        var now = Date.now();
        var lanes = [];
        var regions = [];
        var times = [];

        $.each(data, function(index, value) {
            lanes.push(value.label);
            regions.push(value.region);
            $.each(value.times, function(i, v) {
                v['lane'] = index;
            });
            times.push(value.times);
        });

        var laneLength = lanes.length;
        var items = [].concat.apply([], times);

        $.each(items, function(i, v) {
            v['id'] = i;
        });

        var timeBegin = new Date(
            d3.min(items, function(d) {
                return d['starting_time'];
            }),
        );
        var timeEnd = new Date(
            d3.max(items, function(d) {
                return d['ending_time'];
            }),
        );

        var m = [50,...