Module:TestTimChart1: Difference between revisions
From MaRDI portal
Created page with "local p = {} function p.renderChart(frame) local height = frame.args.height or '500px' -- Default height is 500px if not specified -- Enhanced and more visually interesting chart data local chartData = { type = 'bar', data = { labels = {'January', 'February', 'March', 'April', 'May', 'June'}, datasets = { { label = 'Dataset 1', backgroundColor = '#ff6384',..." |
No edit summary |
||
Line 54: | Line 54: | ||
return tostring(chartContainer) | return tostring(chartContainer) | ||
end | end | ||
function p.renderStaticD3Graph(frame) | |||
local width = frame.args.width or '500' -- Default width | |||
local height = frame.args.height or '500' -- Default height | |||
local nodes = {{x=100, y=150}, {x=300, y=50}, {x=400, y=300}} -- Example node coordinates | |||
local edges = {{1, 2}, {2, 3}} -- Example edges (as pairs of node indices) | |||
local svg = mw.html.create('svg') | |||
:attr('width', width) | |||
:attr('height', height) | |||
:css('border', '1px solid black') -- For visibility | |||
-- Draw edges | |||
for _, edge in ipairs(edges) do | |||
local node1 = nodes[edge[1]] | |||
local node2 = nodes[edge[2]] | |||
svg:tag('line') | |||
:attr('x1', node1.x) | |||
:attr('y1', node1.y) | |||
:attr('x2', node2.x) | |||
:attr('y2', node2.y) | |||
:css('stroke', 'black') | |||
:css('stroke-width', 2) | |||
end | |||
-- Draw nodes | |||
for _, node in ipairs(nodes) do | |||
svg:tag('circle') | |||
:attr('cx', node.x) | |||
:attr('cy', node.y) | |||
:attr('r', 10) -- Radius of nodes | |||
:css('fill', 'red') | |||
end | |||
return tostring(svg) | |||
end | |||
return p | return p |
Revision as of 00:59, 13 December 2023
Documentation for this module may be created at Module:TestTimChart1/doc
local p = {}
function p.renderChart(frame)
local height = frame.args.height or '500px' -- Default height is 500px if not specified
-- Enhanced and more visually interesting chart data
local chartData = {
type = 'bar',
data = {
labels = {'January', 'February', 'March', 'April', 'May', 'June'},
datasets = {
{
label = 'Dataset 1',
backgroundColor = '#ff6384',
borderColor = '#ff6384',
borderWidth = 1,
data = {65, 59, 80, 81, 56, 55}
},
{
label = 'Dataset 2',
backgroundColor = '#36a2eb',
borderColor = '#36a2eb',
borderWidth = 1,
data = {28, 48, 40, 19, 86, 27}
},
{
label = 'Dataset 3',
backgroundColor = '#cc65fe',
borderColor = '#cc65fe',
borderWidth = 1,
data = {12, 50, 75, 30, 70, 95}
}
}
},
options = {
responsive = true,
maintainAspectRatio = false, -- This will allow custom height
scales = {
yAxes = {{
ticks = {
beginAtZero = true
}
}}
}
}
}
local chartDataJson = mw.text.jsonEncode(chartData)
local chartContainer = mw.html.create('div')
:addClass('wikiChartContainer')
:css('height', height)
:attr('data-chartdata', chartDataJson)
return tostring(chartContainer)
end
function p.renderStaticD3Graph(frame)
local width = frame.args.width or '500' -- Default width
local height = frame.args.height or '500' -- Default height
local nodes = {{x=100, y=150}, {x=300, y=50}, {x=400, y=300}} -- Example node coordinates
local edges = {{1, 2}, {2, 3}} -- Example edges (as pairs of node indices)
local svg = mw.html.create('svg')
:attr('width', width)
:attr('height', height)
:css('border', '1px solid black') -- For visibility
-- Draw edges
for _, edge in ipairs(edges) do
local node1 = nodes[edge[1]]
local node2 = nodes[edge[2]]
svg:tag('line')
:attr('x1', node1.x)
:attr('y1', node1.y)
:attr('x2', node2.x)
:attr('y2', node2.y)
:css('stroke', 'black')
:css('stroke-width', 2)
end
-- Draw nodes
for _, node in ipairs(nodes) do
svg:tag('circle')
:attr('cx', node.x)
:attr('cy', node.y)
:attr('r', 10) -- Radius of nodes
:css('fill', 'red')
end
return tostring(svg)
end
return p