Welcome to IOPWiki, Commander.
We are searching for new editors to keep track of Girls' Frontline 2 content, as well as veteran players to complete existing Girls' Frontline and Project Neural Cloud articles.
You can contribute without an account. Learn how to contribute and join our Discord server.

Widget:StatsGraph: Difference between revisions

Welcome to IOP Wiki. This website is maintained by the Girls' Frontline community and is free to edit by anyone.
Jump to navigation Jump to search
← Older edit
If fill or stroke present, skip setting graph-orange class
m Wrong variable
 
(5 intermediate revisions by the same user not shown)
Line 33: Line 33:
   svg.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", svgLinkNS);
   svg.setAttributeNS("http://www.w3.org/2000/xmlns/", "xmlns:xlink", svgLinkNS);
   svg.setAttribute('viewBox', "0 0 800 800");
   svg.setAttribute('viewBox', "0 0 800 800");
   svg.setAttribute('preserveAspectRatio', "none");
   svg.setAttribute('preserveAspectRatio', "xMidyMid meet");
  svg.setAttribute('width', "300px");
  svg.setAttribute('height', "auto");
   svg.setAttribute('version', "1.1");
   svg.setAttribute('version', "1.1");
    
    
Line 85: Line 87:
     var polygonParams = dataComplete[dataIdx];
     var polygonParams = dataComplete[dataIdx];
     var datapresentation = document.createElementNS(svgNS, 'polygon');
     var datapresentation = document.createElementNS(svgNS, 'polygon');
   
    if ('title' in polygonParams) {
      var title = document.createElementNS(svgNS, 'title');
      title.appendChild(document.createTextNode(polygonParams.title));
      datapresentation.appendChild(title);
    }
   
     if (('fill' in polygonParams) || ('stroke' in polygonParams)) {
     if (('fill' in polygonParams) || ('stroke' in polygonParams)) {
       if ('fill' in polygonParams) datapresentation.setAttribute('fill', polygonParams.fill);
       if ('fill' in polygonParams) datapresentation.setAttribute('fill', polygonParams.fill);
Line 95: Line 104:
      
      
     for (var labelIdx=0; labelIdx<polygonParams.data.length; labelIdx++) {
     for (var labelIdx=0; labelIdx<polygonParams.data.length; labelIdx++) {
      var polygonCornerData = polygonParams.data[labelIdx];
      var rotate = (-degreeSpacing * labelIdx * Math.PI) / 180;
     
       var label = document.createElementNS(svgNS, 'text');
       var label = document.createElementNS(svgNS, 'text');
      var rotate = (-degreeSpacing * labelIdx * Math.PI) / 180;
       label.setAttribute('x', -340*Math.sin(rotate));
       label.setAttribute('x', -340*Math.sin(rotate));
       label.setAttribute('y', -340*Math.cos(rotate));
       label.setAttribute('y', -340*Math.cos(rotate));
       label.appendChild(document.createTextNode(polygonParams.data[labelIdx].label));
      label.setAttribute('title', titleText);
       label.appendChild(document.createTextNode(polygonCornerData.label));
 
      var titleText = "" + polygonCornerData.min + " <= " + polygonCornerData.value + " <= " + polygonCornerData.max;
      var title = document.createElementNS(svgNS, 'title');
      title.appendChild(document.createTextNode(titleText));
      label.appendChild(title);
     
       gDrawing.appendChild(label);
       gDrawing.appendChild(label);
     }
     }

Latest revision as of 11:54, 13 December 2019

Documentation[view] [edit] [history] [purge]

Widget to create an SVG image containing a radar chart. It is configured with a JSON string.

Parameters

Parameter name Required? Default value Description
data Yes (n/a) A JSON String containing all values. Please make sure that
  • There are at least three different properties to show. Anything below won't display correctly.
  • Each property needs a Label, Min, Max and Current value.
    • Label may be an empty string.
    • Min may be 0.

See the testcases for examples how to configure the JSON string.

Usage

See the template's testcases:


Small graph using default colors
Wiki code 
{{#widget:StatsGraph
|data=[
  {
    "data": [
            { "label": "RoF", "min": 12, "max": 37, "value": 14 },
            { "label": "Acc", "min": 34, "max": 68, "value": 37 },
            { "label": "Dmg", "min": 9, "max": 12, "value": 11 }
          ]
  }
]}}
Main version
Sandbox version
Error in widget StatsGraph/sandbox: Unable to load template 'wiki:StatsGraph/sandbox'
Graph showing two graphs, second graph with different color
Wiki code 
{{#widget:StatsGraph
|data=[
  {
    "data": [
            { "label": "RoF", "min": 12, "max": 37, "value": 32 },
            { "label": "Acc", "min": 12, "max": 37, "value": 32 },
            { "label": "Dmg", "min": 12, "max": 37, "value": 32 }
          ]
  },
  {
    "fill": "blue",
    "stroke": "darkblue",
    "data": [
            { "label": "RoF", "min": 12, "max": 37, "value": 34 },
            { "label": "Acc", "min": 34, "max": 68, "value": 51 },
            { "label": "Dmg", "min": 9, "max": 12, "value": 9 }
          ]
  }
]}}
Main version
Sandbox version
Error in widget StatsGraph/sandbox: Unable to load template 'wiki:StatsGraph/sandbox'
Graph with more properties
Wiki code 
{{#widget:StatsGraph
|data=[
  {
    "data": [
            { "label": "RoF", "min": 12, "max": 37, "value": 14 },
            { "label": "Acc", "min": 34, "max": 68, "value": 37 },
            { "label": "Dmg", "min": 9, "max": 16, "value": 11 },
            { "label": "Dmg1", "min": 9, "max": 16, "value": 12 },
            { "label": "Dmg2", "min": 9, "max": 16, "value": 13 },
            { "label": "Dmg3", "min": 9, "max": 16, "value": 14 }
          ]
  }
]}}
Main version
Sandbox version
Error in widget StatsGraph/sandbox: Unable to load template 'wiki:StatsGraph/sandbox'
Retrieved from "http://iopwiki.com/index.php?title=Widget:StatsGraph&oldid=82911"