How to install connection history graph

skreww · Aug 28, 2017

Hi all !

I would like to install this API ( client connection history 48h graphic ) on my website, but i don't have found a solution yet : https://jsfiddle.net/3gn1ak87/106/

Some one can help me ? and show me how to do it ?

Kieran · Aug 28, 2017

skreww said:
Hi all !

I would like to install this API ( client connection history 48h graphic ) on my website, but i don't have found a solution yet : https://jsfiddle.net/3gn1ak87/106/

Some one can help me ? and show me how to do it ?

Uhm, you literally just change the first line. Change the IP in

Code:

$.getJSON('https://api.planetteamspeak.com/serverhistory/84.200.62.248/?duration=2', function(json)

to your server IP.

Then just copy paste the code to your website.

Najsr · Aug 28, 2017

On the jsfiddle page on the left side of the page there is a tab called 'External Resources', you need to include them in <head></head> part of your page.

Kieran · Aug 28, 2017

Nicer said:
On the jsfiddle page on the left side of the page there is a tab called 'External Resources', you need to include them in <head></head> part of your page.

Oh that's what he meant, lol.

skreww · Aug 28, 2017

Ok any idies if i want to show client not only from one ts server but for all ts i got ?
and for the java script ? where i put it ?

Najsr · Aug 28, 2017

https://www.w3schools.com/tags/att_script_src.asp This is what you are looking for, put it in 'head' part of your site

skreww · Aug 28, 2017

i'v try this but didn't work

PHP:

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"></script>
    <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/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>

Najsr · Aug 28, 2017

Code:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

For css files, also make sure you allow all the scrips for example if you have ScriptSafe or similar addons in your browser installed

skreww · Aug 28, 2017

ok thanks for this, but i don't got the data i send you my code.

PHP:

<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/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>
<div class="container">
   
    <h1>TS3 Server History</h1>
   
    <div class="panel panel-default">
      <div class="panel-heading">Clients Online last 48 Hours</div>

  <script type='text/javascript'>    $.getJSON('https://api.planetteamspeak.com/serverhistory/--REMOVED--:9987?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:      'No Data',
              data:      off
            }]
        });
    }
    else
    {
        $('#history').html('<span class="text-danger">' + json.result.message + '</span>');
    }
});
</script>
      <div id="history" class="panel-body"></div>
    </div>

</html>

Mod edit: removed ip address

Najsr · Aug 28, 2017

There was jQuery missing. This code bellow works for me

HTML:

<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">
   
    <h1>TS3 Server History</h1>
   
    <div class="panel panel-default">
      <div class="panel-heading">Clients Online last 48 Hours</div>

  <script type='text/javascript'>  
  $.getJSON('https://api.planetteamspeak.com/serverhistory/XXX:9987?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:      'No Data',
              data:      off
            }]
        });
    }
    else
    {
        $('#history').html('<span class="text-danger">' + json.result.message + '</span>');
    }
});
</script>
      <div id="history" class="panel-body"></div>
    </div>
</div>
</body>
</html>

skreww · Aug 28, 2017

thanks you very much budy ! Now, can you tell me how i do to see the stats of all my servers and not only one ?

skreww · Aug 28, 2017

Another questions : if i want to include $port on the url, how i do ?

PHP:

$.getJSON('https://api.planetteamspeak.com/serverhistory/--REMOVED--:9987?duration=2', function(json)

Najsr · Aug 28, 2017

Replace 9987 with your variable ($port). As simple as that

skreww · Aug 28, 2017

it will work on Javascript ? include a php on java ?

Najsr · Aug 28, 2017

you can do, but don't forget to sanitize that variable!

PHP:

var port = <?= $port ?>;

skreww · Aug 28, 2017

PHP:

$.getJSON('https://api.planetteamspeak.com/serverhistory/--REMOVED--:var port = <?= $port ?>;?duration=2', function(json)

I think i don't understand that all !

Najsr · Aug 28, 2017

I did not understand correctly, sorry. Just remove 'var port ='. Sanitization on $port variable should be applied!

skreww · Aug 30, 2017

it didn't work :/ i don't found the solution

Najsr · Aug 30, 2017

Here is a working example, just do for example nameoffile.php?port=1

PHP:

<?php 
if(isset($_GET['port'])) 
    $port = (int)$_GET['port'];
else 
    $port = 9987;
?>

<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">
   
    <h1>TS3 Server History (<?=$port?>)</h1>
   
    <div class="panel panel-default">
      <div class="panel-heading">Clients Online last 48 Hours</div>

  <script type='text/javascript'>    
  $.getJSON('https://api.planetteamspeak.com/serverhistory/myserver.com:<?=$port?>?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:      'No Data',
              data:      off
            }]
        });
    }
    else
    {
        $('#history').html('<span class="text-danger">' + json.result.message + '</span>');
    }
});
</script>
      <div id="history" class="panel-body"></div>
    </div>
</div>
</body>
</html>

skreww · Aug 30, 2017

it works, thank you do mutch, now do you known how i can have the graph for all the servers ?

How to install connection history graph

skreww

New Member

Kieran

Tag me

Najsr

Kieran

Tag me

skreww

New Member

Najsr

skreww

New Member

Najsr

skreww

New Member

Najsr

skreww

New Member

skreww

New Member

Najsr

skreww

New Member

Najsr

skreww

New Member

Najsr

skreww

New Member

Najsr

skreww

New Member