Template:Chart data
Chart data is a template that displays a chart on a wiki page, using Chart.js through MediaWiki:Gadget-Charts-core.js.
While you can construct the JSON for the script yourself, this template is intended to make constructing it easier by providing the wrapper and allowing you to write the configuration in lua.
Usage
{{Chart data|module name|width=width of chart|height=height of chart}}
The module name (Module: optional) is the name of a data module that returns the full configuration of the chart as a mw.loadData-compatible table. Chart data will then load that module and encode it into JSON with mw.text.jsonEncode.
Optional parameters height and width can be used to specify the height and width of the chart, using any unit. Ideally these should try to avoid fixed widths (px) and use relative units instead (%, vh, vw).
Example
{{Chart data|Chart data/xp chart|width=40vw|height=40vh}}
This will load Module:Chart data/xp chart and provide 40vw width and 40vh height.
{"type":"scatter","data":{"datasets":[{"data":[{"y":0,"x":1},{"y":83,"x":2},{"y":174,"x":3},{"y":276,"x":4},{"y":388,"x":5},{"y":512,"x":6},{"y":650,"x":7},{"y":801,"x":8},{"y":969,"x":9},{"y":1154,"x":10},{"y":1358,"x":11},{"y":1584,"x":12},{"y":1833,"x":13},{"y":2107,"x":14},{"y":2411,"x":15},{"y":2746,"x":16},{"y":3115,"x":17},{"y":3523,"x":18},{"y":3973,"x":19},{"y":4470,"x":20},{"y":5018,"x":21},{"y":5624,"x":22},{"y":6291,"x":23},{"y":7028,"x":24},{"y":7842,"x":25},{"y":8740,"x":26},{"y":9730,"x":27},{"y":10824,"x":28},{"y":12031,"x":29},{"y":13363,"x":30},{"y":14833,"x":31},{"y":16456,"x":32},{"y":18247,"x":33},{"y":20224,"x":34},{"y":22406,"x":35},{"y":24815,"x":36},{"y":27473,"x":37},{"y":30408,"x":38},{"y":33648,"x":39},{"y":37224,"x":40},{"y":41171,"x":41},{"y":45529,"x":42},{"y":50339,"x":43},{"y":55649,"x":44},{"y":61512,"x":45},{"y":67983,"x":46},{"y":75127,"x":47},{"y":83014,"x":48},{"y":91721,"x":49},{"y":101333,"x":50},{"y":111945,"x":51},{"y":123660,"x":52},{"y":136594,"x":53},{"y":150872,"x":54},{"y":166636,"x":55},{"y":184040,"x":56},{"y":203254,"x":57},{"y":224466,"x":58},{"y":247886,"x":59},{"y":273742,"x":60},{"y":302288,"x":61},{"y":333804,"x":62},{"y":368599,"x":63},{"y":407015,"x":64},{"y":449428,"x":65},{"y":496254,"x":66},{"y":547953,"x":67},{"y":605032,"x":68},{"y":668051,"x":69},{"y":737627,"x":70},{"y":814445,"x":71},{"y":899257,"x":72},{"y":992895,"x":73},{"y":1096278,"x":74},{"y":1210421,"x":75},{"y":1336443,"x":76},{"y":1475581,"x":77},{"y":1629200,"x":78},{"y":1798808,"x":79},{"y":1986068,"x":80},{"y":2192818,"x":81},{"y":2421087,"x":82},{"y":2673114,"x":83},{"y":2951373,"x":84},{"y":3258594,"x":85},{"y":3597792,"x":86},{"y":3972294,"x":87},{"y":4385776,"x":88},{"y":4842295,"x":89},{"y":5346332,"x":90},{"y":5902831,"x":91},{"y":6517253,"x":92},{"y":7195629,"x":93},{"y":7944614,"x":94},{"y":8771558,"x":95},{"y":9684577,"x":96},{"y":10692629,"x":97},{"y":11805606,"x":98},{"y":13034431,"x":99},{"y":14391160,"x":100},{"y":15889109,"x":101},{"y":17542976,"x":102},{"y":19368992,"x":103},{"y":21385073,"x":104},{"y":23611006,"x":105},{"y":26068632,"x":106},{"y":28782069,"x":107},{"y":31777943,"x":108},{"y":35085654,"x":109},{"y":38737661,"x":110},{"y":42769801,"x":111},{"y":47221641,"x":112},{"y":52136869,"x":113},{"y":57563718,"x":114},{"y":63555443,"x":115},{"y":70170840,"x":116},{"y":77474828,"x":117},{"y":85539082,"x":118},{"y":94442737,"x":119},{"y":104273167,"x":120},{"y":115126838,"x":121},{"y":127110260,"x":122},{"y":140341028,"x":123},{"y":154948977,"x":124},{"y":171077457,"x":125},{"y":188884740,"x":126}],"label":"Standard skill","borderColor":"rgba(166,206,227,1)","showLine":true,"backgroundColor":"rgba(166,206,227,0.2)","fill":false}]},"options":{"maintainAspectRatio":false,"scales":{"y":{"ticks":{"beginAtZero":true},"scaleLabel":{"display":true,"labelString":"Experience"}},"x":{"ticks":{"beginAtZero":true},"scaleLabel":{"display":true,"labelString":"Level"}}},"tooltips":{"mode":"x","intersect":false,"position":"nearest"}}}Constructing a chart
Data for a chart can be stored in any module - using a subpage of Module:Chart data (eg Module:Chart data/xp chart) is a convenient place if no other location is appropriate.
The returned table has three main fields in the top level table: type, which specifies the chart type; data which specifies all the data used in the chart; and options which spcifies any other configuration used in the chart. One should refer to the full Chart.js documentation for all possible options - everything except function types are supported.
Common things to change
- Change axes labels
The axes labels are found in key options.scales.xAxes[#].scaleLabel.labelString. xAxes and yAxes are arrays, so you can set separate labels for each axis. You may also need to set ...scaleLabel.display = true to make the labels show up.
- Change tooltips
Tooltip options are in key options.tooltips, with the full config options available here.
- Change labels colours of datasets
Dataset options are found under key data.datasets[#], and can (and should) be different per dataset. Labels are set with the label field. You can set the backgroundColor and borderColor options separately, and you may need to set showLine=true and/or fill=false.
Be careful when choosing colours so that they work in both light and dark mode adequetely (use the pre-provided colour schemes).
If you have a number of lines, you should considerhaving some of them be dashed lines (borderDash option).
Helper functions
Module:Chart data provides several helper functions for creating charts.
convertToXYFormat(y, [x])
Provide this function with either just an array of y-values, or with both an array of y- and x-values. It will construct the Point-style data array for use with line and scatter charts.
If no x-value array is provided, the y-values will be paired with their index (beginning at 1).
generateXYFromFunc(func, start_x, end_x, [step])
This will generate Point-style data using the provided function, where y=func(x). Data is generated for x from start_x to end_x by step (default step is 1 if not specified).
jagexInterpolation(low_chance, high_chance, start_level, end_level)
This will interpolate values for skilling chances using the same function as Jagex, using the specified low_chance and high_chance, from start_level to end_level by step size 1. This is a specialised version of generateXYFromFunc.
- Colours
5 preset colours are specified by the colors (or colours) array, which each element has a bg and bd key specified which are suggested colours to use for datasets. If you need more than 5 datasets, consider using dashed lines, changing point style, or similar (or multiple things). See Module:Chart data/test chart for an example config which generates this chart:
{"type":"scatter","data":{"datasets":[{"data":[{"y":0.1,"x":1},{"y":1.1,"x":11},{"y":2.1,"x":21},{"y":3.1,"x":31},{"y":4.1,"x":41},{"y":5.1,"x":51},{"y":6.1,"x":61},{"y":7.1,"x":71},{"y":8.1,"x":81},{"y":9.1,"x":91}],"label":"line 1","borderColor":"rgba(166,206,227,1)","showLine":true,"backgroundColor":"rgba(166,206,227,0.2)","fill":false},{"data":[{"y":0.2,"x":1},{"y":2.2,"x":11},{"y":4.2,"x":21},{"y":6.2,"x":31},{"y":8.2,"x":41},{"y":10.2,"x":51},{"y":12.2,"x":61},{"y":14.2,"x":71},{"y":16.2,"x":81},{"y":18.2,"x":91}],"label":"line 2","borderColor":"rgba(31,120,180,1)","showLine":true,"backgroundColor":"rgba(31,120,180,0.2)","fill":false},{"data":[{"y":0.5,"x":1},{"y":5.5,"x":11},{"y":10.5,"x":21},{"y":15.5,"x":31},{"y":20.5,"x":41},{"y":25.5,"x":51},{"y":30.5,"x":61},{"y":35.5,"x":71},{"y":40.5,"x":81},{"y":45.5,"x":91}],"label":"line 3","borderColor":"rgba(178,223,138,1)","showLine":true,"backgroundColor":"rgba(178,223,138,0.2)","fill":false},{"data":[{"y":1,"x":1},{"y":11,"x":11},{"y":21,"x":21},{"y":31,"x":31},{"y":41,"x":41},{"y":51,"x":51},{"y":61,"x":61},{"y":71,"x":71},{"y":81,"x":81},{"y":91,"x":91}],"label":"line 4","borderColor":"rgba(51,160,44,1)","showLine":true,"backgroundColor":"rgba(51,160,44,0.2)","fill":false},{"data":[{"y":1.5,"x":1},{"y":16.5,"x":11},{"y":31.5,"x":21},{"y":46.5,"x":31},{"y":61.5,"x":41},{"y":76.5,"x":51},{"y":91.5,"x":61},{"y":106.5,"x":71},{"y":121.5,"x":81},{"y":136.5,"x":91}],"label":"line 5","borderColor":"rgba(251,154,153,1)","showLine":true,"backgroundColor":"rgba(251,154,153,0.2)","fill":false},{"pointRadius":5,"label":"line 6","showLine":true,"pointStyle":"triangle","borderDash":[5,5],"borderColor":"rgba(166,206,227,1)","data":[{"y":2,"x":1},{"y":22,"x":11},{"y":42,"x":21},{"y":62,"x":31},{"y":82,"x":41},{"y":102,"x":51},{"y":122,"x":61},{"y":142,"x":71},{"y":162,"x":81},{"y":182,"x":91}],"backgroundColor":"rgba(166,206,227,0.2)","fill":false},{"pointRadius":5,"label":"line 7","showLine":true,"pointStyle":"triangle","borderDash":[5,5],"borderColor":"rgba(31,120,180,1)","data":[{"y":3,"x":1},{"y":33,"x":11},{"y":63,"x":21},{"y":93,"x":31},{"y":123,"x":41},{"y":153,"x":51},{"y":183,"x":61},{"y":213,"x":71},{"y":243,"x":81},{"y":273,"x":91}],"backgroundColor":"rgba(31,120,180,0.2)","fill":false},{"pointRadius":5,"label":"line 8","showLine":true,"pointStyle":"triangle","borderDash":[5,5],"borderColor":"rgba(178,223,138,1)","data":[{"y":4,"x":1},{"y":44,"x":11},{"y":84,"x":21},{"y":124,"x":31},{"y":164,"x":41},{"y":204,"x":51}],"backgroundColor":"rgba(178,223,138,0.2)","fill":false},{"pointRadius":5,"label":"line 9","showLine":true,"pointStyle":"triangle","borderDash":[5,5],"borderColor":"rgba(51,160,44,1)","data":[{"y":5,"x":1},{"y":55,"x":11},{"y":105,"x":21},{"y":155,"x":31},{"y":205,"x":41}],"backgroundColor":"rgba(51,160,44,0.2)","fill":false},{"pointRadius":5,"label":"line 10","showLine":true,"pointStyle":"triangle","borderDash":[5,5],"borderColor":"rgba(251,154,153,1)","data":[{"y":100,"x":1},{"y":100,"x":11},{"y":100,"x":21},{"y":100,"x":31},{"y":100,"x":41},{"y":100,"x":51},{"y":100,"x":61},{"y":100,"x":71},{"y":100,"x":81},{"y":100,"x":91}],"backgroundColor":"rgba(251,154,153,0.2)","fill":false}]},"options":{"maintainAspectRatio":false,"scales":{"xAxes":[{"scaleLabel":{"display":true,"labelString":"x"}}],"yAxes":[{"scaleLabel":{"display":true,"labelString":"y"}}]},"tooltips":{"mode":"x","intersect":false,"position":"nearest"}}}If you are using a bar chart or similar and you need more colours, consider using one of the following to get some new colours for datasets. Make sure to preview your chart in both light and dark mode to make sure it is still viewable in both.