Módulo:Chart data/doc

Esta é a página de documentação para Módulo:Chart data

Isto é uma subpágina de documentação para Módulo:Chart data.

Contém informações de uso, categorias e outros conteúdos que não fazem parte do módulo original

Módulo:Chart data's a função main é invocada por Predefinição:Chart data.

Módulo:Chart data requer Module:Enum.

Módulo:Chart data requer Module:LibraryUtil.

Módulo:Chart data requer Module:Paramtest.

Módulo:Chart data requer Module:Rgba.

Módulo:Chart data é solicitado por Módulo:Drop rate calculator.

Helps create the json to generate charts using Chart.js v3 through MediaWiki:Gadget-Charts-core.js.

Este módulo é um módulo de apoio para ser usado por outros módulos; ele pode não ser projetado para ser invocado diretamente. See RuneScape:Lua/Helper modules for a full list and more information.

Módulo	Função	Tipo	Uso	Example
Chart data	`_main( args )`	table/chart	Turns a table/chart object into a json string.	Clique para ver local p = {} local chart = require( 'Module:Chart data' ) -- This chart can then be added to a page using {{Chart data\|<module name>\|pie}} or {{#Invoke:<module name>\|pie}} -- It could also further be used be another module/function function p.pie() local plot = chart.newChart{ type = 'pie' } plot:setDimensions( '40vw', nil, 400, nil, true ) -- Pie chart is always square plot.colorPallet = chart.colorPallets.green local labels = {} local set = plot:newDataSet() for i = 1, 6 do set:addDataPoint( math.floor( math.sqrt( i ) * 10 + 0.5 ) / 10 ) table.insert( labels, 'Value ' .. i ) end plot:addDataLabels( labels ) return plot end return p ------------------------------------------------------------- local p = {} local chart = require( 'Module:Chart data' ) function p.bar() local plot = chart.newChart{ type = 'bar' } :setDimensions( '40%', 600, 400, 400, true ) -- Settings can be chained :setXLabel( 'x axis label' ) :setYLabel( 'y axis label' ) for i = 1, 2 do local set = plot:newDataSet() for j = 1, 6 do set:addDataPoint( math.sqrt( i*j ) ) end set.label = 'Set ' .. i if i == 1 then set.color = chart.colorPallets.green[3] else set.color = chart.colorPallets.orange[3] end end local labels = {} for i = 1, 6 do table.insert( labels, 'Value ' .. i ) end plot:addDataLabels( labels ) return 'Some header text' .. plot -- Charts are automatically converted to strings when appended to another string end return p
	`convertToXYFormat( ys, [xs\|{}] )`	table, table	Converts the `ys` array into an array of `{x = n, y = y[n]}` tables. If `xs` is already partially filled it will use `{x = x[n], y = y[n]}` until all values in `xs` are used, then it will use `{x = n, y = y[n]}` again for the remaining values in `ys`.
	`generateXYFromFunc( func, start_x, end_x, [step\|1] )`	function, number, number, number	Returns an arry of `{x = n, y = fun(n)}` tables where n ranges from `start_x` to `end_x` in `step` increments. Be careful when using decimal `step` values as floating point error can cause the generator to stop one element too soon.
	`jagexInterpolation( low_chance, high_chance, start_level, end_level )`	number, number, number, number
	`newChart( [options] )`	table	Returns a new chart object. `options` is a table with options in the Chart.js format. Most options will be set automatically or will be set later with other functions if not already defined. Usually all you need to define here is the chart type e.g. `newChart{ type = 'scatter' }`. Check the modules documentation for more info.
	`chart:addDataSets( ... )`	table/dataSet object	Appends all given data sets to the `chart.data.datasets` table.
	`chart:addDataLabels( labels )`	table	Appends all items in `labels` to the `chart.data.labels` table.
	`chart:setDimensions( width, [height\|width], [minWidth\|400], [minHeight\|400], [resizable\|true] )`	number/string, number/string, number/string, number/string, boolean	Sets the dimensions of the chart. If a number is given to `width`, `height`, `minWidth` and `minHeight` it will be assumed you meant pixels. You can also use strings like `100%` to fill the available space, `60vw`/`60vh` to dynamically scale the simensions to the viewport size (i.e. 60vw = 60% of browser's window width). If `resizable` is true, the chart can be dragged by the lower right corner to change its size. If this function is not called the default values are width = 60vw, height = 60vh, minWidth = 400px, minHeight = 400px and resizable = true.
	`chart:setTitle( [text\|nil], [position\|'top'] )`	string, string	Sets the label title of the chart. A value of nil will remove the current title.
	`chart:setXLabel( [label\|nil] )`	string	Sets the label for the x axis. Only works on chart types 'line', 'bar', 'bubble' and 'scatter'. If used without arguments it will remove the current label.
	`chart:setYLabel( [label\|nil] )`	string	Sets the label for the y axis. Only works on chart types 'line', 'bar', 'bubble' and 'scatter'. If used without arguments it will remove the current label.
	`chart:setXLimits( [min\|nil], [max\|nil], [step\|nil] )`	number, number, number	Sets the start, stop and step size of the x axis. Any argument with a value of nil will remove that setting. Only works on chart types 'bubble' and 'scatter'.
	`chart:setYLimits( [min\|nil], [max\|nil], [step\|nil] )`	number, number, number	Sets the start, stop and step size of the y axis. Any argument with a value of nil will remove that setting. Only works on chart types 'line', 'bar', 'bubble' and 'scatter'.
	`chart:setRadialLimits( [min\|nil], [max\|nil], [step\|nil] )`	number, number, number	Sets the start, stop and step size of the r axis on polar plots. Any argument with a value of nil will remove that setting. Only works on chart types 'radar' and 'polarArea'.
	`chart:setXAxisType( [type\|nil] )`	string	Sets the axis type. Supported values are 'linear', 'logarithmic', 'category' and 'time'. If called without arguments it will reset back to the default value 'linear'. Only works on chart types 'bar', 'bubble', 'line' and 'scatter'.
	`chart:setYAxisType( [type\|nil] )`	string	Same as `chart:setXAxisType()` but for the y axis. Only works on chart types 'bar', 'bubble', 'line' and 'scatter'.
	`chart:showLegend( val )`	boolean	Hides the legend if `val` is `false`.
	`chart:setOptions( options )`	table	Sets options using Chart.js format but makes sure you only change the given settings and not accidentally delete already existing settings. i.e. using `chart:setOptions{ scales = {x = {max = 100}} }` while `{scales = {x = {min = 0}}}` already exists will result in `{scales = {x = {min = 0, max = 100}}}`.
	`chart:flipXY()`	N/A	Turn the bar chart into a horizontal one. Only has an effect on bar charts.
	`chart:debug()`	N/A	Pretty prints the internal structure since you can't use mw.logObject to do so.
	`chart:newDataSet( [options] )`	table	Returns a new dataSet object which is also automatically added to the chart datasets table.
	`dataSet:addData( data )`	table	Appends the values of `data` to the already existing data stored in the dataSet.data array. Using `dataset.data = data` will overwrite any stored data.
	`dataSet:addDataPoint( data )`	number/table	Append a single value to the `dataSet.data` array. Same as `table.insert( dataSet.data, data )`.
	`dataSet:setOptions( options )`	table	Sets options using Chart.js format.
	`dataSet:done()`	N/A	Returns the parent chart object again.

Índice

1 Usage

Usage

To create a chart we need to create JSON in a format described by chart.js. To make this a bit easier we can write a lua table instead which is then converted to a JSON using chart._main(). An example of this is Module:Chart data/xp chart, which can then be displayed on a page using {{Chart data|Chart data/xp chart|height=40vh|width=40vw}} resulting in:

{"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},{"data":[{"y":0,"x":1},{"y":830,"x":2},{"y":1861,"x":3},{"y":2902,"x":4},{"y":3980,"x":5},{"y":5126,"x":6},{"y":6390,"x":7},{"y":7787,"x":8},{"y":9400,"x":9},{"y":11275,"x":10},{"y":13605,"x":11},{"y":16372,"x":12},{"y":19656,"x":13},{"y":23546,"x":14},{"y":28138,"x":15},{"y":33520,"x":16},{"y":39809,"x":17},{"y":47109,"x":18},{"y":55535,"x":19},{"y":64802,"x":20},{"y":77190,"x":21},{"y":90811,"x":22},{"y":106221,"x":23},{"y":123573,"x":24},{"y":143025,"x":25},{"y":164742,"x":26},{"y":188893,"x":27},{"y":215651,"x":28},{"y":245196,"x":29},{"y":277713,"x":30},{"y":316311,"x":31},{"y":358547,"x":32},{"y":404634,"x":33},{"y":454796,"x":34},{"y":509259,"x":35},{"y":568254,"x":36},{"y":632019,"x":37},{"y":700797,"x":38},{"y":774834,"x":39},{"y":854383,"x":40},{"y":946227,"x":41},{"y":1044569,"x":42},{"y":1149696,"x":43},{"y":1261903,"x":44},{"y":1381488,"x":45},{"y":1508756,"x":46},{"y":1644015,"x":47},{"y":1787581,"x":48},{"y":1939773,"x":49},{"y":2100917,"x":50},{"y":2283490,"x":51},{"y":2476369,"x":52},{"y":2679907,"x":53},{"y":2894505,"x":54},{"y":3120508,"x":55},{"y":3358307,"x":56},{"y":3608290,"x":57},{"y":3870846,"x":58},{"y":4146374,"x":59},{"y":4435275,"x":60},{"y":4758122,"x":61},{"y":5096111,"x":62},{"y":5449685,"x":63},{"y":5819299,"x":64},{"y":6205407,"x":65},{"y":6608473,"x":66},{"y":7028964,"x":67},{"y":7467354,"x":68},{"y":7924122,"x":69},{"y":8399751,"x":70},{"y":8925664,"x":71},{"y":9472665,"x":72},{"y":10041285,"x":73},{"y":10632061,"x":74},{"y":11245538,"x":75},{"y":11882262,"x":76},{"y":12542789,"x":77},{"y":13227679,"x":78},{"y":13937496,"x":79},{"y":14672812,"x":80},{"y":15478994,"x":81},{"y":16313404,"x":82},{"y":17176661,"x":83},{"y":18069395,"x":84},{"y":18992239,"x":85},{"y":19945833,"x":86},{"y":20930821,"x":87},{"y":21947856,"x":88},{"y":22997593,"x":89},{"y":24080695,"x":90},{"y":25259906,"x":91},{"y":26475754,"x":92},{"y":27728955,"x":93},{"y":29020233,"x":94},{"y":30350318,"x":95},{"y":31719944,"x":96},{"y":33129852,"x":97},{"y":34580790,"x":98},{"y":36073511,"x":99},{"y":37608773,"x":100},{"y":39270442,"x":101},{"y":40978509,"x":102},{"y":42733789,"x":103},{"y":44537107,"x":104},{"y":46389292,"x":105},{"y":48291180,"x":106},{"y":50243611,"x":107},{"y":52247435,"x":108},{"y":54303504,"x":109},{"y":56412678,"x":110},{"y":58575823,"x":111},{"y":60793812,"x":112},{"y":63067521,"x":113},{"y":65397835,"x":114},{"y":67785643,"x":115},{"y":70231841,"x":116},{"y":72737330,"x":117},{"y":75303019,"x":118},{"y":77929820,"x":119},{"y":80618654,"x":120},{"y":83370445,"x":121},{"y":86186124,"x":122},{"y":89066630,"x":123},{"y":92012904,"x":124},{"y":95025896,"x":125},{"y":98106559,"x":126},{"y":101255855,"x":127},{"y":104474750,"x":128},{"y":107764216,"x":129},{"y":111125230,"x":130},{"y":114558777,"x":131},{"y":118065845,"x":132},{"y":121647430,"x":133},{"y":125304532,"x":134},{"y":129038159,"x":135},{"y":132849323,"x":136},{"y":136739041,"x":137},{"y":140708338,"x":138},{"y":144758242,"x":139},{"y":148889790,"x":140},{"y":153104021,"x":141},{"y":157401983,"x":142},{"y":161784728,"x":143},{"y":166253312,"x":144},{"y":170808801,"x":145},{"y":175452262,"x":146},{"y":180184770,"x":147},{"y":185007406,"x":148},{"y":189921255,"x":149},{"y":194927409,"x":150}],"pointStyle":"crossRot","pointRadius":6,"label":"Elite skill","borderColor":"rgba(31,120,180,1)","showLine":true,"backgroundColor":"rgba(31,120,180,0.2)","fill":false}]},"options":{"maintainAspectRatio":false,"scales":{"y":{"scaleLabel":{"display":true,"labelString":"Experience"}},"x":{"scaleLabel":{"display":true,"labelString":"Level"}}},"tooltips":{"mode":"x","intersect":false,"position":"nearest"}}}

To make the construction of this table a bit easier, the chart class is provided which internally has the extact same structure as if we manually created the table. The chart class just sets a bunch of default settings based on what chart type you are creating; it also makes it a lot easier to deal with the colors of your data and provides a bunch of functions to easily set axis labels, axis start and stop values, axis type, etc.

Create new chart object

local chart = require( 'Module:Chart data' )

local plot = chart.newChart{ type = 'scatter' } -- If no type is given it will default to 'scatter'
plot.fill = true -- Show background, exact behaviour depends on chart type

-- The above two lines are equivalent to
local plot = chart.newChart{ type = 'scatter', fill = true }

Chaining functions

local plot = chart.newChart()
    :setDimensions( '40vh', '50vw', '400px', '400px', true )
    :setTitle( 'My title' )
    
-- Or
local plot = chart.newChart()
plot:setDimensions( '40vh', '50vw', '400px', '400px', true )
plot:setTitle( 'My title' )

Datasets

local plot = chart.newChart()

local dataSet = plot:newDataSet() -- This data set is already added to plot so you don't need to use plot:addDataSets( dataSet )
dataSet.data = chart.generateXYFromFunc( ... )
dataSet:addDataPoint( { x=5, y=10} ) -- Append another data point to the already existing data
dataSet:setOptions{ fill = true }

-- Or
plot:newDataSet{ data = chart.generateXYFromFunc( ... ), fill = true }
    :addDataPoint( { x=5, y=10 } )

You can also add datasets that you created somewhere else. The downside is that you then can't use addData/addDataPoint/setOptions functions on that set.

local set = chart.generateXYFromFunc( ... )

plot:addDataSets( set )

Datasets can also chain functions

local plot = chart.newChart()
    :newDataSet{ data = myDataSet }
        :addDataPoint( { x=5, y=10 } )
    :done()
    :newDataSet{ data = anotherDataSet }:done()

Color pallets

chart.colorPallets has a few pre-defined color pallets. These pallets are made up of Module:Rgba objects. They also have a metatable set which allows them to automatically use the next color pallet in case the current pallet has less colors than your number of datasets.

You can set your prefered pallet for your chart with myChart.colorPallet = chart.collorPallets.blue, in case of chart type bar of horizontalbar your can also set it per data set myDataSet.colorPallet = chart.collorPallets.orange or if you want all bars of a given set to be the same color myDataSet.color = chart.collorpallets.orange[3].

It is possible to define your own color pallet as an array of Module:Rgba objects.

The chart class has the following color opions:

backgroundAlpha - sets the rgba:fade() value for background colors.
hoverLightenValue - sets the rgba:lighten() value for when you hover over a data point.
hoverAlpha - sets the rgba:fade() value for when you hover over a data point.
hoverSaturateValue - sets the rgba:saturate() value for when you hover over a data point.

Their default value depend on the cart type but you can manually set them using:

chart:setOptions{
    backgroundAlpha = <number>,
    hoverLightenValue = <number>,
    hoverAlpha = <number>,
    hoverSaturateValue = <number>
}