Check out Sunborn's two newly announced games (official English titles pending): Girls' Frontline: Blue Butterfly Contract and Reverse Collapse: F !
You don't need an account to join in. Learn how to contribute, browse Bounties 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
m Moved scope of 'currentScript'
m Don't mind me, I'm a bit desperate
Line 1: Line 1:
<includeonly><div class="stats-graph-container"><script>
<includeonly><div class="stats-graph-container"><script>var targetContainer = document.currentScript.parentNode;
RLQ.push(['ext.gadget.md5hasher', function () {
RLQ.push(['ext.gadget.md5hasher', function () {
   var targetContainer = document.currentScript.parentNode;
   var rlqScopeTargetContainer = targetContainer;
   $(document).ready(function() {
   $(document).ready(function() {
    var jqScopeTargetContainer = rlqScopeTargetContainer;
     var graphData = JSON.parse(`<!--{$data|escape:'html'}-->`.replace(/&quot;/gi, '"'));
     var graphData = JSON.parse(`<!--{$data|escape:'html'}-->`.replace(/&quot;/gi, '"'));
     window.iopwidgets.StatsGraph.buildGraph(graphData, targetContainer);
     window.iopwidgets.StatsGraph.buildGraph(graphData, jqScopeTargetContainer);
   });
   });
}]);</script></div></includeonly><noinclude>{{Documentation}}</noinclude>
}]);</script></div></includeonly><noinclude>{{Documentation}}</noinclude>

Revision as of 19:27, 19 July 2025

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'