Template talk:SVG Chart

Big numbers[edit]

I'm very lost.

My 1 data has small values ( 0-20 ) and my 2 data has very big values ( 0-1000000 ). My problem is I can scale the 1 data/graph, but can't find how to scale the 2 data. The Ymax option only applies to the 1 data, I am presuming the 2 options for size are going to be relative to the 1 data or to Ymax or to the 1 options etc, but I can't figure out how/what to do etc.

I can not for the life of me get this to work. I really don't get the meaning of the relevant options, I really think the doc is lacking a bit there, or I'm really very very dumb. Even using the examples I can't figure this out. Even trying random values I can't seem to get things to improve ( or even worsen in a way that'd be helpful ).

Here is the ( cut-down ) config I'm using :

{{SVG Chart
| Title        = Deaths and cases per 100000 per year in the United States
| Description  = Data source : CDC
| XAxisText    = Year
| LegendType   = box
| XMin         = 1900
| XMax         = 2000
| YMin         = 0
| YMax         = 16
| YAxisText           = Deaths per 100000
| YAxis2Text          = Cases total
| YAxis2ValueStep     = 1000
| FontSize     = 60
| GraphStretchHeight = 300
| GraphWidth   = 40
| LegendX             = 80
| LegendY             = 95
| LegendFontSize      = 60
| LegendWidth         = 60
| Graph1Text          = Deaths
| Graph2Text          = Cases
| Graph1Values =
1900 13.3
1901 7.4
[...]
1967 0.1
1968 0
1969 0
1970 0
| Graph2Values =
1944 650291
1945 146013
1946 659843
1947 222375
[...]
1986 6282
1987 3655
1988 3396
1989 18193
}}

Note I know this config for the 2nd Y axis probably doesn't make sense, this is just the latest random thing I've tried out of 100 random things in the past few hours.

Any help would be immensely appreciated.

This is what I get most of the time :

Thanks !!!

--Arthurwolf~enwiki (talk) 22:38, 26 July 2019 (UTC)[reply]

EDIT : It looks like if I put my 2 data at the same scale as my 1 data it gets displayed correctly. This really sucks I really don't want my source to contain data at the wrong scale. I'm assuming there is some way to have the module/template do the scaling itself, right ? If so what is it ? If this isn't possible, it's definitely unexpected and should be mentionned in the documentation. --Arthurwolf~enwiki (talk) 11:38, 27 July 2019 (UTC)[reply]

@Arthurwolf~enwiki: Have you considered using a logarithmic scale, or effectively doing the same thing by changing the data using a log function? — Jeff G. ツ_{please ping or talk to me} 11:23, 6 August 2019 (UTC)[reply]

I have similar issues too ( [1] ). ––Handroid7 (talk) 19:43, 6 October 2019 (UTC)[reply]

Location of the source text[edit]

Hi JuTa, you have deleted some sources like File:US_Crude_Oil_Production_and_Imports.svg/source. Why? These pages contain important additional information for the charts. -- Con-struct (talk) 05:52, 21 July 2013 (UTC)[reply]

Hi, the reason was: there are no subpages in the file name space. So these pages were counting as file pages but without a file uploaded. There was nolink or other hint to them on the main file pages, so nobody was able to find them except people who knows there were there (probarbly only you). I put the source code info now onto the discussion pages of the images. See 1, 2, 3 and 4. Now other people are able to find that because the discussion pages are linked from the file pages. regards --Ju Ta 10:31, 21 July 2013 (UTC)[reply]

Hi, thank you that the sources are available again. The main pages have a link under e.g. Code to generate SVG See: File:US_Crude_Oil_Production_and_Imports.svg/source. May be the action&edit query don't produce a link to …/source. -- Con-struct (talk) 14:24, 21 July 2013 (UTC)[reply]

Hi JuTa, you have deleted again a subpage. But now the link is visible, see Pages that link to .... Or are subpages generally forbidden? -- Con-struct (talk) 14:49, 22 July 2013 (UTC)[reply]

Hi, yes, in the file namespace there are no subpages configured an such pages appering frequently on error lists. I now modified the template {{SVG Chart/box}} that not the subpage .../source will be linked but the talk page. I hope thats now in our both sense. Thx and regards. --Ju Ta 18:16, 22 July 2013 (UTC)[reply]

Fixed. Link needs to be removed or updated[edit]

Please see: File talk:US unemployment rate under President Obama.svg

I can not figure out where this text came from in the source section:

Mark and copy the following text. Paste it into a plain text file. The text file should have an svg extension, for example mychart.svg.

You can check the result here or here.

That text does not show up when I click on the edit button for the talk page.

One of the links in that text no longer works. This one:

http://toolserver.org/~jarry/svgcheck/stable/index.php

Please remove it. --Timeshifter (talk) 03:56, 8 November 2014 (UTC)[reply]

This has been fixed. See User talk:Delphi234. See the section "File talk:US unemployment rate under President Obama.svg" --Timeshifter (talk) 10:09, 11 November 2014 (UTC)[reply]

The links are in Template:SVG Chart/Core. --Timeshifter (talk) 23:10, 13 November 2014 (UTC)[reply]

Template:SVG Chart errors[edit]

Moved from Commons:Village pump -- Offnfopt^(talk) 12:07, 18 June 2015 (UTC)[reply]

It still seems to work, but I am getting warning errors:

Editing File talk:Electricity production in France en.svg (section) Preview Remember that this is only a preview. Your changes have not yet been saved! → Go to editing area

Warning: Template:SVG Chart is calling Template:SVG Chart/Core with more than one value for the "" parameter. Only the last value provided will be used.

Warning: Template:SVG Chart is calling Template:SVG Chart/Core with more than one value for the "FontSizeTitle" parameter. Only the last value provided will be used.

Warning: Template:SVG Chart is calling Template:SVG Chart/Core with more than one value for the "LegendFontSize" parameter. Only the last value provided will be used.

I can not see any change that was made to the template. Delphi234 (talk) 02:15, 11 June 2015 (UTC)[reply]

Maybe the previous version(s) of mediawiki were less verbose regarding errors. The first error is because of the way the if statements are being used. The first example of this is:
| {{#if:{{{XMax|}}} | XMax }} = {{{XMax|100}}}
If the XMax parameter isn't passed to the template then a parameter with no name and the value of 100 is passed to the template. There are multiple instances of this. This is because the closing brackets }} for the if statement are before the = so this makes the parameter have no name when the value is not set. I'm not quite sure why the if statements were used since could have just as easily used | XMax = {{{XMax|100}}}
The other two errors occur because the same parameter name is used more than once in the template, for example with the FontSizeTitle parameter it is first set on the line:
| {{#if: {{{FontSize|}}} | FontSizeTitle }} = {{{FontSize|}}}
then again is set on the line:
| {{#if: {{{FontSizeTitle|}}} | FontSizeTitle }} = {{{FontSizeTitle|}}}
These errors don't stop the template from running as you noticed since like the error message says: Only the last value provided will be used. So while the template could use some love, nothing fatal is occurring. Offnfopt^(talk) 06:27, 11 June 2015 (UTC)[reply]

Thanks. I hope that someone can take the time to clean this up. I think anyone trying to use it is going to be easily scared off by the warning statements. There are many optional parameters, but perhaps they are not very cleanly addressed. One other thing at the same time is, if you compare File:US Top 1 Percent Income.svg and File:US Top 10 Percent Income.svg the former was edited to remove the spaces around " x ", and the latter was not, which affects getting a clean bill of health from the valid SVG check. There is another SVG generator that is under development, but for now this one is still getting a lot of use. Another oddity is that you can not use three significant digits for scaling the graph (GraphStretchWidth and GraphStretchHeight). The width always seems to be 750, with both only affecting the height, but if you try to set one to say 147, you only distort the graph, because in one place it is used as 147, and in another place as 140, I think, causing the data plot to not match the legend. Delphi234 (talk) 17:56, 11 June 2015 (UTC)[reply]

@Delphi234: alternatively you could use the Graph Extension. I know it is enabled on the English Wikipedia and on Commons and is very likely enabled on the other wikis. I was playing around with it in my Sandbox. I plugged in some sample data. You can see the demo graph here and the CSV data it is using to generate the graph here (Note: I added a extra field consisting of double spaces to the CSV so the wiki page would add a <pre> tag and display the data nicely, but this isn't required). This is just a sample, but you can get the idea of how it can be used from the sample. The Graph Extension supports a wide number of graph types, so it should be pretty versatile once you get the hang of it.Offnfopt^(talk) 06:45, 13 June 2015 (UTC)[reply]

The Graph Extension does create primitive graphs, and now has pie charts, but not anything that can be used anywhere else. It has to be implemented separately on every wiki, and translated separately, making maintenance far more difficult than having a chart on commons. Some charts are used on 50 to 100 separate wikis, and with <switch>, have all 100 languages within the same file, meaning in a few seconds they can be updated in all 100 wikis - if only the data is being updated. Delphi234 (talk) 10:58, 13 June 2015 (UTC)[reply]

The first error is still present, causing 106 errors at this time. I'm trying to clear out the backlog at Category:Pages using duplicate arguments in template calls .--Auric (talk) 16:48, 29 May 2016 (UTC)[reply]

Big SVG bug[edit]

Tracked in Phabricator
Task T36947

The SVG font-rendering is still very buggy. A font-size of 2px or lower is completely useless. @Con-struct: I recommend to change the dimension-size of the SVG format (per viewBox) to fit the font-size around 80px. ↔ User: Perhelion 16:37, 16 February 2016 (UTC)[reply]

Some of these can be fixed by increasing GraphStretchWidth and GraphStretchHeight by a factor of 2 or 3, and decreasing GraphWidth and any Graph1MarkerSize, Graph2MarkerSize etc. by the same factor. Delphi234 (talk) 20:10, 18 February 2016 (UTC)[reply]

There are two recommendations I would like to make. One, 80px seems pretty big and I would recommend normalizing to 12 or 16 or 20px instead, and second, I recommend leaving a parameter like "ImageSize" which now defaults to 100 as a parameter that can be used to scale whatever you do. For example if you automatically scale text to 16px, it could be used with a value of 200 to scale the text instead to 32px. Or if you do choose 80px, a value of 20 would scale text to 16px, or at least some of the text. Delphi234 (talk) 04:37, 20 February 2016 (UTC)[reply]

Embed source template syntax[edit]

As mentioned above font-rendering in SVG is not working well. If someone like me stumbles over such a broken SVG it is really hard to fix it.

To improve handling of generated charts I'd recommend to embed the syntax which generated the chart into the SVG. In this case one can easily update and modify charts. Best place is the <desc> tag because it is shown on the media description.

Imagine someone wants to update some graphs. No clean way to do!

-- Menner (talk) 18:18, 17 February 2016 (UTC)[reply]

Normally the talk page of the chart has the source code that was used to create the chart. Delphi234 (talk) 20:04, 18 February 2016 (UTC)[reply]

Who could guess that! Use < source > tag to show plain wiki syntax. See [2]. Any way automation is better than user interaction. -- Menner (talk) 19:04, 19 February 2016 (UTC)[reply]

All that does is stop the template from working. If you want to see the source, click "Edit". Delphi234 (talk) 04:43, 20 February 2016 (UTC)[reply]

Translations?[edit]

Manually re-adding translations with ‎<switch>...‎</switch> elements is a pain. See, for example, File:Lithium world production.svg. The translations would ideally be kept in the same template call on the talk page as the actual data. Is this on the drawing board anywhere? grendel|khan 18:25, 27 September 2016 (UTC)[reply]

Different types of charts[edit]

Are there plans to support charts other than line charts? Eg. pie charts, scatter plots, etc. Devon Fyson (talk) 22:35, 29 November 2016 (UTC)[reply]

Category:Pages using duplicate arguments in template calls[edit]

Hi everyone, lots of files using this template end up in the mentioned category.[3] When previewing such a file one gets a: "Warning: Template:SVG Chart (edit) is calling Template:SVG Chart/Core with more than one value for the "" parameter. Only the last value provided will be used." Anyone, has an idea what is wrong in the template usage? --Arnd (talk) 10:34, 7 June 2017 (UTC)[reply]

Font looks strange[edit]

Could anyone take a look at File:Airbus_boeing_orders_and_deliveries.svg and tell me why the font isn't rendered correctly? I don't really know what else to try... thanks, --Rabenkind (talk) 23:10, 9 June 2017 (UTC)[reply]

This is the "under 2px font size" bug listed on the template page. It used to work fine up until about May 2015, but the rendering was changed to apparently only use integer size font pixels. This one uses font-size: 1.62px and is probably rendered using font-size: 1px in one dimension and 1.62px in the other. The rendering just needs to support pixel sizes less than 1, e.g. 0.3. A work around is to multiply the graph size in each direction by two or three. Right now it uses the default GraphStretchWidth and GraphStretchHeight of 100. If you add these and use 300 for each the font changes to 4.86px. Adding GraphWidth = 30 keeps the line widths. Delphi234 (talk) 17:13, 30 October 2017 (UTC)[reply]

SVG error trailing space[edit]

This template had been using fill=" x " for the marker shape but the spaces were removed today so that it uses fill="x". Many of the previously created charts may still have this svg error if it had not been repaired manually. Delphi234 (talk) 17:13, 30 October 2017 (UTC)[reply]

Too hard to use[edit]

As of February 2019, most of the instructions on the SVG Chart page can be nicely automated but currently require manual work, which makes the task of creating a chart unnecessarily complicated.

There should be a form-based editor where I can just enter the title, the axis descriptions and the data. Entering the data should result in an immediate preview. When I'm satisfied with the result, the remaining instructions of where to put the source code and how to upload the generated file should be available. All steps that can be done automatically should be done automatically though.

This especially helps Wikipedia authors who are not familiar with editing structured "plain" text with lots of escaping and indentation rules.

It just cannot be that I spend over 90 minutes producing a simple chart, when the same task should be possible in 5 minutes.

--RolandIllig (talk) 17:03, 9 February 2019 (UTC)[reply]

But it is still a masterpiece of template programming. But yes, I also have some trouble figuring it out. ––Handroid7 (talk) 18:07, 6 October 2019 (UTC)[reply]

I have now updated and expanded the instructions at any rate. Hope this helps. KarlFrei (talk) 11:10, 11 February 2020 (UTC)[reply]

Function plots[edit]

It would be nice if one could add function specifications that would then be plotted, instead of supplying discrete data points. This would be useful for linear approximations and for generating plots of common functions in a standardized layout. 2A01:C22:C03B:7E00:90EF:C816:8288:1F1C 08:33, 20 January 2020 (UTC)[reply]

Maintenance[edit]

Maintenance of this template is under discussion at COM:GL/I#SVG Chart. — Jeff G. ツ_{please ping or talk to me} 16:12, 5 February 2020 (UTC)[reply]

move to {{Created with Wikimedia.svg.chart}}[edit]

{{Igen|Wikimedia.svg.chart}}

Data format	The source data of the chart is in the SVG image file in a clearly readable format. You see the original numbers inside of the SVG file in the form of a list such as this: ... 1995 10.06 1996 11.75 1997 12.45 ...
Content of SVG	To view the data download the SVG file itself. To do so right-click this link, and then choose the option to save: Template talk:SVG Chart. Launch any text editor. Open the downloaded SVG file with the text editor (usually; file menu, open). To see the list of data, search for the phrase `id="graph1"`.
Edit SVG	Please, do not use a special SVG editor such as Inkscape; the readability of the database would be destroyed. You can edit the SVG file with any text editor, for example; en: List of text editors. You can view the edited SVG file in various web browsers. As of 2011, all major desktop browsers, and many minor ones, have some level of SVG support. See: en: Scalable Vector Graphics#Support for SVG in web browsers. When satisfied with your edits, upload the edited SVG file with the link labeled "Upload a new version of this file".
Code to generate SVG	See: Template talk talk:SVG Chart. Documentation see: Wikimedia SVG Chart.

@Sarang: Should this template moved to {{Created with Wikimedia.svg.chart}}? (It categorizes in Created with Wikimedia SVG Chart.)

— Johannes Kalliauer - Talk | Contributions 12:23, 22 March 2020 (UTC)[reply]

Hallo Johannes, natürlich kann ich so eine "created-with"-Vorlage basteln. Soll es eine bestimmte igen-Abkürzung geben, zB "Wsc" ? IMHO sollte es irgendwie auch zu {{Wpdc}} passen. -- sarang♥사랑 13:15, 22 March 2020 (UTC)[reply]

Now it occurs automatically: When the SVG-check reads the SVG source code it detects where it is generated from, and makes the link -- sarang♥사랑 10:16, 5 January 2023 (UTC)[reply]

duplicate arguments[edit]

Hello, for example, File talk:2006-2014 FPS ACT Composite.svg is categorized in Category:Pages using duplicate arguments in template calls. I simplify the problem : see User:Gzen92/Brouillon2 call User:Gzen92/Brouillon but I don't know where the problem comes from! Thanks. If I remove one of the two parameters ("Footnote" or "Background") it works. Gzen92 ^[discuter] 14:10, 4 October 2021 (UTC)[reply]

I think it comes from Template:SVG_Chart/Core. Gzen92 ^[discuter] 06:57, 5 October 2021 (UTC)[reply]

I read the syntax of If, I do not understand "| {{#if: {{{Footnote|}}} | Footnote }} = {{{Footnote|}}}", shouldn't it be "| {{#if: {{{Footnote|}}} | Footnote = {{{Footnote|}}} }}"? Gzen92 ^[discuter] 12:50, 5 October 2021 (UTC)[reply]

Is this Template working? Example code produces a broken chart[edit]

I am looking for help!
Ask your question below. You can also look at the Contents, ask at the Help desk, or ask users on the #wikimedia-commons ^webchat IRC channel.
Note to helpers: Once you have offered help, please replace this template with {{Helped}} en|English|question|Skierpage

Hi, I was trying to produce a chart, but the generated SVG was empty.

So I tested the example:

{{SVG Chart
| XAxisText    = Year
| YAxisText    = Index
| LegendType   = none  

| XMin         = 1990
| XMax         = 2015
| YMin         = 5
| YMax         = 20
| Graph1Values =       
     1990 6.16
     2000 10.72
     2005 11.15
     2012 17.29
}}

And again, it produces a broken chart. You can see 2 labels "1st W" and "2nd W", some axis, but no data. Seeing the generated SVG code it looks like it is using the default data, and default labels. This is the original sample's SVG code, and you can test it at w3schools.

Am I doing something wrong? Is this template broken?

Thanks. --Ni.cero (talk) 12:58, 7 February 2022 (UTC)[reply]

So, I've managed to generate the SVG using:

{{#invoke: SVG_Chart | SVGChart |

It's not clear to me if I should have always used that module, or if this tamplate should work too.

There is just a final note on this template's documentation, and I interprate it as something optional.

--Ni.cero (talk) 02:45, 8 February 2022 (UTC)[reply]

Liberation Sans font[edit]

See:

Template talk:SVG Chart/Core

--Timeshifter (talk) 04:45, 26 March 2023 (UTC)[reply]

This should explain itself better[edit]

Incredible stuff! But it's hard to figure out what's going on. The key is the template generates SVG source code that the chart author then uploads as an SVG. By convention, the chart author puts the invocation of {{SVG Chart}} on that SVG file's talk page; but if you go to the talk page, all you see is what looks like elaborate hand-written SVG code for the chart. It's not until you Edit the talk page that you see the template invocation and all the parameters and data that made the chart. It only makes sense after you grasp it ;-)

To improve the discoverability, the template should generate better self-documentation. I suggest:

The generated green table row on the file page "Code to generate SVG" should say something like
An invocation of the template {{SVG Chart}} generated this SVG. To see this template invocation and its parameters and data, edit its talk page File talk:US Crude Oil Production and Imports.svg.
The template's output (the stuff on the talk page under a green SVG Chart heading), should say something like
This text and the SVG source code below are the output of an invocation of {{SVG Chart}}. To see this template invocation and its parameters and data, edit this page.

(It would be better if there were an action to view source of a page that could then be the link to the talk page, but I think the only way to see the source of a page is to edit it.) -- Skierpage (talk) 10:17, 1 August 2023 (UTC)[reply]