Simple REST API History Example

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/4.1.7/highcharts.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/moment.js/2.10.3/moment.min.js"></script>
<div class="container">
    
    <h1>TS3 Server History</h1>
    
    <div class="panel panel-default">
      <div class="panel-heading">Clients Online last 48 Hours</div>
      <div id="history" class="panel-body"></div>
    </div>
    
</div>

CSS

/**
 * Simple REST API History Example
 * -------------------------------
 * When your TeamSpeak 3 Server is reporting 
 * to the official server list, this feature 
 * does not require any configuration by the 
 * server administrator.
 */

JavaScript

$.getJSON('https://api.planetteamspeak.com/serverhistory/82.211.30.15/?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];
            }
        }
        
        $('#history').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:    ...