Module talk:Graph

Rotate x-axis

Is there a way to rotate x-axis text on a -45 degree angle? Otherwise text frequently overlaps when using dates.

{{Graph:Chart
 |width=300|height=250
 |type = line
 |xAxisTitle = Year
 |x  = 1990, 1991, 1992, 1993, 1994, 1995, 1996, 1997, 1998, 1999, 2000, 2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015
 |y1 = 5, 11, 22, 53, 85, 132, 205, 299, 412, 652, 866, 836, 839, 910, 1094, 1109, 1058, 1027, 1057, 1001, 939, 940, 934, 768, 616, 468
}}

produces:

Any help/update appreciated. T.Shafee(Evo&Evo)^talk 02:15, 5 October 2016 (UTC)

Use xAxisAngle=-45 or xAxisAngle=+45. --Mps (talk) 15:44, 14 April 2018 (UTC)

When rotating text in bar chart, the text is offset relative to the bars

Example:

Any workaround? Segoldberg (talk) 16:28, 21 July 2020 (UTC)

Segoldberg, yes, a wider graph. Mathglot (talk) 02:15, 4 April 2022 (UTC)

Why are the charts so ugly?

I'm sorry, but maybe I don't get the point of this module. Maybe we can produce nice SVG files, but at the end the article displays very ugly (blurred) PNGs. Why not follow the way of, for example, Module:Chart. In the article they look much much better. Unfortunately a lot of plotting options are not implemented. Димитър Янков (talk) 10:38, 19 May 2017 (UTC)

It looks a technical decision. If you are in edit mode they are actually rendered using a Canvas element as a vector graphic. But in read mode a PNG is created instead for whatever reason (likely compatibility reasons). --Mps (talk) 15:48, 14 April 2018 (UTC)

Horizontal Bar

Hello, can anyone realize this functional? mw:Extension:Graph/Demo/HorizontalBarGraphSample. Iniquity (talk) 10:55, 6 March 2018 (UTC)

Axes text colour

I'm concerned the recent change to the text colour of the axes has a negative impact on readability for people with sub-optimal eyesight. This is particularly true when a graph appears over a grey background like this or this. I'm not sure what "color-inversion issues" the edit was trying to solve, but I think the outcome is poor.

Another issue is that an inconsistency has been introduced between the appearance of these graphs and those of Template:Graph:Lines. Gareth (talk) 07:43, 8 October 2018 (UTC)

Output display

It seems to me that the utility of this module is severely undercut by the decision to render as a poor-quality rasterized image. See also my comment at Talk:Buffalo Metro Rail#Ridership graph. Mackensen (talk) 10:56, 30 July 2019 (UTC)

Template:Graph:Population history

Hi, the recent changes to this module may have broken some functionality in Template:Graph:Population history. I don't know anything about either template, just saw the VPT post. --Trialpears (talk) 20:37, 1 September 2019 (UTC)

It is a known problem, T226250 at Phabricator, "Graph not displayed if linked to a wikidata query". StarryGrandma (talk) 01:04, 3 September 2019 (UTC)

Discussion at Template talk:Graph:Chart#showSymbols doesn't respect opacity values

 You are invited to join the discussion at Template talk:Graph:Chart#showSymbols doesn't respect opacity values. -- /Alex/₂₁ 08:04, 22 September 2019 (UTC)

How to change label elements' text color?

From vega.github.io/vega/docs/config/, I found the labelColor property, but that doesn't seem to work in the Wiki interpretation of Vega. So I also tried:

local function getLegend(legendTitle, chartType, outerRadius)
	
	[...]
	
	legend.properties = {
		title = {
			fill = { value = "#54595d" },
		},
--		label = {
--			fill = { value = "#54595d" },  -- didn't work
--			color = { value = "#54595d" }, -- didn't work
--			fill = "#54595d",              -- didn't work
--			color = "#54595d",             -- didn't work
--		},
	}

See Module:Graph/sandbox for various attempts. Does anyone know how to properly implement this?   ~ Tom.Reding (talk ⋅dgaf)  19:12, 8 November 2019 (UTC)

labels does it.   ~ Tom.Reding (talk ⋅dgaf)  19:24, 8 November 2019 (UTC)

Highlighting a curve by hovering only works in preview mode. Would tooltips also be possible?

Three questions:

1. When the mouse is hovering a curve, the curve is highlighed in red. Very nice feature! But it only works for me when previewing a plot, not in the real plot. Do you experience the same problem? Why? Some CSS issue or gadget?

2. Ideally, it should be possible to hover over the legend as well to highlight the corresponding curve. Is that possible to implement?

3. The module:Chart allows tooltips, for example, a popup window with exact numbers with unit and curve name, when the mouse is hovering over a certain bar or point on the curve. Would that be possible? (Also, Template:Global Heat Maps by Year allows tooltips when hovering a country on the map.) 193.10.109.173 (talk) 17:32, 22 January 2020 (UTC)

Wishlist: log option

Having an option for the horizontal and/or vertical axis to be base-10-logarithmic, showing the non-log scale(s) on the axes, e.g. "1 10 100 1000" would be nice.

Right now, an editor can, of course, calculate base-10 log of the input data, but this would defeat the point of creating tables directly from wikitables with reliably sourced data, and the meaning of the axes would be less obvious to a typical reader ("Why is the axis labelled '0 1 2 3' when the numbers go up to 1000s?"). Boud (talk) 20:49, 23 February 2020 (UTC)

I assume that this would automatically feed through to Template:Graph:Chart. Boud (talk) 20:50, 23 February 2020 (UTC)

 Done See Template_talk:Graph:Chart#Line_chart_with_logarithmic_vertical_scale for some equivalent requests. Boud (talk) 14:41, 26 March 2020 (UTC)

Claim that Graph:Map breaks

In this edit, there was a claim that the 2020-03-11 version of Module:Graph breaks some maps. We need some testcases at Template:Graph:Chart/testcases.... @Bawolff: I'm updating the sandbox and creating the testcases page. I suspect that local basemap = frame.args.basemap or "WorldMap-iso2.json" -- WorldMap name and/or location may vary from wiki to wiki is all that is needed. Let's see... Boud (talk) 14:10, 29 March 2020 (UTC)

Template:Graph:Map/testcases - the sandbox version with local basemap = frame.args.basemap or "Template:Graph:Map/Inner/Worldmap2c-json" looks OK to me. Boud (talk) 14:18, 29 March 2020 (UTC)

Yes, i think that is likely what the issue was. Bawolff (talk) 14:20, 29 March 2020 (UTC)

OK, just for future convenience, here are the two testcases pages: Template:Graph:Chart/testcases and the Template:Graph:Map/testcases. Boud (talk) 14:23, 29 March 2020 (UTC)

 Done Boud (talk) 14:25, 29 March 2020 (UTC)

Second vertical axis

Is it possible to add a secondary vertical axis, to display two series at different scales? This would be useful for example to display an increasing series with its variation on the same graph. Papagon (talk) 12:40, 14 April 2020 (UTC)

Good idea. I will start working on it. Pietrasagh (talk) 09:20, 19 April 2020 (UTC)

After some tests it seems that this simple feature would require lots on work. Current way the module is building data structure for graph would need to be revised very deeply. For now you can try to draw graph in different way using Graph extension. Unfortunately it require to define graph in JSON and that's no easy. You can test it here in Graph Sandbox. Pietrasagh (talk) 14:37, 9 May 2020 (UTC)

Odd empty/blank space on graph

Template talk:Graph:Chart#That strange "empty,blank" space on timeline.
Hey!
Maybe someone knows how to remove thats odd "empty, blank" space from the start and end of graph timeline? Here I explain what I meant and here too. You can clearly see that some graph from COVID-19_pandemic_in_Poland have that odd empty space, and some don't, any solutions? thx, Natanieluz (talk) 07:44, 5 May 2020 (UTC)

Possibility of bug in scaling while using |xType=date.

The following code

{{Graph:Chart
  | width      = 900
  | height     = 300
  | xAxisTitle = Date
  | xAxisAngle = -45
  | yAxisMin   = 0
  | type       = line
  | xType      = date
  | xGrid      =
  | yGrid      =
  | x = 2020-03-12, 2020-03-13, 2020-03-14, 2020-03-15, 2020-03-16, 2020-03-17, 2020-03-18, 2020-03-19, 2020-03-20, 2020-03-21, 2020-03-22, 2020-03-23, 2020-03-24, 2020-03-25, 2020-03-26, 2020-03-27, 2020-03-28, 2020-03-29, 2020-03-30, 2020-03-31, 2020-04-01, 2020-04-02, 2020-04-03, 2020-04-04, 2020-04-05, 2020-04-06, 2020-04-07, 2020-04-08, 2020-04-09, 2020-04-10, 2020-04-11, 2020-04-12, 2020-04-13, 2020-04-14, 2020-04-15, 2020-04-16, 2020-04-17, 2020-04-18, 2020-04-19, 2020-04-20, 2020-04-21, 2020-04-22, 2020-04-23, 2020-04-24, 2020-04-25, 2020-04-26, 2020-04-27, 2020-04-28, 2020-04-29, 2020-04-30, 2020-05-01, 2020-05-02, 2020-05-03, 2020-05-04, 2020-05-05, 2020-05-06, 2020-05-07, 2020-05-08, 2020-05-09, 2020-05-10, 2020-05-11, 2020-05-12, 2020-05-13, 2020-05-14, 2020-05-15, 2020-05-16, 2020-05-17, 2020-05-18, 2020-05-19, 2020-05-20, 2020-05-21, 2020-05-22, 2020-05-23, 2020-05-24, 2020-05-25, 2020-05-26, 2020-05-27, 2020-05-28, 2020-05-29, 2020-05-30, 2020-05-31, 2020-06-01, 2020-06-02, 2020-06-03, 2020-06-04, 2020-06-05, 2020-06-06, 2020-06-07, 2020-06-08, 2020-06-09, 2020-06-10, 2020-06-11, 2020-06-12, 2020-06-13, 2020-06-14, 2020-06-15, 2020-06-16, 2020-06-17, 2020-06-18, 2020-06-19, 2020-06-20, 2020-06-21, 2020-06-22, 2020-06-23, 2020-06-24, 2020-06-25, 2020-06-26, 2020-06-27, 2020-06-28, 2020-06-29, 2020-06-30, 2020-07-01, 2020-07-02, 2020-07-03, 2020-07-04, 2020-07-05, 2020-07-06, 2020-07-07, 2020-07-08, 2020-07-09, 2020-07-10, 2020-07-11, 2020-07-12, 2020-07-13, 2020-07-14, 2020-07-15, 2020-07-16, 2020-07-17, 2020-07-18, 2020-07-19, 2020-07-20, 2020-07-21, 2020-07-22, 2020-07-23, 2020-07-24, 2020-07-25, 2020-07-26, 2020-07-27, 2020-07-28, 2020-07-29, 2020-07-30, 2020-07-31, 2020-08-01
  | y = 1.35, 2.47, 2.38, 1.82, 1.75, 2.19, 1.99, 2.31, 1.79, 1.27, 1.94, 1.92, 1.93, 1.65, 2.31, 2.28, 2.07, 2.64, 2.56, 2.51, 2.24, 2.56, 2.43, 2.44, 2.32, 2.59, 2.59, 2.83, 2.88, 3.05, 3.21, 3.23, 3.46, 3.26, 3.29, 3.29, 3.27, 3.30, 3.22, 3.17, 3.18, 3.18, 3.16, 3.08, 3.12, 3.07, 3.12, 3.13, 3.17, 3.20, 3.26, 3.24, 3.24, 3.24, 3.39, 3.43, 3.37, 3.35, 3.32, 3.35, 3.29, 3.24, 3.25, 3.27, 3.23, 3.20, 3.16, 3.15, 3.13, 3.09, 3.06, 3.02, 2.97, 2.93, 2.90, 2.87, 2.86, 2.86, 2.84, 2.86, 2.84, 2.83, 2.82, 2.80, 2.80, 2.80, 2.81, 2.81, 2.81, 2.80, 2.80, 2.83, 2.86, 2.88, 2.87, 2.86, 2.89, 3.36, 3.33, 3.30, 3.28, 3.23, 3.22, 3.18, 3.17, 3.15, 3.12, 3.08, 3.04, 3.00, 2.98, 2.97, 2.95, 2.91, 2.88, 2.86, 2.82, 2.80, 2.78, 2.75, 2.72, 2.69, 2.67, 2.64, 2.62, 2.60, 2.57, 2.55, 2.53, 2.49, 2.46, 2.43, 2.41, 2.41, 2.38, 2.35, 2.31, 2.28, 2.25, 2.23, 2.21, 2.18, 2.15
  | colors = #cd5c5c
}}

produces

The |x= data series has fields till 2020-08-01, but the rendered graph shows x axis ticks marks well over 2020-08-01.

This is not a lone event. Can be seen on various chart at Special:Permalink/970633899 and Special:Permalink/970636517.

- Timbaaa -> ping me 15:03, 1 August 2020 (UTC)

Pinging Pietrasagh. - Timbaaa -> ping me 06:17, 5 August 2020 (UTC)

@Timbaaa: I confirm this bug. Scale for axis with "date" format is not calculated correctly and marks "miss" it's place on graph by some factor. Location error changes depending on number of elements. Weirdly largest is when there are 9 elements. Please see eg. below (your have to edit this post and preview to see "correct error"):

nine elements	eight elements	xType = string

Graphs and all Wikipedia are like are like onions. "They stink?" One may say. "Yes. No." "Oh, they make you cry." "No." ... "No. Layers. Onions have layers"

In graphs, templates are first layer, then second is the module. This module only help to translate wiki code to JSON digestible by Wikimedia extension "graph", which calls "Vega" js library that use "D3" library to create graphical representation of graph. Module doesn't calculate scale. It only setup correct value in JSON for scale format and in this case forward date data as string. Bug is somewhere in third layer or deeper. Currently Vega is in version 5.something but Wikimedia extension lags behind and use version 2. You can file this bug here [1] Pietrasagh (talk) 17:41, 6 August 2020 (UTC)

Pietrasagh, I think its a problem with the module(I'm not familiar with Lua). I got the debuggable JSON for the chart based on mw:Extension:Graph/Guide#Debugging and tried it at mw:Special:GraphSandbox.

Here is the actual JSON for the chart.

According to the vega2 documentation, for `time` type `scale`; property `nice` has to be a string valued - "second", "minute", "hour", "day", "week", "month", or "year". But in the actual JSON it has a boolean type value(which is to be used for `linear`,`log`,... type scales), once changed to this the scale marks are clear(also, added 'clamp' to avoid white-spaces at beginning and end).

Missed signature in last edit; pinging Pietrasagh again with signature - Timbaaa -> ping me 07:03, 7 August 2020 (UTC)

You are correct! Wrong nice property value seems to generate both problem: wrong scale and white-space. I changed logic behind it and will push updated code with new version of module.

Pietrasagh (talk) 17:34, 7 August 2020 (UTC)

Pietrasagh, Great! thank you. It seems the main module already lags behind the sandbox for couple of versions.- Timbaaa -> ping me 02:42, 8 August 2020 (UTC)

Yep, it's all my fault. Testing by my self takes lot of time. To keep correct "supply chain" I need to update module on German wiki first. Pietrasagh (talk) 07:59, 8 August 2020 (UTC)

Update to newest version of vega?

The newest versions of vega have neat features like LOESS regression and this would be very useful for polling average as it is the best interpolation method used. - || RuleTheWiki || (talk) 14:12, 1 May 2021 (UTC)

Could this module be fed data from a wikitable instead of as explicit parameters?

That would be real game changer for Wikipedia, as charts would be automatically updated when tables received new data. Here is a good example of how to read data from tables. The module could be called with a page name (if not its own), a table id (if not the 1st one), and the columns for labels and values (if not the 1st and 2nd, respectively). It would certainly break if the table is oddly shaped or malformed, but that could be minimised ignoring header rows. This shouldn't be too hard, as this module already converts parameter values into values on tables. Here is my first crack at it. — 𝐆𝐮𝐚𝐫𝐚𝐩𝐢𝐫𝐚𝐧𝐠𝐚 (talk) 01:37, 20 May 2021 (UTC)

Guarapiranga, this functionality already exists. See Template:Graph:Lines and Template:Graph:Stacked. The data can be stored either as a table in the Data namespace at Commons or queried from the Wikidata database. StarryGrandma (talk) 03:29, 20 May 2021 (UTC)

Great! I'll use it. And I see that using data from Wikidata or Commons is much more robust, but... also less flexible. There's a ton of data on Wikipedia not imported into Wikidata or Commons (nor should it all). But still editors might see a benefit to graph it on articles. Do these methods work with wikitables? — 𝐆𝐮𝐚𝐫𝐚𝐩𝐢𝐫𝐚𝐧𝐠𝐚 (talk) 03:42, 20 May 2021 (UTC)

They are part of a project to make templates language independent. So the data is stored centrally at Commons or uses data already in Wikidata so the graph can be used in multiple language Wikipedias. See mw:Help:Tabular Data. StarryGrandma (talk) 03:50, 20 May 2021 (UTC)

I see. Even tables could benefit from accessing a central data depository. Is there a method for that? I had a look around, and couldn't find anything.

OTOH, wikitables seem to be kept up to date much more diligently than Commons Data (sort of demonstrating my point on flexibility, and therefore accessibility). Look at commons:Data:Bea.gov/GDP by state.tab, the very first source there on Template:Graph:Stacked: the data is 5 years stale, whereas the data at the List of states and territories of the United States by GDP is freshly updated.

That's not to say the effort of concentrating official data into a central repository isn't worthwhile--it certainly is!--but it doesn't replace the need for data in wikitables, and the willingness to graph it. — 𝐆𝐮𝐚𝐫𝐚𝐩𝐢𝐫𝐚𝐧𝐠𝐚 (talk) 04:07, 20 May 2021 (UTC)

Loading spinner bug

On mobile, the loading spinner appears from behind graphs drawn with this module when horizontally scrolling on them. I've filed a bug report [2], but maybe this can be solved directly in the module? —Somnifuguist (talk) 02:31, 13 July 2021 (UTC)

Right-side y-axis

I'd like to propose an enhancement to allow a second y-Axis. It's frequently the case that one might want to plot line graphs (or scatterplots) of two sets of numerical data that follow roughly similar patterns but where the data values of one set are roughly twice the other (or 3x, or 10x or whatever; e.g., slowly increasing backlogs of articles in two areas, where one set of numbers is triple the other). Here's an example of a time-series graph with two curves where y-axis is article count: curve 1 (blue) is a count of articles with 0 in-links (i.e. WP:Orphans; y-vals around 1200-1600) belonging to a particular WikiProject, and curve 2 (gold) is articles with 1 in-link (values around 4800-5200): I've hacked this below, by scaling down the 1-link values by 0.3, as follows (all data prior to April are fake; the last two datapoints are real, see quarry:63580):

What I'd like to see would be a second y-axis on the right, scaled from roughly 4400-5800, possibly with the addition of these parameters:

• |yAxis2Max=5800
• |yAxis2Min=4200
• |yAxis2Title=count of articles
• |yAxis2Format=
• |yAxis2Angle=
• |yGrid2=

The important ones are the first two, which ought to be optional and default to a calculation based on min y2 value and max y2 value, and but overrideable for fine tuning. A scale factor should be derived for biasing y2 values up or down the y-axis according to the right-side y-axis; sort of what I did with my hacky use of {{#expr:val}} on the gold curve above. The other params are cosmetic. Naturally, this only makes sense for numerical yType like integer, not date or string, etc. The last param is about deciding how to align the grid lines; default to lined up with major 'tick marks' on the left y-axis, but if |yGrid2=1, then align with right-side tick marks. Maybe |yGrid2=2 means, 'every 2nd major tick mark', to make the grid sparser. (Or maybe lines both left and right, in separate styles such as dashed or dotted?) Thanks, Mathglot (talk) 00:09, 4 April 2022 (UTC)