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
Jump to navigation
Jump to search
m Maybe without "nowiki" tags? |
Some changes for parsing JSON Data |
||
| Line 27: | Line 27: | ||
} | } | ||
function buildGraph(graphId, | function buildGraph(graphId, dataComplete) { | ||
var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); | var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); | ||
var svgNS = svg.namespaceURI; | var svgNS = svg.namespaceURI; | ||
| Line 35: | Line 35: | ||
svg.setAttribute('preserveAspectRatio', "none"); | svg.setAttribute('preserveAspectRatio', "none"); | ||
svg.setAttribute('version', "1.1"); | svg.setAttribute('version', "1.1"); | ||
console.log( | console.log(dataComplete); | ||
/* Inline styling; maybe export to common.css? */ | /* Inline styling; maybe export to common.css? */ | ||
var style = document.createElementNS(svgNS, 'style'); | var style = document.createElementNS(svgNS, 'style'); | ||
| Line 82: | Line 82: | ||
gDrawing.setAttribute('transform', 'translate(400 400)'); | gDrawing.setAttribute('transform', 'translate(400 400)'); | ||
var degreeSpacing = 360 / | var firstData = dataComplete[0]; | ||
for (var dataIdx=0; dataIdx< | var degreeSpacing = 360 / firstData.length; | ||
for (var dataIdx=0; dataIdx<firstData.length; dataIdx++) { | |||
var propertyLine = document.createElementNS(svgNS, 'use'); | var propertyLine = document.createElementNS(svgNS, 'use'); | ||
propertyLine.setAttributeNS(svgLinkNS, "href", "#wedge"); | propertyLine.setAttributeNS(svgLinkNS, "href", "#wedge"); | ||
propertyLine.setAttribute('transform', "rotate(" + (degreeSpacing * dataIdx) + ")"); | propertyLine.setAttribute('transform', "rotate(" + (degreeSpacing * dataIdx) + ")"); | ||
gDrawing.appendChild(propertyLine ); | gDrawing.appendChild(propertyLine ); | ||
} | |||
for (var dataIdx=0; dataIdx<dataComplete.length; dataIdx++) { | |||
var data = dataComplete[dataIdx]; | |||
var datapresentation = document.createElementNS(svgNS, 'polygon'); | |||
datapresentation.setAttribute('class', data.class); | |||
datapresentation.setAttribute('fill', 'orange'); | |||
datapresentation.setAttribute('fill-opacity', 0.5); | |||
datapresentation.setAttribute('points', buildPolygonString(data)); | |||
gDrawing.appendChild(datapresentation); | |||
} | } | ||
svg.appendChild(gDrawing); | svg.appendChild(gDrawing); | ||
| Line 102: | Line 107: | ||
} | } | ||
var graphData = JSON.parse('<!--{$data|escape:'html'}-->'); | var graphData = JSON.parse('<!--{$data|escape:'html'}-->'.replace('"', '"'); | ||
buildGraph("<!--{$graphId|escape:'html'}-->", graphData);</script></includeonly><noinclude>{{#widget:StatsGraph | buildGraph("<!--{$graphId|escape:'html'}-->", graphData);</script></includeonly><noinclude>{{#widget:StatsGraph | ||
|graphId=singleStatsGraph | |graphId=singleStatsGraph | ||