jQuery Stacked Columns Chart

The sample illustrates a jQuery Stacked Columns Chart.

by b_g_v

HTML

<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcore.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxchart.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdata.js"></script>
<link rel="stylesheet" href="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css">
<div id='jqxChart' style="width:680px; height:400px;"/>

JavaScript

const dataSource = 1;
var url = 'http://127.0.0.1/aadmin/users/hce/projects/ukr_refugee_01-fact-checking_02a/data/processors/accounts-1_post_dates_accounts_freqs.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);
  }
  drawChart(dataJson);
})();


function drawChart(dataJson){
  var sampleData = [], accounts = {};
  for (var dateMark in dataJson) {
      var ItemSampleData = {"Day": dateMark};
      for (var account in dataJson[dateMark]) {
          ItemSampleData[account] = dataJson[dateMark][account];
          accounts[account] = 1;
      }
      //if (sampleData.length < 100)
        sampleData.push(ItemSampleData);
  }

  var series = [];
  for (var account in accounts) {
    var ItemSeries = { dataField: account, displayText: account }
    series.push(ItemSeries);
  }
	//console.log(series);
  //console.log(sampleData);
  
  var sampleData = [
    { Day: 'Monday', Running: 30, Swimming: null, Cycling: 25 },
    { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0 },
    { Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25 },
    { Day: 'Thursday', Running: 35, Swimming: 25, Cycling: 45 },
    { Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25 },
    { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30 },
    { Day: 'Sunday', Running: 60, Swimming: 45, Cycling: 0 }
  ];

  var series = [
    { dataField: 'Running', displayText: 'Running' },
    { dataField: 'Swimming', displayText: 'Swimming' },
    {...