Extension talk:Graph

Embedded Graph shows completely white
Any idea why my graph - which renders fine on vega.github.io/editor - just renders completely white on my own mediawiki site, whilst the demo embedded graph here - Extension:Graph/Demo - embeds and renders fine on my site?

My vega json... { "version": 2, "width": 200, "height": 100,

"data": [ {     "name": "table", "values": [ {"C": -4, "L": 0, "f":"Pre"}, {"C": 0,  "L": 3, "f":"Pre"}, {"C": -4, "L": 0, "f":"Post"}, {"C": 0,  "L": 4, "f":"Post"} ]   }  ],

"scales": [ {     "name": "xscale", "type": "linear", "range": "width", "nice": true, "zero": true, "domain": {"data": "table", "field": "C"}, "domainMax": 4, "domainMin": -4 },   {      "name": "yscale", "type": "linear", "range": "height", "domain": {"data": "table", "field": "L"}, "domainMax": 4, "domainMin": 0 },   {      "name": "color", "type": "ordinal", "range":"ordinal", "domain": {"data": "table", "field": "f"} } ],

"axes": [ {"orient": "bottom", "scale": "xscale", "tickCount": 10 }, {"orient": "left", "scale": "yscale", "tickCount": 5, "offset": { "signal": "-width / 2" } } ],

"marks": [ {     "type": "group", "from": { "facet": { "name": "series", "data": "table", "groupby": "f" }     },    "marks": [ {     "type": "area", "from": {"data": "series"}, "encode": { "enter": { "x": {"scale": "xscale", "field": "C" }, "y": {"scale": "yscale", "field": "L"}, "y2": {"scale": "yscale", "value": 0 }, "fillOpacity": [{ "test": "indata('series', 'f', 'Pre')", "value": 0.3 }, {"value": 0}], "strokeWidth": [{ "test": "indata('series', 'f', 'Pre')", "value": 0 }, {"value": 2}], "fill": { "signal": "datum.C > 0 ? 'green': 'red'"}, "stroke": { "signal": "datum.C > 0 ? 'green': 'red'"} }             }    }  ]    }  ] } Doesn't seem to work here either? :s

But this one does: { "version": 2, "width": 400, "height": 200, "padding": {"top": 10, "left": 30, "bottom": 30, "right": 10}, "data": [ {     "name": "table", "values": [ {"x": 1, "y": 28}, {"x": 2,  "y": 55}, {"x": 3, "y": 43}, {"x": 4,  "y": 91}, {"x": 5, "y": 81}, {"x": 6,  "y": 53}, {"x": 7, "y": 19}, {"x": 8,  "y": 87}, {"x": 9, "y": 52}, {"x": 10, "y": 48}, {"x": 11, "y": 24}, {"x": 12, "y": 49}, {"x": 13, "y": 87}, {"x": 14, "y": 66}, {"x": 15, "y": 17}, {"x": 16, "y": 27}, {"x": 17, "y": 68}, {"x": 18, "y": 16}, {"x": 19, "y": 49}, {"x": 20, "y": 15} ]   }  ],  "scales": [ {     "name": "x", "type": "ordinal", "range": "width", "domain": {"data": "table", "field": "x"} },   {      "name": "y", "range": "height", "nice": true, "domain": {"data": "table", "field": "y"} } ],  "axes": [ {"type": "x", "scale": "x"}, {"type": "y", "scale": "y"} ], "marks": [ {     "type": "rect", "from": {"data": "table"}, "properties": { "enter": { "x": {"scale": "x", "field": "x"}, "width": {"scale": "x", "band": true, "offset": -1}, "y": {"scale": "y", "field": "y"}, "y2": {"scale": "y", "value": 0} },       "update": { "fill": {"value": "steelblue"} },       "hover": { "fill": {"value": "red"} }     }    }  ] } Perplexing...

Block limitations
It seems that the block now is being spreaded to all width of content of the page. Thus in current page state it also covers the space above infobox and thus infobox's links to uncollapse hooks and the link to twn are unclicable. --Base (talk) 15:58, 29 September 2014 (UTC)
 * Base, I am not sure what you mean. --Yurik (talk) 10:59, 18 May 2015 (UTC)

Map distortion
Why is every continent except Africa & South America all squashed in the map tool? All this political correctness is going too far—Kelvinsong (talk) 21:23, 13 May 2015 (UTC)
 * No idea what you mean - I am using a standard Mercator projection on top of a known file. If its incorrect, please find another topojson world map (size-optimized to 2nd floating digit), and upload. I don't think this has anything to do with PC :) --Yurik (talk) 10:49, 18 May 2015 (UTC)
 * Kelvinsong: correction, the same map data can be used, you simply need to specify a different projection parameter. See example at de:template:Graph:Map. --Yurik (talk) 14:16, 20 January 2016 (UTC)

2015-05-14 Tech talk notes
-- SPage (WMF) (talk) 21:23, 14 May 2015 (UTC)
 * Word cloud is coming, needs to be deployed.
 * A separate Graph namespace turned out not be useful, because you can't put template stuff in a strict JSON file. It's better to make graphs as MediaWiki templates, where you can have headings and additional info outside the  tag, and template expansion within it.
 * en:User:Milimetric/MinardNapoleon is a famous graph recreated using uwdata's lyra to generate the JSON for Vega graph description.
 * no standards for graph layout, we need lots of MediaWiki templates for standard graph types, Lua modules for typical transformations, etc.
 * All API calls return JSON. Problem is we don't let Graph extension/Vega run arbitrary JavaScript transforms on-wiki. Meanwhile Lua modules on-wiki can do data transforms, but are not able to make API call (yet).
 * Slides from the talk are here
 * Made a few minor corrections. --Yurik (talk) 10:51, 18 May 2015 (UTC)

Bug?

 * Hello, as this function was originally deployed it allowed a certain level of visually appealing interactivity when hovering over items. This is still the case for me when I go directly to Extension:Graph/SampleGraph. However, it is no longer true when I use a graph anywhere else on-wiki. Specifically, in this week's Signpost the  trigger was working correctly when the story was being drafted, but broke sometime before publication. I have checked with some other editors and they report the same.

The interactivity is what makes the extension in the first place&mdash;static data can be represented only very slightly worse with images. Resident Mario (talk) 05:05, 17 May 2015 (UTC)


 * The hover only works when the graph is rendered on the client. Sadly, this was very slow, since it required MediaWiki to download d3 and vega libraries, plus all the external data needed by the graph. This could be over 1MB uncompressed. Instead, now graphs are rendered on the server, which makes them significantly faster, but do not allow for the hover effect. The power of graphs is not in their hover effect, which is a sugar coating. The power is in the fact that now you can have data stored on wiki, and update that data at any point to update the graph. You never need to generate maps or graphs in a 3rd party program like Draw/Excel/OpenOffice/etc and upload the results - if you do that, no one else except the original author can easily modify the picture - they would have to recreate the whole source file. Now, anyone can change the source of data for the map/graph to reflect the change. --Yurik (talk) 10:58, 18 May 2015 (UTC)
 * Sugar-coating? Yes; perhaps. But it's important sugar-coating because it introduced an entirely new element of interactivity, however surface, into Wikipedia software, and so I am very sad to see it gone. It felt like something fresh and new, but now that feeling is lost to me... Resident Mario (talk) 04:50, 21 May 2015 (UTC)
 * "hover effect" is only sugar coating. BUT, fear not, something much bigger is in the pipeline - take a look at the interactive examples of Vega 2 in http://vega.github.io/ - I plan to bring them over fairly soon, most likely in the "click to play" mode - you see a static image, you click on it, and it turns into an interactive graph, which will also have hover effect ;) --Yurik (talk) 09:32, 21 May 2015 (UTC)
 * Oooooh! That is really something! Resident Mario (talk) 01:44, 22 May 2015 (UTC)
 * If the issue is speed, perhaps it would be possible to first load just the simple image, and then automatically replace it later with the full interactive graph after the full set of libraries and data load? And maybe that could also be used for real interactivity, instead of the "play" buttons currently shown in the demos? --Yair rand (talk) 06:13, 20 January 2016 (UTC)
 * the play button simply indicates that the graph is interactable - you can drag things around, hover over elements, etc. Play button is the closest to the "interactable" icon I could think of. And yes, show the image + load the data afterwards automatically has been considered - perhaps we could make it an option for the users for now, I just feel it is a bit wasteful bandwidth wise, especially on the mobile devices. Still on the fence on this one. Please consider filing a task in  - this way we can track and discuss it there. Thanks! --Yurik (talk) 14:12, 20 January 2016 (UTC)
 * Done: T124254. --Yair rand (talk) 00:01, 21 January 2016 (UTC)

Image marks only working in preview
Well, subj! Graphs with images work perfectly well in preview, but break the extension after saving. It seems to be entirely graphoid's fault.

E.g. en:User:Primaler/Graphs:
 * preview mode uses canvas and shows the two graphs with images,
 * but in regular mode graphoid throws a 503.

Primaler (talk) 23:19, 21 May 2015 (UTC)
 * , thanks for reporting! One thing to note - phabricator is a much better way to report bugs - more people will notice. I created T99994 --Yurik (talk) 02:45, 22 May 2015 (UTC)
 * the image issues have been fixed, please take a look, and also check vega2 on demo page. --Yurik (talk) 14:14, 20 January 2016 (UTC)

Image paths
On a related note, Graph only works with static image urls. So, in the example above one of the urls looks like this: " http://upload.wikimedia.org/wikipedia/commons/thumb/8/8c/Det_Radikale_Venstre_logo.svg/200px-Det_Radikale_Venstre_logo.svg.png ".

This is — how should I put it — not ideal %)

What is the intended work-around?

Oh! On pressing google a bit harder, I've just found the filepath keyword, substituting that awful url for " ". Magic words are scary, so enwiki also has a wrapper template: "".

Still, this trick would not work e.g. for paths stored in a separate csv file. And with function transform understandably disabled, one would probably need to resort to some Lua magic (as if wikitext and json were not enough for one task).

On the other hand, the extension only works with local data anyway. May be you could enable automatic filepath extraction server-side, then? Semantics-wise, it would certainly be in keeping with how most other image-related features work here.

Primaler (talk) 01:28, 22 May 2015 (UTC)
 * , not exactly sure of how to solve this best. I was contemplating custom protocols, e.g. article://Article_name, but haven't really thought about images yes. Please add a task to the phabricator - this way everyone interested in graphs can discuss it and come up with a good solution. Thx! --02:53, 22 May 2015 (UTC)

Please help with a grouped bar chart
Hi, I have looked at Lyra, but I don't know how to approach this kind of bar chart layout. Would someone please help? I am guessing it has to be done outside Lyra, but I can't see how from the tutorial or, either. EllenCT (talk) 16:43, 24 May 2015 (UTC)
 * There is a very similar "grouped_bar" example here. Primaler (talk) 20:46, 24 May 2015 (UTC)
 * Fixed link (a little trick there :). --Yurik (talk) 21:47, 24 May 2015 (UTC)
 * Thank you both. I was having trouble earlier because I couldn't find http://trifacta.github.io/vega/data/groups.json (why is it in vega/data instead of vega/editor/data?) and I would still like to know how to make it horizontal. EllenCT (talk) 04:55, 27 May 2015 (UTC)

Wikilink in graph
Is possible to insert wikilinks in graphs header or legend labels ?--Moroboshi (talk) 07:39, 21 July 2015 (UTC)
 * Not at this point. I am still thinking of how to do it better, or if at all (you can already use html tricks to overlay the image with a clickable map or link). Once we have interactive graphs, there might be some clickability there, but again, it will need to be discussed. I wouldn't want the user to click the image just so that it loads all javascript and data required to render the graph client side, only so that the user can click the link and navigate away. Seems wasteful. --Yurik (talk) 15:40, 21 July 2015 (UTC)
 * Update: I think this should be done via switching Graphoid to SVG.  T96309. --Yurik (talk) 14:06, 20 January 2016 (UTC)

Seeking help moving away from Wikipedia template:Line chart
Last year I added several dozen line charts to Wikipedia based on US Department of Labor OLMS reports covering union membership and finances using Template:Line chart. However, the process of gathering the data (their database is awful) and reformatting it (the template has many limitations) was so exhausting I gave up for a year. I'm now looking to update and to continue this effort, and this new method might make the process much easier and result better, but converting it seems overwhelming.

I put the details of the project on my Wikipedia talk page.

It's a big project and I bit off more than I could chew. Any help would be appreciated and would benefit dozens of articles. Djr13 (talk) 08:48, 7 October 2015 (UTC)
 * Djr13, have you seen the w:Template:GraphChart? It might be possible to convert parameters of your template to use that other one, and also put a big note saying that the template is obsolete and users should move to the new one? I will try to find some time to work on this, but it might be a bit tough - I am trying to get graph extension to the new interactive version of vega, see samples here --Yurik (WMF) (talk) 04:44, 13 November 2015 (UTC)
 * Sorry I had not responded, I am rarely on this wiki and in general had not been editing much over the winter. I did see that template before, and I notice I mentioned it on my talk page, but honestly it has been such a long time since I created these graphs that I will need to relearn how to code them anyway. Really, I think a good starting point would be to have a sample of a graph that accomplishes what is needed for the usecase and looks relatively attractive for the large number of articles it will be in. I hoped I could somehow separate the graph formatting, and even the graph data, from the article space to make it more manageable. JSON seems to open a big opportunity there, but I wouldn't know where to start. One big problem for me is that the OLMS website is very inaccessible, so I am forced to collect and arrange data somewhere, which I wish could be online. Djr13 (talk) 15:44, 5 February 2016 (UTC)

upgrade vega1 to vega2
I'm trying to install the master release on MW26 I've got the following error : Call to undefined method XCacheBagOStuff::makeKey Using the mediawiki-extensions-Graph-REL1_26 is working fine but only vega1 json format working. Any idea ?
 * , XCacheBagOStuff is an implementation of the BagOStuff (memcached-like caching). I think your installation is somehow not set up correctly to use any kind of caching, and as a result you might be running much slower and/or with problems. I am not exactly sure how to set it up though. --Yurik (talk) 22:47, 22 March 2016 (UTC)

,Thanks for your reply. I've checked my php config opcache and apcu fine in phpinfo

$wgMainCacheType = CACHE_ACCEL; setup in Localsetting and I can see file cached in my cache folder ...

still not working


 * , could you add this as a bug to the phabricator? I suspect  is having similar issue. --Yurik (talk) 12:54, 11 April 2016 (UTC)

,I'm back.I've found a work around and it is working fine with my needs. In the Graph.body.php I've commented line 171 //self::saveDataToCache( $hash, $data )

Basic installation bug ?
I've done the basic installation, but it doesn't seem to work : (
 * MediaWiki :	1.26.0
 * PHP :	5.5.9-1ubuntu4.14 (apache2handler)
 * MySQL :	5.5.47-0ubuntu0.14.04.1
 * Lua :	5.1.5
 * JsonConfig :	0.1.0

The best I can get is an empty chart :



Thanks for any help : )

--Dieudo (talk) 14:13, 10 April 2016 (UTC)
 * , please check that you have the latest version of the graph extension, preferably directly from the GIT. For some reason, I don't even see the Special:GraphSandbox on your wiki. --Yurik (talk) 14:29, 10 April 2016 (UTC)


 * Thx for your fast answer ! I installed Graph-master-1aeb084.tar.gz
 * I have now access to this special page, but now pages with graph give this message :

Fatal error: Call to undefined method EmptyBagOStuff::makeKey in /.../w/extensions/Graph/includes/Graph.body.php on line 243
 * --Dieudo (talk) 15:26, 10 April 2016 (UTC)


 * I will have to research the makeKey issue. It has also been reported above, so there must be some version compatibility issue - I don't have it with the core version directly from git. Btw, the graph extension you had initially was using obsolete and unsupported Vega 1.0, that's why vega 2.0 example didn't work. --Yurik (talk) 15:37, 10 April 2016 (UTC)
 * So I had similar problems as described by Dieudo. Found out that - for unknown reason - my installation of mediawiki - in BagoStuff.php - was missing all make key methods. If you look here: Bag O Stuff reference than it lacked last three methods. Not too mention the whole file is ~545 lines long which indicates that more stuff is missing. How did this happen? In my case I was lazy and clicked installation of mediawiki from my host so it was autoinstalled. So I can blame my hosting (zenbox.pl - for reference). As a proof of concept, when I manually added these methods it threw a lot of warnings at me BUT the graph was generated and looked almost OK! So I would say - extension is fine, check up your MediaWiki installation. I probably will make manual installation and do a migration because seriously WTF to gut an installation like that. Nimdil (talk) 15:45, 1 May 2016 (UTC)
 * EDIT: these methods are in documentation but not in vanilla mediawiki install? Nimdil (talk) 17:36, 1 May 2016 (UTC)
 * These methods were added only in MediaWiki 1.27, soon to be released. Before that, extensions apparently used memcached directly. --FFS Talk 11:21, 14 June 2016 (UTC)

Numeric separators
The graphs always use English decimal and thousand separators for numbers, instead of current wiki's separators. Is it possible to change this setting? --Bultro (talk) 13:01, 11 July 2016 (UTC)
 * Bultro, see the tracked task. --Yurik (talk) 17:09, 11 July 2016 (UTC)
 * A related effort is globalize. It's very hard to get the JavaScript folks to agree to a shared standard, so MediaWiki ends up pulling a dozen different things which invariably have worse i18n than MediaWiki. --Nemo 20:03, 11 June 2018 (UTC)

Rotation of the x-axis labels
Hello,

I would like to rotate the labels of the x-axis (fr:Utilisateur:Pyb/Brouillon13). I found this thread on Stackoverflow, but I don't know how to apply the solution. Pyb (talk) 05:48, 9 August 2016 (UTC)
 * ✅ It's  Pyb (talk) 05:48, 9 August 2016 (UTC)
 * Pyb, hi, sorry, i was on vacation :( Glad you figured it out! Let me know if you run into any other problems. --Yurik (talk) 11:54, 10 August 2016 (UTC)

Preview in canvas not woking on retina monitor
Hi all, maybe this isn't a big issue, but I find it disturbing. On monitor displays, previews are pixelated. Is there a way to fix it? Thanks --Mikima (talk) 11:36, 25 November 2016 (UTC)
 * Hi Mikima, thanks for the suggestion, I added T151654. Might take us some time to get to it though :( --21:59, 25 November 2016 (UTC)

Configuring graphoid
I'm struggling to get the graphoid service integrated. The graphoid service is running and listening (and responding) on port 6927. Here is my local settings config:

wfLoadExtension( 'Graph' ); $wgGraphImgServiceUrl = "http://fr-s-dtp-npsgl1.ncifcrf.gov:6927/api/rest_v1/page/graph/png/%2\$s/0/%4\$s.png";

(My hope is eventually to get restbase running, but one step at a time). But I get file not found error: Cannot GET /api/rest_v1/page/graph/png/C29481/0/bd001718d8dcc202a3854dbec188981493e00176.png when browsing to (or within the wiki page): http://fr-s-dtp-npsgl1.ncifcrf.gov:6927/api/rest_v1/page/graph/png/C29481/0/bd001718d8dcc202a3854dbec188981493e00176.png

Any help would be greatly appreciated. I'm sure I'm just missing something simple. Thanks! Evans.jr3 (talk) 13:03, 15 June 2017 (UTC)
 * Evans.jr3, first off, you don't really need graphoid to use graphs - you can use Graph extension in a client-side mode only (it will load Vega libraries for all pages that use graphs). This is actually a much easier path for smaller sites. The imgserviceurl points to the local graphoid, but in WMF setup, graphoid is hidden behind restbase. It doesn't have to be, in which case the URL would be something like http://...:6927/en.wikipedia/v1/png/Page_name/0/0123456789abcdef...png . Note that you might want to hide it behind nginx or varnish proxy, or change its port to 80. --Yurik (talk) 08:29, 17 June 2017 (UTC)
 * Yurik, Thanks for getting back. I'm trying to use the Collection Extension to produce pdfs and I'm not having much luck with it rendering canvas objects. The graphs look great, I just want to print them out. I thought the graphoid service would be the simplest route. I will recheck my settings. Evans.jr3 (talk) 12:07, 19 June 2017 (UTC)

Is it possible to generate tree graph from Wikidata items?
Hello! I'm very impressed various beautiful graph examples. I'm now writing draft of help page about "how to generating tree graph" at Wikidata (d:User:Was a bee/Help:Tree). So I want to know whether it is possible or not, and if possible, I want to know example code to embed that at the help page. Thanks! --Was a bee (talk) 16:38, 23 December 2017 (UTC)
 * I found some tree graph examples in Wikidata. So resolved. Thanks!--Was a bee (talk) 06:20, 1 January 2018 (UTC)

Labels overlap on the x-axis
Hello,

When I use many (date) labels on the same graph, they overlap and become unreadable (cf. graph below). Is there any way to solve this?

Regards, --Automatik (talk) 04:47, 5 September 2018 (UTC)
 * Note: I found a way using the labels property: see wikt:fr:MediaWiki:Gadget-translation editor.js/Statistiques. --Automatik (talk) 22:38, 28 October 2018 (UTC)

Compatibility with Visual Editor
When editing with Visual Editor, images, tables, templates, math, etc. are still visible, so that you can see them and double click on them to edit them. But anything using Template:Graph just becomes invisible, a plain white box on a plain white background. Is there a way to show the preview of what the graph will look like, or at least show a box placeholder for it, so we remember it's there while editing? Omegatron (talk) 21:26, 16 February 2019 (UTC)

Support for relative widths?
For example, graphs are often embed in an mbox on talk pages, like so.

If you're zoomed out, all's (relatively) fine, but when you zoom in you can see that issues arise quickly. Support for something like

would be much appreciated. This isn't pageview specific. Headbomb (talk) 04:18, 12 April 2019 (UTC)

General Help
i'm creating a wiki and really want to make use of the graph tool but am not a develop. i'm struggling with the documentation. does anyone know of any really great tutorials out there?

in particular:

- the graph:chart extension template - how do i install it for easy graph implementation?

- the vega specification seems to not always work.

- trying to create a group line chart from in page data - struggling to get this to work

- creating a visual graph template so that i can reuse for different data sets

if anyone can offer any help i'd really appreciate it! (not even sure if i'm asking in the right way sorry...)

How to create organigrams
I want to create a graph template serving organigrams like fosbos-sw.de/images/allgemein/schulorganisation/organigramm/organigramm.JPG.

Reflections on this extension
I just made a long winded rant about this extension in my userspace - User:Bawolff/Reflections on graphs. I'd love feedback from people involved with this extension if they agree with me or not. Bawolff (talk) 15:56, 29 March 2020 (UTC)
 * I am not involved with the extension, but your rant was super useful to me for understanding better the current status of interactive graphs. TiagoLubiana (talk) 13:50, 11 May 2020 (UTC)

Can you help with improving the Coronavirus epidemic maps?
Hi all

The maps on the Coronavirus pandemic articles need some technical help which has been documented on phabricator, I think that some of the tasks relate to the graph extension, please take a look.


 * https://phabricator.wikimedia.org/T248707

If you're not able to assist with any of the tasks please still subscribe to it and award a token, it will help people understand there is community support for fixing these issues.

Thanks very much

--John Cummings (talk) 15:24, 30 March 2020 (UTC)