Highcharts test

by pythion

HTML

<link id="theme" rel="stylesheet" type="text/css" href="http://alteri.play.ai/style.css" title="theme">
<link id="theme" rel="stylesheet" type="text/css" href="http://alteri.play.ai/statsstyle.css" title="theme">
<link id="theme" rel="stylesheet" type="text/css" href="http://alteri.play.ai/profile.css" title="theme">
<link id="theme" rel="stylesheet" type="text/css" href="http://alteri.play.ai/css/awesomplete.css" title="theme">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="http://alteri.play.ai/css/tooltipster.bundle.min2.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<script type="text/javascript" src="http://alteri.play.ai/js/tooltipster.bundle.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-3d.js"></script>

<script src="http://alteri.play.ai/js/awesomplete.js"></script>
<script src="http://alteri.play.ai/js/tablesorter.js"></script>
<style>

</style>


<script>classArray = [{name:'Armsman', x:'29-47 (38.16%)', y:76},{name:'Eldritch', x:'24-14 (63.16%)', y:38},{name:'Bard', x:'18-10 (64.29%)', y:28},{name:'Sorcerer', x:'2-5 (28.57%)', y:7},{name:'Cabalist', x:'3-1 (75.00%)', y:4},{name:'Hero', x:'0-3 (0.00%)', y:3},{name:'Healer', x:'1-2 (33.33%)', y:3},{name:'Warden', x:'0-1 (0.00%)', y:1},];</script><title>Alteri Player Ron</title>

<body class=" hasGoogleVoiceExt">
<center>
<div class="hd">
<div id="hmenu-wpr">
  <ul id="hmenu" class="sf-menu sf-js-enabled sf-shadow">
	  <li style="border: none" id="topbutton">
		  <a href="/index.php" class="toplvl sf-with-ul" style="cursor: pointer; cursor: hand;" muse_scanned="true">BLOG</a>
	  </li>
	  <li id="topbutton">
		  <a href="/forum" class="toplvl sf-with-ul" style="cursor: pointer; cursor: hand;" muse_scanned="true">FORUM</a>
	  </li>			  
	  <li...

CSS

body{
background:black;
}

JavaScript

firstClass = 0;

$.tablesorter.addParser({ 
    id: 'averages', 
    is: function(s) { 
        return false; 
    }, 
    format: function(s) { 
        return s.substring(0,s.indexOf("(")).replace('p/m','').replace('μ','').replace(',','').replace('.','').replace('%',''); 
    }, 
    type: 'numeric' 
}); 

function loadClass(name, load)
{
	if (!load)
	{
		$.ajax({
			type: "GET",
			url: 'classinfo.php?c='+ name +'&n=Ron',
			dataType: "html",
			success: function(data)
			{
				if (data != "")
				{
					$('.historyTitle').html("<img src='./img/classes/" + name.toLowerCase() + ".png' style='height: 40px;vertical-align: top;top: -13px;position:relative;'></img> " +name + " Statistics <a style='color:#cecece;margin-right:4px;cursor:pointer;float:right' onclick=\"chart.getSelectedPoints()[0].firePointEvent(\'click\',\'\');\">✖</a>");
						$('#classData tr').fadeOut(300,function(){
							$(this).remove();
						});
						
						$('#loadedStats').hide();
						$('#historySeek').hide();
						$('#loadedClass').append(data);
						$('#loadedClass').fadeIn(300 ,function() { 
							if (firstClass == 0)
							{
								firstClass = 1;	
								$('#loadedClass').tablesorter({delayInit: 2000, sortList: [[1,1]], headers: {2: { sorter:'averages'},3: { sorter:'averages'},4: { sorter:'averages'},5: { sorter:'averages'},6: { sorter:'averages'},7: { sorter:'averages'}}}); //
							}
							$('#loadedClass').trigger('update');
							$('#loadedClass').trigger('sortReset');
							$("#loadedClass").trigger("sorton",[[[1,1]]]); 
						});
				}
			}
		});
	}
	else
	{
		$('.historyTitle').html("<i style='font-size:24px;text-shadow:1px 1px 5px black;' class='fa fa-history' aria-hidden='true'></i> Match History");
		$('#classData tr').fadeOut(300,function(){
			$(this).remove();
		});
		$('#loadedClass').hide();
		$('#historySeek').fadeIn(300);
		$('#loadedStats').fadeIn(300);
	}
}

i = 0;
function loadHistory(x)
{
	if (x < 0)
		x = 0;
	
		   $.ajax({
			type: "GET",
			url:...