Page MenuHomePhabricator

Need a webpage to produce Pie chart according to Graphic Lab's recommendations
Closed, ResolvedPublic


Author: hugo.lpz

The graphic Labs, who frequently produce pie charts to illustrate articles, want to set up (SVG) pie chart's standards.

But, if a pie chart are made handily, we cannot guarantee its accuracy.

Also, graphists are from one hour ago looking for a Web Service allowing to create SVG pie charts, or even better : under free licence.

But the must should be to have page, on katetools website, allowing us to input the data needs :

  1. Wished image's name
  2. Year
  3. Area
  4. Total number of seats ? = 100%
  5. ? seats for group 1 = ??% = color ?
  6. ? seats for group 2 = ??% = color ?
  7. ? seats for group 3 = ??% = color ?
  8. ? seats for group 4 = ??% = color ?
  9. ? seats for group 5 = ??% = color ?
  10. ...

And which may output a nice + accurate PNG or SVG circle pie chart with '''Wikipedia chosen conventions'''.

You can have a look at :

  1. [ Creating SVG Pie Charts through XSLT via a Web Service].
  2. google query [ Pie+Chart+SVG]

I come first to ask you : is this tool already existing ?

If not, I think this tools is really need to provide harmonized pie charts and to upgrade a little more the graphic level of Wikipedia page.

If the creation of this extension is accepted, I can provide some ideas to find ugly but workable solution (I have really basic knowledge in coding and SVG).

Version: unspecified
Severity: enhancement



Event Timeline

bzimport raised the priority of this task from to Lowest.Nov 21 2014, 10:06 PM
bzimport set Reference to bz12603.
bzimport added a subscriber: Unknown Object (MLST).

hugo.lpz wrote:

User:Slashme (wikigraphist AND programmer) is working on it.

Removing the LATER resolution; nice SVG pie graph generation would be a nice extension. :)

Can't you do it with timeline? The underlying ploticus command is able to do pie charts.

I don't think timeline will pass that through.

It's not clear to me: would SVGEdit (bug 38271) be enough for this bug to be solved, is it headed in the same direction? Or are the two things unrelated?

(In reply to comment #5)
AFAIK, SVG-Edit is not a special chart-tool but a generic "drawing"-tool. Pie-charts could be created entirely with JavaScript using a gadget.

Just needs a community member who choses one of the various solutions, e.g., writes an editing-UI (if at all required since users are now supposed to understand JSON c.f. TemplateData and Upload Campaigns) and finally takes one of the existing upload-approaches like ) and will support this tool for a time.

Yurik is right. The Extension:Graph can add a piechart. You can see an example here. [1]

(Strangely enough VisualEditor provides support for adding line, area and bar charts, but not pie charts. The probable reason is that the Vega specification for pies is different from line, area and bar charts.)


@AdHuikeshoven, I think we should build a template similar to -- that will allow an easy way for users to create a pie chart by simply doing a {{GraphPie|values=10,4,37,54|labels=a,b,c,d}}. Actually something similar already exists, but that template is very specific to the popular articles concept, and not generic enough. As for Visual Editor - I am beginning to think that we went the wrong route there -- graphs should be template calls, not direct graph definitions in the articles. Graphs are like mini programs, and having a million copies of them creates millions of similar bugs, without an easy way to fix them in one place. VE should offer an easy way to insert such templates and provide their parameters.

P.S. @AdHuikeshoven, @Mps also wanted to implement Pie support, see here. (i assume its the same person)

Thanks for your comment @Yurik.
So that is a great idea to create a template. I templatified the original pie chart. On the talk page I inserted the pie chart as a template call: {{Gebruiker:Ad Huikeshoven/Taartgrafiek|heigth=125|width=125|innerradius=10|values=[

  {"x": "perziken","y": 100},
  {"x": "pruimen","y": 32},
  {"x": "bessen","y": 80},
  {"x": "aardbeien","y": 46},
  {"x": "bananen","y": 41}
] |outerradius=125|title="Fruits"}}.

Please check the page and it's source. All bugs in this template are mine :). I avoided Scribunto/Lua/Modules, as I didn't need them for this purpose. There will be multiple ways to transfer the label value pairs to the template, This one works. In VE you probably would like another method. I'm open to suggestions.

The template calls has been added to a page in a VE enabled namespace: sandbox. In VisualEditing mode the chart isn't displayed, there is a puzzle piece and another icon (image not available or something). Clicking the edit button on the puzzle piece allows for easy editing of the fields and the data - thought it is now in the above shown JSON form.

Awesome! This could totally work - it gets people used to the simple json blobs. Having both width/height and the outerradius is bad IMO - because they are interdependent. I would at least try to calculate the height and width somehow from the outerradius. Btw, i think "radius" is a better word - simpler to understand in this context.

As for VE - it will treat this as just a regular template. At some point I hope we can teach VE to offer custom interface to templates, so that the designer of the template itself could add special controls to VE's editor.

On en.wp I added a}template for piecharts, including documentation and template data. @Yurik, the parameters width, height and outerradius have been merged to a single parameter radius.

Pie charts can now be added with functionality provided by extension:graph

@AdHuikeshoven awesome work! I'm very happy that graphs are beginning to pick up ))
I modified it a bit to make it smaller by default, renamed title to legend (to be consistent with others, allowed legend hiding by specifying '-' as the legend title, and a few other minor things. Now the "big" naming question - per guidelines, should we rename it to be consistent - "Graph:PieChart"? Graph is not a real namespace, just a convention. Thoughts?

moved to graph: as suggestief by Yurik. Thanks for the improvements

So now that we have PieChart, should we close this task?

P.S. Please don't forget to add links to copies in other languages, just so that its easier to keep them in sync later (e.g. with T122086)

hashar added a subscriber: hashar.

Implemented as a Graph piechart template

I really love that Graph extension :}