Accounts stats timeline

bgv

by b_g_v

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css">
<script src="https://code.highcharts.com/gantt/highcharts-gantt.js"></script>
<script src="https://code.highcharts.com/gantt/modules/exporting.js"></script>
<script src="https://code.highcharts.com/gantt/modules/accessibility.js"></script>

<div id="container"></div>

<script type="application/json" id="data">

</script>

CSS

.events-chart{
  width: 100%;
  overflow: scroll;
  border: 0px solid red;
}
#container,#button-container {
    width: 1200px;
    margin: 0;
    border: 0px solid green;
}
text{
  font-size: 0.5em!important;
}
noImg{
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z/C/HgAGgwJ/lK3Q6wAAAABJRU5ErkJggg==);
}
.highcharts-label-icon {
    opacity: 0.5;
}
.highcharts-figure{
  margin: 0;
}
.highcharts-treegrid-node-level-1 {
  left: 15px!important;
}
.positive {
  color:green;
  display: block;
  font-size: 1.2em;
  padding: 0 2px;
}
.negative {
  color:red;
  display: block;
  font-size: 1.2em;
  padding: 0 2px;
}
.neutral {
  color:gray;
  display: block;
  font-size: 1.2em;
  padding: 0 2px;
}
.similarityIcon {
  background-color: #e1d8fa;
  padding: 3px 0px 1px 0px;
  border-radius: 4px;
  border: 1px solid #9571f9;
  display: block;
  line-height: 0.6em;
  font-size: 0.7em;
  margin-bottom: 2px;
  text-align: center;
}
.digestRankIcon {
  background-color: orange;
  padding: 3px 0px 1px 0px;
  border-radius: 4px;
  border: 1px solid #9571f9;
  display: block;
  line-height: 0.6em;
  font-size: 0.7em;
  margin-bottom: 2px;
  text-align: center;
}
.trackedIcon {
  background-color: #80FF80;
  padding: 3px 0px 1px 0px;
  border-radius: 4px;
  border: 1px solid #9571f9;
  display: block;
  line-height: 0.6em;
  font-size: 0.7em;
  margin-bottom: 2px;
  text-align: center;
}

JavaScript

const title = 'Accounts timeline all data unfiltered window size 2 day';

const dataSource = 1;
var url = 'http://127.0.0.1/aadmin/users/hce/projects/ukr_refugee_01-fact-checking_02a/data/processors/accounts-1_accounts_chart_hichchart_gantt_timeline2.json';


(async () => {
  var dataJson = null;

  if(dataSource == 0){
	  const user = 'hce', passwd = 'events12345';
		const headers = new Headers({
      'Authorization': `Basic ${btoa(user + ':' + passwd)}`,
      'Origin':'https://jsfiddle.net'
    });
    var options = {headers: headers, credentials: "include"};
    dataJson = await fetch(url, options).then(response => response.json());
  }else if(dataSource == 1){
    dataJson = await fetch(url).then(response => response.json());
  }else{
    var dataTag = document.getElementById('data').innerHTML;
    dataJson = JSON.parse(dataTag);
  }

  //dataJson = dataJson['data']['events'];
  drawChart(dataJson);

})();


function drawChart(dataJson){
  Highcharts.ganttChart('container', {
      time: {
          timezone: 'UTC',
      },
      chart: {
      	zoomType: 'x',
        height: 10,
        events: {
          load() {
            const chart = this;
            chart.series[0].points.forEach(point => {
              const pointBox = point.graphic.getBBox();
              point.color = stringToColour(point.login)
            });
            chart.redraw();
          }
        }
      },
      title: {
          text: title
      },
      yAxis: {
          uniqueNames: true
      },
      /*
      navigator: {
          enabled: true,
          liveRedraw: true,
          series: {
              type: 'gantt',
              pointPlacement: 0.5,
              pointPadding: 0.25,
              accessibility: {
                  enabled: false
              }
          },
          yAxis: {
              min: 0,
              max: 3,
              reversed: true,
              categories: []
          }
      },
      */
      scrollbar: {
          enabled:...