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. svg2png or 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)
{ "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" } ] }