Module:Chart data/doc - Revision history

Alex: Created page with "{{documentation}} Helps create the json to generate charts using [https://www.chartjs.org/ Chart.js] through MediaWiki:Gadget-Charts-core.js. {{Helper module|name = Chart data |fname1 = _main( args ) |ftype1 = table/chart |fuse1 = Turns a table/chart object into a json string. |fname2 = convertToXYFormat( ys, [xs|{}] ) |ftype2 = table, table |fuse2 = Converts the `ys` array into an array of {x = n, y = y[n]} 2024-10-15T17:22:15Z Created page with "{{documentation}} Helps create the json to generate charts using [https://www.chartjs.org/ Chart.js] through MediaWiki:Gadget-Charts-core.js. {{Helper module|name = Chart data |fname1 = _main( args ) |ftype1 = table/chart |fuse1 = Turns a table/chart object into a json string. |fname2 = <nowiki>convertToXYFormat( ys, [xs|{}] )</nowiki> |ftype2 = table, table |fuse2 = Converts the <code>ys</code> array into an array of <code>{x = n, y = y[n]}</co..." New page {{documentation}} Helps create the json to generate charts using [https://www.chartjs.org/ Chart.js] through [[MediaWiki:Gadget-Charts-core.js]]. {{Helper module|name = Chart data |fname1 = _main( args ) |ftype1 = table/chart |fuse1 = Turns a table/chart object into a json string. |fname2 = <nowiki>convertToXYFormat( ys, [xs|{}] )</nowiki> |ftype2 = table, table |fuse2 = Converts the <code>ys</code> array into an array of <code>{x = n, y = y[n]}</code> tables. If <code>xs</code> is already partially filled it will use <code>{x = x[n], y = y[n]}</code> until all values in <code>xs</code> are used, then it will use <code>{x = n, y = y[n]}</code> again for the remaining values in <code>ys</code>. |fname3 = <nowiki>generateXYFromFunc( func, start_x, end_x, [step|1] )</nowiki> |ftype3 = function, number, number, number |fuse3 = Returns an array of <code>{x = n, y = fun(n)}</code> tables where n ranges from <code>start_x</code> to <code>end_x</code> in <code>step</code> increments. Be careful when using decimal <code>step</code> values as floating point error can cause the generator to stop one element too soon. |fname4 = <nowiki>jagexInterpolation( low_chance, high_chance, start_level, end_level )</nowiki> |ftype4 = number, number, number, number |fuse4 = |fname5 = <nowiki>newChart( [options] )</nowiki> |ftype5 = table |fuse5 = Returns a new chart object. <code>options</code> is a table with options in the [https://www.chartjs.org/ 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. <code>newChart{ type = 'scatter' }</code>. '''Check the modules documentation for more info'''. |fname6 = <nowiki>chart:addDataSets( ... )</nowiki> |ftype6 = table/dataSet object |fuse6 = Appends all given data sets to the <code>chart.data.datasets</code> table. |fname7 = <nowiki>chart:addDataLabels( labels )</nowiki> |ftype7 = table |fuse7 = Appends all items in <code>labels</code> to the <code>chart.data.labels</code> table. |fname8 = <nowiki>chart:setDimensions( width, [height|width], [minWidth|400], [minHeight|400], [resizable|false] )</nowiki> |ftype8 = number/string, number/string, number/string, number/string, boolean |fuse8 = Sets the dimensions of the chart. If a number is given to <code>width</code>, <code>height</code>, <code>minWidth</code> and <code>minHeight</code> it will be assumed you meant pixels. You can also use strings like <code>100%</code> to fill the available space, <code>40vw</code>/<code>40vh</code> to dynamically scale the simensions to the viewport size (i.e. 40vw = 40% of browser's window width). If <code>resizable</code> is true, the chart can be dragged by the lower right corner to change its size. |fname9 = <nowiki>chart:setTitle( [text|nil], [position|'top'] )</nowiki> |ftype9 = string, string |fuse9 = Sets the label title of the chart. A value of nil will remove the current title. |fname10 = <nowiki>chart:setXLabel( [label|nil] )</nowiki> |ftype10 = string |fuse10 = Sets the label for the x axis. Only works on chart types 'line', 'bar', 'horizontalBar', 'bubble' and 'scatter'. If used without arguments it will remove the current label. |fname11 = <nowiki>chart:setYLabel( [label|nil] )</nowiki> |ftype11 = string |fuse11 = Sets the label for the y axis. Only works on chart types 'line', 'bar', 'horizontalBar', 'bubble' and 'scatter'. If used without arguments it will remove the current label. |fname12 = <nowiki>chart:setXLimits( [min|nil], [max|nil], [step|nil] )</nowiki> |ftype12 = number, number, number |fuse12 = 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 'horizontalBar', 'bubble' and 'scatter'. |fname13 = <nowiki>chart:setYLimits( [min|nil], [max|nil], [step|nil] )</nowiki> |ftype13 = number, number, number |fuse13 = 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'. |fname14 = <nowiki>chart:setRadialLimits( [min|nil], [max|nil], [step|nil] )</nowiki> |ftype14 = number, number, number |fuse14 = 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'. |fname15 = <nowiki>chart:setXAxisType( [type|nil] )</nowiki> |ftype15 = string |fuse15 = 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 'bubble', 'scatter' and 'horizontalBar'. |fname16 = <nowiki>chart:setYAxisType( [type|nil] )</nowiki> |ftype16 = string |fuse16 = Same as <code>chart:setXAxisType()</code> but for the y axis. Only works on chart types 'line', 'bubble', 'scatter' and 'bar'. |fname17 = <nowiki>chart:setOptions( options )</nowiki> |ftype17 = table |fuse17 = Sets options using [https://www.chartjs.org/ Chart.js] format but makes sure you only change the given settings and not accidentally delete already existing settings. i.e. using <code><nowiki>chart:setOptions{ options = {scales = {ticks = {max = 100}}} }</nowiki></code> while <code><nowiki>{options = {scales = {ticks = {min = 0}}}}</nowiki></code> already exists will result in <code><nowiki>{options = {scales = {ticks = {min = 0, max = 100}}}}</nowiki></code>. |fname18 = <nowiki>chart:makeMwLoadDataCompatible()</nowiki> |ftype18 = N/A |fuse18 = Strips metatables so that it can be loaded by <code>mw.loadData()</code>making it possible to display the table using {{t|Chart data|<module name>}}. This should only be used at the very end when you are done creating your chart. |fname19 = <nowiki>chart:newDataSet( [options] )</nowiki> |ftype19 = table |fuse19 = Returns a new dataSet object which is also automatically added to the chart datasets table. |fname20 = dataSet:addData( data ) |ftype20 = table |fuse20 = Appends the values of <code>data</code> to the already existing data stored in the dataSet.data array. Using <code>dataset.data = data</code> will overwrite any stored data. |fname21 = dataSet:addDataPoint( data ) |ftype21 = number/table |fuse21 = Append a single value to the <code>dataSet.data</code> array. Same as <code>table.insert( dataSet.data, data )</code>. |fname22 = dataSet:setOptions( options ) |ftype22 = table |fuse22 = Sets options using [https://www.chartjs.org/ Chart.js] format. |example = <syntaxhighlight lang='lua'> local p = {} local chart = require( 'Module:Chart data' ) -- This chart can then be added to a page using {{Chart data|<module name>}} 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:makeMwLoadDataCompatible() end return p.pie() ------------------------------------------------------------- local p = {} local chart = require( 'Module:Chart data' ) -- This chart cound be used by another module or drawn using {{#Invoke:<module name>|bar}} function p.bar() local plot = chart.newChart{ type = 'bar' } plot:setDimensions( '40%', 600, 400, 400, true ) plot:setXLabel( 'x axis label' ) plot:setYLabel( 'y axis label' ) for i = 1, 2 do local set = plot:newDataSet() for j = 1, 6 do set:addDataPoint( math.sqrt( ij ) ) 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 plot end return p </syntaxhighlight> }} ==Usage== To create a chart we need to create JSON in a format described by [https://www.chartjs.org/docs/latest/charts/line.html chart.js]. To make this a bit easier we can write a lua table instead which is then converted to a JSON using <code>chart._main()</code>. An example of this is [[Module:Chart data/xp chart]], which can then be displayed on a page using {{t|Chart data|Chart data/xp chart|width=40vw|height=40vh}} resulting in: {{Chart data|Chart data/xp chart|width=40vw|height=40vh}} 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. ===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 preferred pallet for your chart with <code>myChart.colorPallet = chart.collorPallets.blue</code>, in case of chart type bar of horizontalbar your can also set it per data set <code>myDataSet.colorPallet = chart.collorPallets.orange</code> or if you want all bars of a given set to be the same color <code>myDataSet.color = chart.collorpallets.orange[3]</code>. It is possible to define your own color pallet as an array of [[Module:Rgba]] objects. The chart class has the following color opions: <code>backgroundAlpha</code> - sets the <code>rgba:fade()</code> value for background colors. * <code>hoverLightenValue</code> - sets the <code>rgba:lighten()</code> value for when you hover over a data point. * <code>hoverAlpha</code> - sets the <code>rgba:fade()</code> value for when you hover over a data point. * <code>hoverSaturateValue</code> - sets the <code>rgba:saturate()</code> value for when you hover over a data point. Their default value depend on the cart type but you can manually set them using: <pre> chart:setOptions{ backgroundAlpha = <number>, hoverLightenValue = <number>, hoverAlpha = <number>, hoverSaturateValue = <number> } </pre> <div style="display:flex;flex-wrap:wrap;align-items:center;"> <div> {{Chart data|Chart data/doc examples|colorQualitative}} {| class="wikitable mw-collapsible mw-collapsed" style="width:100%" |- |Code |- | {{t|Chart data|Chart data/doc examples|colorQualitative}} <syntaxhighlight lang="lua"> function p.colorQualitative() local plot = chart.newChart{ type = 'scatter' } plot:setDimensions( '10vw', '10vh', 300, 300, true ) plot:setTitle( 'Qualitative' ) plot.fill = false plot.colorPallet = chart.colorPallets.qualitative for i = 1, #plot.colorPallet do local set = plot:newDataSet() set.data = chart.generateXYFromFunc( function(x) return ix^2 end, 0, 50 ) set.label = 'Set ' .. i end return plot:makeMwLoadDataCompatible() end </syntaxhighlight> |} </div> <div> {{Chart data|Chart data/doc examples|colorBlue}} {| class="wikitable mw-collapsible mw-collapsed" style="width:100%" |- |Code |- | {{t|Chart data|Chart data/doc examples|colorBlue}} <syntaxhighlight lang="lua"> function p.colorBlue() local plot = chart.newChart{ type = 'scatter' } plot:setDimensions( '10vw', '10vh', 300, 300, true ) plot:setTitle( 'Blue' ) plot.fill = false plot.colorPallet = chart.colorPallets.blue for i = 1, #plot.colorPallet do local set = plot:newDataSet() set.data = chart.generateXYFromFunc( function(x) return ix^2 end, 0, 50 ) set.label = 'Set ' .. i end return plot:makeMwLoadDataCompatible() end </syntaxhighlight> |} </div> <div> {{Chart data|Chart data/doc examples|colorGreen}} {| class="wikitable mw-collapsible mw-collapsed" style="width:100%" |- |Code |- | {{t|Chart data|Chart data/doc examples|colorGreen}} <syntaxhighlight lang="lua"> function p.colorGreen() local plot = chart.newChart{ type = 'scatter' } plot:setDimensions( '10vw', '10vh', 300, 300, true ) plot:setTitle( 'Green' ) plot.fill = false plot.colorPallet = chart.colorPallets.green for i = 1, #plot.colorPallet do local set = plot:newDataSet() set.data = chart.generateXYFromFunc( function(x) return ix^2 end, 0, 50 ) set.label = 'Set ' .. i end return plot:makeMwLoadDataCompatible() end </syntaxhighlight> |} </div> <div> {{Chart data|Chart data/doc examples|colorBlueGreen}} {| class="wikitable mw-collapsible mw-collapsed" style="width:100%" |- |Code |- | {{t|Chart data|Chart data/doc examples|colorBlueGreen}} <syntaxhighlight lang="lua"> function p.colorBlueGreen() local plot = chart.newChart{ type = 'scatter' } plot:setDimensions( '10vw', '10vh', 300, 300, true ) plot:setTitle( 'BlueGreen' ) plot.fill = false plot.colorPallet = chart.colorPallets.blueGreen for i = 1, #plot.colorPallet do local set = plot:newDataSet() set.data = chart.generateXYFromFunc( function(x) return ix^2 end, 0, 50 ) set.label = 'Set ' .. i end return plot:makeMwLoadDataCompatible() end </syntaxhighlight> |} </div> <div> {{Chart data|Chart data/doc examples|colorOrange}} {| class="wikitable mw-collapsible mw-collapsed" style="width:100%" |- |Code |- | {{t|Chart data|Chart data/doc examples|colorOrange}} <syntaxhighlight lang="lua"> function p.colorOrange() local plot = chart.newChart{ type = 'scatter' } plot:setDimensions( '10vw', '10vh', 300, 300, true ) plot:setTitle( 'Orange' ) plot.fill = false plot.colorPallet = chart.colorPallets.orange for i = 1, #plot.colorPallet do local set = plot:newDataSet() set.data = chart.generateXYFromFunc( function(x) return ix^2 end, 0, 50 ) set.label = 'Set ' .. i end return plot:makeMwLoadDataCompatible() end </syntaxhighlight> |} </div> <div> {{Chart data|Chart data/doc examples|colorOverflow}} {| class="wikitable mw-collapsible mw-collapsed" style="width:100%" |- |Code |- | {{t|Chart data|Chart data/doc examples|colorOverflow}} <syntaxhighlight lang="lua"> function p.colorOverflow() local plot = chart.newChart{ type = 'scatter' } plot:setDimensions( '10vw', '10vh', 300, 300, true ) plot:setTitle( 'Color overflow' ) plot:setOptions{ options = { legend = { display = false } } } plot.fill = false plot.colorPallet = chart.colorPallets.orange for i = 1, 25 do local set = plot:newDataSet() set.data = chart.generateXYFromFunc( function(x) return ix^2 end, 0, 50 ) set.label = 'Set ' .. i end return plot:makeMwLoadDataCompatible() end </syntaxhighlight> |} </div> <div> {{Chart data|Chart data/doc examples|customColorPallet}} {| class="wikitable mw-collapsible mw-collapsed" style="width:100%" |- |Code |- | {{t|Chart data|Chart data/doc examples|customColorPallet}} <syntaxhighlight lang="lua"> function p.customColorPallet() local plot = chart.newChart{ type = 'scatter' } plot:setDimensions( '10vw', '10vh', 300, 300, true ) plot:setTitle( 'Custom color pallet' ) plot.fill = false plot.colorPallet = { chart.rgba.new(0,0,0), chart.rgba.new(126,0,0), chart.rgba.new(0,126,0), chart.rgba.new(0,0,126), chart.rgba.new(255,0,0), chart.rgba.new(0,255,0), chart.rgba.new(0,0,255), } for i = 1, #plot.colorPallet do local set = plot:newDataSet() set.data = chart.generateXYFromFunc( function(x) return ix^2 end, 0, 50 ) set.label = 'Set ' .. i end return plot:makeMwLoadDataCompatible() end </syntaxhighlight> |} </div> <div> {{Chart data|Chart data/doc examples|colorOptions}} {| class="wikitable mw-collapsible mw-collapsed" style="width:100%" |- |Code |- | {{t|Chart data|Chart data/doc examples|colorOptions}} <syntaxhighlight lang="lua"> function p.colorOptions() local plot = chart.newChart{ type = 'bar' } plot:setDimensions( '10vw', '10vh', 300, 300, true ) plot:setTitle( 'Color options' ) plot:setOptions{ backgroundAlpha = 0.8, hoverLightenValue = 0.5, hoverAlpha = 0.4, hoverSaturateValue = 1.5, } for i = 1, 2 do local set = plot:newDataSet() for j = 1, 6 do set:addDataPoint( math.sqrt( ij ) ) 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 plot:makeMwLoadDataCompatible() end </syntaxhighlight> |} </div> </div> ===Examples=== <div style="display:flex;flex-wrap:wrap;align-items:center;"> <div> {{#Invoke:Chart data/doc examples|line}} {| class="wikitable mw-collapsible mw-collapsed" style="width:100%" |- |Code |- | <code><nowiki>{{#Invoke:Chart data/doc examples|line}}</nowiki></code> <syntaxhighlight lang="lua"> function p.line() local plot = chart.newChart{ type = 'line' } plot:setDimensions( '10vw', '10vh', 300, 300, true ) plot:setTitle( 'Line chart' ) plot:setXLabel( 'x axis label' ) plot:setYLabel( 'y axis label' ) for i = 1, 2 do local set = plot:newDataSet() set.data = { i^2, (i+1)^2, (i+2)^2, (i+3^2), (i+4)^2 } set.label = 'Set ' .. i set.borderDash = {5, 5} end local labels = {} for i = 1, 5 do table.insert( labels, 'Value ' .. i ) end plot:addDataLabels( labels ) return 'Prefix text message' .. plot .. 'Affix text message' end </syntaxhighlight> |} </div> <div> {{Chart data|Chart data/doc examples|bar}} {| class="wikitable mw-collapsible mw-collapsed" style="width:100%" |- |Code |- | {{t|Chart data|Chart data/doc examples|bar}} <syntaxhighlight lang="lua"> function p.bar() local plot = chart.newChart{ type = 'bar' } plot:setDimensions( '10vw', '10vh', 300, 300, true ) plot:setTitle( 'Bar chart' ) plot:setXLabel( 'x axis label' ) plot:setYLabel( 'y axis label' ) for i = 1, 2 do local set = plot:newDataSet() for j = 1, 6 do set:addDataPoint( math.sqrt( ij ) ) 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 plot:makeMwLoadDataCompatible() end </syntaxhighlight> |} </div> <div> {{Chart data|Chart data/doc examples|horizontalBar}} {| class="wikitable mw-collapsible mw-collapsed" style="width:100%" |- |Code |- | {{t|Chart data|Chart data/doc examples|horizontalBar}} <syntaxhighlight lang="lua"> function p.horizontalBar() local plot = chart.newChart{ type = 'horizontalBar' } plot:setDimensions( '10vw', '10vh', 300, 300, true ) plot:setTitle( 'HorizontalBar chart' ) plot:setXLabel( 'x axis label' ) plot:setYLabel( 'y axis label' ) for i = 1, 2 do local set = plot:newDataSet() for j = 1, 6 do set:addDataPoint( math.sqrt( ij ) ) 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 plot:makeMwLoadDataCompatible() end </syntaxhighlight> |} </div> <div> {{Chart data|Chart data/doc examples|radar}} {| class="wikitable mw-collapsible mw-collapsed" style="width:100%" |- |Code |- | {{t|Chart data|Chart data/doc examples|radar}} <syntaxhighlight lang="lua"> function p.radar() local plot = chart.newChart{ type = 'radar' } plot:setDimensions( '10vw', nil, 300, nil, true ) -- Radar chart is always square. height = width plot:setTitle( 'Radar chart' ) plot:setRadialLimits( 0, 5 ) plot.fill = false for i = 1, 5 do local set = plot:newDataSet() for j = 1, 6 do set:addDataPoint( math.sqrt( ij(math.random()+1) ) ) end set.label = 'Set ' .. i if i == 3 then set.fill = true end end local labels = {} for i = 1, 6 do table.insert( labels, 'Value ' .. i ) end plot:addDataLabels( labels ) return plot:makeMwLoadDataCompatible() end </syntaxhighlight> |} </div> <div> {{Chart data|Chart data/doc examples|pie}} {| class="wikitable mw-collapsible mw-collapsed" style="width:100%" |- |Code |- | {{t|Chart data|Chart data/doc examples|pie}} <syntaxhighlight lang="lua"> function p.pie() local plot = chart.newChart{ type = 'pie' } plot:setDimensions( '10vw', nil, 300, nil, true ) -- Pie chart is always square. height = width plot:setTitle( 'Pie chart' ) 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:makeMwLoadDataCompatible() end </syntaxhighlight> |} </div> <div> {{Chart data|Chart data/doc examples|doughnut}} {| class="wikitable mw-collapsible mw-collapsed" style="width:100%" |- |Code |- | {{t|Chart data|Chart data/doc examples|doughnut}} <syntaxhighlight lang="lua"> function p.doughnut() local plot = chart.newChart{ type = 'doughnut' } plot:setDimensions( '10vw', nil, 300, nil, true ) -- doughnut chart is always square. height = width plot:setTitle( 'Doughnut chart' ) 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:makeMwLoadDataCompatible() end </syntaxhighlight> |} </div> <div> {{Chart data|Chart data/doc examples|polarArea}} {| class="wikitable mw-collapsible mw-collapsed" style="width:100%" |- |Code |- | {{t|Chart data|Chart data/doc examples|polarArea}} <syntaxhighlight lang="lua"> function p.polarArea() local plot = chart.newChart{ type = 'polarArea' } plot:setDimensions( '10vw', nil, 300, nil, true ) -- polarArea chart is always square. height = width plot:setTitle( 'PolarArea chart' ) 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:makeMwLoadDataCompatible() end </syntaxhighlight> |} </div> <div> {{Chart data|Chart data/doc examples|bubble}} {| class="wikitable mw-collapsible mw-collapsed" style="width:100%" |- |Code |- | {{t|Chart data|Chart data/doc examples|bubble}} <syntaxhighlight lang="lua"> function p.bubble() local plot = chart.newChart{ type = 'bubble' } plot:setDimensions( '10vw', '10vh', 300, 300, true ) plot:setTitle( 'Bubble chart' ) plot:setXLabel( 'x axis label' ) plot:setYLabel( 'y axis label' ) for i = 1, 5 do local set = plot:newDataSet() for j = 1, 5 do set:addDataPoint{ x = math.random() * 10, y = math.random() * 20, r = math.random() * 15 + 5 } end set.label = 'Set ' .. i end return plot:makeMwLoadDataCompatible() end </syntaxhighlight> |} </div> <div> {{Chart data|Chart data/doc examples|scatter}} {| class="wikitable mw-collapsible mw-collapsed" style="width:100%" |- |Code |- | {{t|Chart data|Chart data/doc examples|scatter}} <syntaxhighlight lang="lua"> function p.scatter() local plot = chart.newChart{ type = 'scatter' } plot:setDimensions( '10vw', '10vh', 300, 300, true ) plot:setTitle( 'Scatter chart' ) plot:setXLabel( 'x axis label' ) plot:setYLabel( 'y axis label' ) plot:setYAxisType( 'logarithmic' ) plot.fill = false for i = 1, 5 do local set = plot:newDataSet() set.data = chart.generateXYFromFunc( function(x) return (math.sin( x/5 ) * 5 + x)^i end, 0, 100 ) set.label = 'Set ' .. i if i == 2 then set.fill = '+2' end end return plot:makeMwLoadDataCompatible() end </syntaxhighlight> |} </div> </div>