Template talk:Bar chart

Vertical version

I would like to use this chart with vertical bars. I see it could probably be done in CSS (see this page). Is someone able to incorporate it into the template?--Kozuch (talk) 21:15, 22 October 2011 (UTC)[reply]

There are other templates that provide vertical bars. You could either use the "rect" type in Module:Graph or Template:Vertical bar chart.--Snaevar (talk) 22:07, 27 December 2015 (UTC)[reply]

Notes

How would I add a line at the bottom for notes, references, etc. Would be great information to add to my chart.Jhunt47 (talk) 02:12, 6 November 2011 (UTC)[reply]

Proposal to add (many) more bars to this chart and make it sortable, by label

I'm not sure if this presents a technical challenge, or if there is an alternative way to achieve it, but I would like to propose adding additional bars to the chart (or somehow make it open ended) and also add the ability to sort the bar chart by label. The usage case I have in mind is here. As can be seen, the cart is broken into five smaller charts because the number of bars is limited to 25.- Mr X 15:19, 19 November 2014 (UTC)[reply]

MrX, on my "to do" list, but for now I switched it to a different format. if you don't like it, feel free to switch it back. Frietjes (talk) 18:48, 19 November 2014 (UTC)[reply]

Thanks Frietjes. That was the solution I had in mind as an alternative. Thanks for saving me the effort!- Mr X 19:30, 19 November 2014 (UTC)[reply]

I’ve hit the limitation of the number of rows when expanding the Active missions at Mars at Exploration of Mars. Expanding the limit even slightly ( to 30) would change the graph. Furthermore, the fact that the limitation was at 25 and not a more usual binary limitation (like 15, 16, 31, 32) made me lose time trying to find a typo in my wikicode. Frédéric Grosshans (talk) 14:12, 24 October 2016 (UTC)[reply]

Frédéric Grosshans, I plan to rewrite this in LUA, at which point, the only limitation will be the server limits. but, until that happens, you can always try {{bartable}}, or just use the format you are using now. Frietjes (talk) 21:14, 21 November 2016 (UTC)[reply]

Template-protected edit request on 26 November 2015

This edit request has been answered. Set the |answered= or |ans= parameter to no to reactivate your request.

On a small screen parts of bars are displayed outside the enclosing table. See https://en.m.wiki.x.io/wiki/Islamic_State_of_Iraq_and_the_Levant#Military_and_resources for example. Adding 'position: relative' to the first div child of the trs seems to fix the issue.

Bmansurov (WMF) (talk) 12:47, 26 November 2015 (UTC)[reply]

@Bmansurov (WMF): probably safer if you make the change to Template:Bar chart/sandbox. Regards — Martin (MSGJ · talk) 14:22, 27 November 2015 (UTC)[reply]

Thanks all for the replies. I made a change to Template:Bar chart/sandbox. Could someone please tell me what's wrong with my change? I don't see my changes on the test page even after purging the page. Bmansurov (WMF) (talk) 11:24, 1 December 2015 (UTC)[reply]

To editor Bmansurov (WMF): Recent changes to the template appear okay in mobile view and on my Android device, so I wonder if your small-screen device renders the bars well and inside the right border? Paine 23:34, 11 December 2015 (UTC)[reply]

Unlike one of the templates in the See also section, {{Bar chart}} does not expressly meet accessibility guidelines, and yet it is used in both the mobile and non-mobile versions of articles. It is hoped that this template is on somebody's "make mobile accessible" list and will either be replaced by a corrected template in mobile versions or itself be upgraded. Be prosperous! Paine 19:48, 27 November 2015 (UTC)[reply]

Request disabled pending changes to sandbox. — Martin (MSGJ · talk) 12:12, 30 November 2015 (UTC)[reply]

Not mobile friendly

When a bar chart row has width 30em it breaks the mobile rendering as the fixed width bar is larger than the container.

To demonstrate visit Islamic_State_of_Iraq_and_the_Levant#Foreign_fighters_in_Syria_and_Iraq in the mobile skin and resize your browser to 320px.

Suggested fix - wrap the elements in overflow:scroll OR even better use % widths. Jdlrobson (talk) 01:42, 1 December 2015 (UTC)[reply]

Jdlrobson (talk) 01:42, 1 December 2015 (UTC)[reply]

To editors MSGJ, Bmansurov (WMF) and Jdlrobson: Because of the nesting going on within this template, it is a hard one to make accessible to mobile devices and screen readers, as you probably know. I've made a start with this by experimenting with the parameters (params) passed by this template and the bar_widths within this template. The first four sections on the testcases page show:

the live template with no params
the live template with one param
the live template with two params
the sandbox template with all bar widths decreased from 30em to 15em

None of these are bad looking on my desktop screen, and they all look good on my Android phone when I hold it horizontally; however, the moment I turn the phone and hold it vertically, the section one live template shows the upper three bars extending out to the right past the border of the chart. On the other hand, the sections 2–4 charts look acceptable (no bars extending beyond the chart borders) on my phone screen even when I hold it vertically. The sandbox versions of sections 5–8 look good on my phone as well. Implementation would require a choice between:

editing each individual template use by adding one or two parameters (472 transclusions), or
editing this template with the sandbox version.

We should probably seek a wider consensus and even expert project advice before any changes are made. Happy holidays! Paine 17:11, 2 December 2015 (UTC)[reply]

Thanks for this User:Paine Ellsworth. In the mobile site we have this similar issue on many tables. This is problematic as it can force an increase in the viewport making the entire article more difficult to read. We tend to workaround this issue by making the width of the container 100% and adding horizontal scrolling element - this works well on the majority of new phones making the content acceptable (I'm a mobile developer at the Foundation - not sure if that's the kind of expert advice you were hoping for?) Jdlrobson (talk) 19:44, 2 December 2015 (UTC)[reply]

It's a pleasure Jdlrobson, though it looks as though all problems have been solved. I don't know what has happened since Wednesday, as I can no longer see the bars of this chart on my android – everything else, but not the bars themselves. So I revisited the link you gave above, and while I can see the bars of this chart on the non-mobile version, the mobile version also does not show the bars of this chart, at least not on my desktop display. So it would seem that there has possibly been a software fix? Who needs the bars as long as the numbers are still shown? Too easy? If this is someone's idea of a "fix", in my opinion it's been botched! Those bars are there for a reason and should not be eliminated – they should instead be rendered well. Paine 04:16, 4 December 2015 (UTC)[reply]

This should be revisited to determine if a bug should be reported. Look once again at the testcases page, then near the bottom find and click the "Mobile view" link. Whatever change has been made was decidedly no improvement of this template! Paine 09:39, 6 December 2015 (UTC)[reply]

I just finished reading WP:Template limits (linked from the /testcases page) and its talk page, and I strongly suspect that is why the last two testcases render badly on my system in mobile view. This is a complicated template with a lot of nested stuff, so the final testcases probably do exceed the template limits for the testcases page. Still, I would like to find out more about whatever happened to the bars of this template in mobile view, so I will ask at VPT. Happy holidays! Paine 18:40, 8 December 2015 (UTC)[reply]

To editor Jdlrobson: I'm now aware of your change made with this edit and that it removed the bars from mobile view without discussion. I don't understand how you can see complete elimination of the bars of this chart as a solution to the problem? Paine 20:25, 9 December 2015 (UTC)[reply]

To editor Jdlrobson: I did more tests and found that by reducing the widths from 30 to 15em, the bars are rendered well in mobile view. Both the testcases page and the ISIL graph render well on my Android phone. Now that the bars are back and rendering well in mobile view, another option has been given us by Mr. Stradivarius in a discussion at the Village pump. Mr. Stradivarius suggests that it would be even better to convert Template:Bar chart to use mw:Extension:Graph via Lua. Do you agree that this is an even better solution? Paine 17:31, 11 December 2015 (UTC)[reply]

Extension:Graph would not be an drop in replacement. According to the docs, Graph can not show text on top of the bars themselves. It would use axes instead of those. Other than that, it should be able to replicate other features that this template has.--Snaevar (talk) 22:10, 27 December 2015 (UTC)[reply]

Add color to the bars

I wish you could add colors to the bars.

you can. Frietjes (talk) 14:44, 29 December 2016 (UTC)[reply]

Feature suggestion: Sortable + colouring individual bars.

Origin of suggestion: Wikipedia:The_case_against_G13#Word_count. –– Handroid7 【talk】 21:11, 15 October 2019 (UTC)[reply]

Blank cells, how?

When I don't have data for a cell and leave it blank, it removes all cells to its left. How can I have a blank cell, because adding 0 would be incorrect? -- Jeandré, 2020-03-11t11:02z

I have the same question. I have added a test case to demonstrate the problem. Putting in something like {{sp}} or {{sdash}} or — causes various errors. – Jonesey95 (talk) 19:04, 4 November 2021 (UTC)[reply]

I believe that I have fixed this problem in {{Bar chart/bar}} by allowing the use of – (dash) in place of an empty cell, as a placeholder. I added a note to the template documentation. – Jonesey95 (talk) 23:11, 19 November 2021 (UTC)[reply]

Create a column graph for a school mark sheet showing name of 20 students with six main subjects and total.

J 103.48.108.178 (talk) 14:58, 2 May 2024 (UTC)[reply]

Mobile fixes

The live version on mobile has broken horizontal scrolling for wide charts and a lot of grey negative space on narrow charts. I'm testing fixes in the sandboxes. They look good on Android Chrome, the Android Wikipedia app, and Android Firefox. Could someone on iPhone and iPad take a look at the testcases page and see how it looks? Rjjiii (ii) (talk) 04:32, 3 June 2024 (UTC) edit 04:59, 3 June 2024 (UTC)[reply]

Also, shouldn't Template:Bar chart/bar default to "—" as mentioned at Template:Bar chart/doc#Empty cells? It needs a default value to avoid breaking layouts; right now it emits "300,000" if left blank. Rjjⁱⁱⁱ (talk) 05:11, 3 June 2024 (UTC)[reply]

Mobile fixes applied and documentation updated. I didn't mess with the "300,000" because I figure there was some reason for it at some point. Rjjⁱⁱⁱ (talk) 23:50, 6 June 2024 (UTC)[reply]

Dark mode error

Origins of the 19 hijackers
Nationality	Number
Saudi Arabia	15
United Arab Emirates	2
Egypt	1
Lebanon	1

This template does not appear in dark mode and is unreadable due to white text on a white background. See: September 11 attacks and Mediawiki dark mode error page where this has also been reported. [1] --Kabelsalat22 (talk) 15:53, 23 July 2024 (UTC)[reply]

@Kabelsalat22: I've moved the styles of the sandbox version into a TemplateStyles page and added separate background colors for dark mode. I need to test the bar colors still. I've added the chart from the linked page here using the sandbox code. Before I do more, is this what the WMF is expecting for templates that have background colors? It's what I get from the documentation,[2] but it seems like a massive amount of work to patch every template with a background color. Rjjiii (ii) (talk) 22:53, 23 July 2024 (UTC)[reply]