How to install connection history graph

Najsr · Aug 30, 2017

It's kinda dirty because I use PHP to print server HTML elements but I hope you don't mind.

HTML:

<?php
$ip = "mydomain.com";
$ports = [9987, 9988, 9989];
?>

<html>
    <head>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/4.1.7/modules/no-data-to-display.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/4.1.7/highcharts.js"></script>
    </head>
    <body>
<div class="container">
<?php
    foreach($ports as $port) {
        echo "
        <div class='panel panel-default'>

            <div class='panel-heading'>Clients Online last 48 Hours ($ip:$port)</div>

            <div id='$port' class='panel-body'></div>

        </div>";
    }
?>
  <script type='text/javascript'> 
  var ports = <?php echo json_encode($ports); ?>;
  $.each(ports, function(i, item) {
  $.getJSON('https://api.planetteamspeak.com/serverhistory/<?=$ip?>:' + item + '?duration=2', function(json)
  {
    if(json.status == 'success')
    {
        var onl = [];
        var off = [];
      
        for(var key in json.result.data)
        {
            var time = (moment(key).unix())*1000;

            if(json.result.data[key] !== -1)
            {
              onl[onl.length] = [time, json.result.data[key]];
              off[off.length] = [time, null];
            }
            else
            {
              onl[onl.length] = [time, 0];
              off[off.length] = [time, 0];
            }
        }
      
        $('#' + item).highcharts({
            title: {
              text: null
            },
            subtitle: {
              text: null
            },
            legend: {
              enabled: false
            },
            tooltip: {
              shared:    false,
              formatter: function()
              {
                if(this.series.name === 'No Data')
                {
                  return '<b>No Usage Data Available</b><br />Either the TS3 Server was offline or did not report<br />to the master server at this time.';
                }
                else
                {
                  return '<b>' + Highcharts.dateFormat('%a, %d %b %Y %H:%M', this.x) + ' UTC</b><br />Users Online: ' + Highcharts.numberFormat(this.y, 0);
                }
              }
            },
            xAxis: {
              type: 'datetime',
              dateTimeLabelFormats: {
                month: '%e. %b',
                year: '%b'
              },
              title: {
                text: null
              }
            },
            yAxis: {
              title: {
                text: null
              }
            },
            series: [{
              type:      'area',
              name:      'Users Online',
              data:      onl
            },{
              type:      'area',
              name:      'No Data',
              data:      off
            }]
        });
    }
    else
    {
        $('#' + item).html('<span class="text-danger">' + json.result.message + '</span>');
    }
});
});
</script>
</div>
</body>
</html>

How to install connection history graph

Najsr