This graph shows fine in preview, but fails when rendered by the graphoid service.
Repo steps:
* https://www.mediawiki.org/wiki/Graph:Sandbox
* Edit source
* paste this graph definition
* hit preview
* hit save
Note that the graph is now showing as a small circle instead of a big graph.
Solution ideas:
* Render graph as SVG on the server (checked, works ok), and apply on-the-server transformation to PNG, e.g. [[ https://www.npmjs.com/package/svg2png | svg2png ]] or [[ https://www.npmjs.com/package/svg-to-png | svg-to-png ]] NPM libs.
* Allow SVG images to be returned (might need extra SVG sanitation even though it is generated by the trusted code)
```lang=json
{
"width": 500,
"height": 375,
"data": [
{
"name": "integers",
"values": [
7,
23,
47,
6,
52,
19
],
"lyra.role": "data_source"
},
{
"name": "pipeline_0",
"lyra.displayName": "Pipeline 1",
"source": "integers",
"transform": [
{
"type": "pie",
"value": "data"
}
]
}
],
"scales": [],
"marks": [
{
"properties": {
"enter": {
"x": {
"value": 0
},
"width": {
"value": 500
},
"y": {
"value": 0
},
"height": {
"value": 375
},
"clip": {
"value": 0
},
"fill": {
"value": "#ffffff"
},
"fillOpacity": {
"value": 0
},
"stroke": {
"value": "#000000"
},
"strokeWidth": {
"value": 0
}
}
},
"scales": [
{
"type": "sqrt",
"points": true,
"nice": true,
"padding": 0,
"zero": true,
"reverse": false,
"name": "pipeline_0_scale_r1431559529741",
"domain": {
"data": "pipeline_0",
"field": "data"
},
"inheritFromGroup": false,
"range": [
"30",
"200"
],
"lyra.displayName": "outerRadius"
},
{
"type": "ordinal",
"points": true,
"nice": true,
"padding": 0,
"zero": true,
"name": "pipeline_0_scale_r1431559536478",
"domain": {
"data": "pipeline_0",
"field": "index"
},
"inheritFromGroup": false,
"range": "category20",
"lyra.displayName": "Fill Color"
}
],
"axes": [],
"marks": [
{
"properties": {
"enter": {
"x": {
"value": 0
},
"y": {
"value": 0
},
"startAngle": {
"field": "startAngle"
},
"endAngle": {
"field": "endAngle"
},
"innerRadius": {
"value": 30
},
"outerRadius": {
"scale": "pipeline_0_scale_r1431559529741",
"field": "data"
},
"fill": {
"scale": "pipeline_0_scale_r1431559536478",
"field": "index"
},
"fillOpacity": {
"value": 1
},
"stroke": {
"value": "#000000"
},
"strokeWidth": {
"value": 1.5
}
}
},
"name": "arc_1431559498854",
"type": "arc",
"from": {
"data": "pipeline_0"
},
"lyra.displayName": "Eccentric Donut"
}
],
"name": "layer_0",
"type": "group",
"from": {},
"lyra.displayName": "Layer 1",
"lyra.groupType": "layer"
}
]
}
```