Widget:StatsGraph

Revision as of 15:48, 1 October 2019 by Messing with data (talk | contribs) (Initial setup for testing)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

<script>function getRadianForAttribute(attr) {

 if (attr == 1) return -60;
 if (attr == 2) return -120;
 if (attr == 3) return -180;
 if (attr == 4) return -240;
 if (attr == 5) return -300;
 return 0;

}

function calcCoordinate(attr, min, max, val) {

 var oldX = 0;
 var oldY = (max-min) == 0 ? 0 : (300 / (max-min)) * (val - min);
 
 if (attr == 0) {
   return [oldX, Math.floor(oldY)];
 }
 
 var rotate = (getRadianForAttribute(attr) * Math.PI) / 180;
 
 var newX = oldX*Math.cos(rotate)+oldY*Math.sin(rotate);
 var newY = oldY*Math.cos(rotate)+oldX*Math.sin(rotate);
 return [Math.floor(newX), Math.round(newY)];

}

function buildPolygonString() {

 var data = [[ 11,  16,  15], // Acc
             [ 52,  90,  71], // Eva
             [ 23,  35,  32], // Dmg
             [141, 238, 194], // HP
             [ 64, 101,  93], // RoF
             [ 12,  12,  12]];// Mov
 var ret = "";
 for (var i=0;i<6;i++) {
   var coord = calcCoordinate(i, data[i][0], data[i][1], data[i][2]);
   ret += coord[0] + "," + coord[1] + " ";
 }
 ret = ret.trim();
 return ret;

}

function buildGraph(graphId) {

 var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
 var svgNS = svg.namespaceURI;
 var rect = document.createElementNS(svgNS,'rect');
   rect.setAttribute('x',5);
   rect.setAttribute('y',5);
   rect.setAttribute('width',500);
   rect.setAttribute('height',500);
   rect.setAttribute('fill','#95B3D7');
   svg.appendChild(rect);
 document.getElementById(graphId).appendChild(svg);

}</script>

<script>buildGraph();</script>