Difference between revisions of "Template:NVD3Chart"

From Granblue Fantasy Wiki
Jump to navigation Jump to search
m
m
Line 5: Line 5:
 
  data-chart-width="{{{width|}}}"
 
  data-chart-width="{{{width|}}}"
 
  data-chart-height="{{{height|}}}"
 
  data-chart-height="{{{height|}}}"
><div class="alt-text">{{{alt|}}}</div><div>{{{data|}}}</div></div></onlyinclude></includeonly>
+
><span class="alt-text">{{{alt|}}}</span>{{{data|}}}</div></onlyinclude></includeonly>
 
{{Documentation}}
 
{{Documentation}}

Revision as of 22:24, 8 December 2019

Template documentation follows
Note: the template above may sometimes be partially or fully invisible.
Visit Template:NVD3Chart/doc to edit this documentation. (How does this work?)
{{NVD3Chart
|xAxis=X Axis Label
|yAxis=Y Axis Label
|option=Extra options for the chart. (optional)
|chart=The type of chart to be used. (line/bar) (optional. Defaults to line)
|width=(CSS) Width of the chart, including units
|height=(CSS) Height of the chart, including units
|alt=Wikitext displayed to visitors without JS
|xFormat=D3 format string used to format x axis ticks (optional) 
|yFormat=D3 format string used to format y axis ticks (optional)
|yAxisWidth=number of pixels reserved for the y axis ticks + axis label (optional)
|xGrid=List of x-values where the vertical (|) grid lines will be placed (optional)
|yGrid=List of y-values where the horizontal (--) grid lines will be placed (optional)
|data=
  {{NVD3Series
   |label=Series label
   |color=(CSS) Line color
   |area=Shade the area between this line and the X axis? (yes/no)
   |chartDataX=Comma-separated list of X values
   |chartDataY=Comma-separated list of Y values
   |alt=Wikitext displayed to visitors without JS
  }}
  {{NVD3Series
   |label=Series label
   |color=(CSS) Line color
   |area=Shade the area between this line and the X axis? (yes/no)
   |linear-interpolation=list of pairs of X Y values
   |alt=Wikitext displayed to visitors without JS
  }}
}}
// [...] At the end of the page:
{{#widget:NVD3JS}}

Formatting

The xFormat and yFormat accepts the following inputs:

Input Note Sample
daystime Assumes the data is in terms of minutes passed.
Formats it into a series of what day and time it is.
Each day has 1440 Minutes and the time is then determined from it.
  • 1230 is turned into Day 1, 20:30 (08:30 PM)
  • 1441 is turned into Day 2, 00:01 (12:01 AM)
teamraid Used for imported Unite and Fight data from http://info.gbfteamraid.fun
Assumes the input is in seconds passed and adds 19 hours
Uses the same formatting as daystime.
(d3 format string) Treats the input as a format string and is passed into the d3 format method.
Read more on d3 format HERE.
  • .04s is used to describe a 4 digit string representation of a floating point
  • ,d is used to describe an integer with commas
(nothing) This is the default behavior.
Uses the d3 format method
  • xFormat defaults to ,r
  • yFormat defaults to ,.02f

Sample Usage

Line Chart

  • The default chart type
Wikitext displayed to visitors without JS
 

Bar Chart

  • Note: Stacked option only appears if the datasets have the same length.
    • Use option=1 to default to Stacked mode (if available)
Wikitext displayed to visitors without JS
Wikitext displayed to visitors without JS