Accounts stats - Time series, zoomable

by b_g_v

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">
    </p>
</figure>

CSS

.highcharts-figure,
.highcharts-data-table table {
    min-width: 360px;
    max-width: 1200px;
    margin: 1em auto;
}

.highcharts-data-table table {
    font-family: Verdana, sans-serif;
    border-collapse: collapse;
    border: 1px solid #ebebeb;
    margin: 10px auto;
    text-align: center;
    width: 100%;
    max-width: 500px;
}

.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}

.highcharts-data-table th {
    font-weight: 600;
    padding: 0.5em;
}

.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
    padding: 0.5em;
}

.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}

.highcharts-data-table tr:hover {
    background: #f1f7ff;
}

.highcharts-description {
    margin: 0.3rem 10px;
}

JavaScript

//var url = 'https://www.highcharts.com/samples/data/usdeur.json';
const title = 'Accounts posts dynamics for Y2024';
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_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 data2 = [];
    for (dateStr in dataJson){
        var newItem = [dateStr, dataJson[dateStr]];
        data2.push(newItem);
    }
    Highcharts.chart('container', {
        chart: {
            zooming: {
                type: 'x'
            }
        },
        title: {
            text: title
        },
        subtitle: {
            text: document.ontouchstart === undefined ?
                'Click and drag in the plot area to zoom in' :
                'Pinch the chart to zoom in'
        },
        xAxis: {
            type: 'datetime'
        },
        yAxis: {
            title: {
                text: 'Posts number, daily'
            }
        },
        legend: {
            enabled: false
        },
        plotOptions: {
            area: {
                marker: {
                    radius: 2
                },
                lineWidth: 1,
                color: {
                    linearGradient: {
                        x1: 0,
                        y1: 0,
                        x2: 0,
                        y2:...