GeezerVisonThe World Wide Web, restored to 800 pixels of glory. | ||||||||||||||||||||||||||||||||
| Home|About|Gaming cabinet|Archives|How it works|Starter sites | ||||||||||||||||||||||||||||||||
GeezerVison is showing www.mediawiki.org — Extension:Chart - MediaWiki
The Chart extension provides basic interactive data visualization capabilities designed to replace some but not all aspects of the Graph extension. This extension is currently in development for Wikimedia wikis. See Extension:Chart/Project for more details on the development process. This extension supports the following chart types: InstallationThe Chart extension requires having the JsonConfig extension installed, as well as downloading the Chart Renderer JavaScript (actually TypeScript) library. See the README.md file in the repository for the full setup instructions. Wikimedia productionFor Wikimedia production usage, see wikitech:Kubernetes/Deployments#Cheatsheet for general instructions on service deployments. Key bits here:
How to useTo render a chart, you must define a chart definition to associate with the tabular data source you want to render. A chart definition is structured as a relatively simple JSON file; see Extension:Chart/Specification for the syntax details. All the charts in this example can be rendered from the same data source: Data:Chart Example Data.tab, a fictional dataset. Sample contents for these pages can be found in the sample directory. Data:Example.chart { "license": "CC0-1.0", "version": 1, "source": "Chart Example Data.tab", "type": "line", "title": { "en": "Example Chart Title" }, "subtitle": { "en": "Example Subtitle" }, "xAxis": { "title": { "en": "Example X Axis Title" }, "format": "none" }, "yAxis": { "title": { "en": "Example Y Axis Title" }, "format": "none" }, "mediawikiCategories": [ { "name": "Example category", "sort": "Its sortkey" } ], "transform": { "module": "Optional lua module for data transforms", "function": "transform_func", "args": { "arg_name": "arg_value" } } } Once a chart is defined, you can render it easily using the #chart parser function. In this case, the chart data is defined in Data:Chart Example Data.tab, and the chart itself is defined in Data:Example.Line.chart: Wikipedia article title {{#chart:Example.Line.chart}} Note that a chart can be generic and reused with different data sources, like so: {{#chart:Population through years.chart |data=Population of USA.tab }} {{#chart:Population through years.chart |data=Population of UK.tab }} {{#chart:Population through years.chart |data=Population of Poland.tab }} Deprecated formatsThe Chart definition JSON format originally allowed the Deprecated: { "license": "CC0-1.0", "description": { "en": "1993 Canadian federal election" }, "title": "Example chart", "xAxis": { "title": "month" }, "yAxis": { "title": "votes" }, } This should instead be: { "license": "CC0-1.0", "description": { "en": "1993 Canadian federal election" }, "title": { "en": "Example chart" }, "xAxis": { "title": { "en": "month" } }, "yAxis": { "title": { "en": "votes" } }, } Date formats in tabular dataCurrently the extension doesn't properly support date formats, but is able to show dates in a string format (numbers not supported) on the X-Axis when configured as such. To correctly display dates are currently required to be formatted as strings that are exactly 10 characters long in the format:
This means the date format of Wikidata is for example not supported at the moment.
Other 10 character strings that are parseable by JavaScript's When dates are detected in the first column of the tabular data, they will be automatically localized based on the wiki's content language. Below is an example that shows a date format that will correctly display. { "license": "CC0-1.0", "description": { "en": "1993 Canadian federal election" }, "mediawikiCategories": [ { "name": "Data:.tab", "sort": "" }, { "name": "Data:Examples.tab", "sort": "" } ], "schema": { "fields": [ { "name": "date", "type": "string", "title": { "en": "Date", "fr": "Date" } }, { "name": "pc", "type": "number", "title": { "en": "PC", "fr": "PC" } }, { "name": "liberal", "type": "number", "title": { "en": "Liberal", "fr": "Libéral" } }, { "name": "ndp", "type": "number", "title": { "en": "NDP", "fr": "NPD" } }, { "name": "bq", "type": "number", "title": { "en": "BQ", "fr": "BQ" } }, { "name": "reform", "type": "number", "title": { "en": "Reform", "fr": "Réform" } } ] }, "data": [ [ "1993-09-09", 35, 37, 8, 8, 10 ], [ "1993-09-14", 36, 33, 8, 10, 11 ], [ "1993-09-20", 35, 35, 6, 11, 11 ] ] } See examples on Commons: For years, the dates can be numbers: { "license": "CC0-1.0", "description": { "en": "New Zealand annual wine production, in millions of litres" }, "sources": "Statistics from New Zealand Winegrowers 1998–2024 annual reports", "schema": { "fields": [ { "name": "year", "type": "number", "title": { "en": "Year" } }, { "name": "production", "type": "number", "title": { "en": "Wine produced (million litres)" } } ] }, "data": [ [ 1990, 54.4 ], [ 1991, 49.9 ], [ 1992, 41.6 ], [ 1993, 32.5 ], [ 1994, 41.1 ], [ 1995, 56.4 ] ] } Example of charts and tabular data with years on the x axis:
See Support for dates ADR in gerrit for more details on date support. CustomizationThe ten Hex colors available. Customization of charts is currently limited. The hope is that, after testing, discussion and evaluation, solutions for customization can be found that do not compromise accessibility, device-specific rendering, or security. SizingCurrently, charts occupy the entire container width where you place them. There is no way to adjust the height. The eventual goal is to ensure that charts can be rendered legibly no matter what device they are read on; see T376845 for more details. ThemingCurrently, charts are restricted to a single default color palette. This palette has been carefully designed with accessibility in mind. The thinking behind these color choices can be explored in T369863. Some charts do require specific color themes, for example, to represent data relating to political parties. It remains an open question of how best to support this type of customization without compromising the ability of readers with accessibility needs (e.g., color blindness) to use them. Note of cautionNote, while charts currently render SVG output which can be styled via TemplateStyles, please note that styling associated SVG elements should not be considered stable as it may change at any time. Please do not rely on CSS to alter chart appearance as this may result in non-functional charts in future or may interfere with accessibility features that change font size and features such as dark mode. InternationalizationCharts can only be embedded in the wiki's content language; so, for example, the "uselang" query string (e.g. The chart format supports defining text like title and labels in different languages, so that the same chart can be used in wikis of different languages. See this example of a chart with support for multiple languages being displayed in a Spanish-language wiki. Known issuesSee this filtered view of the Charts Phabricator board. Types of chartFor all charts, data is expected to be arranged in columns, with the first column representing the LineThis is an example of a line chart. In the following example, the Wikipedia article title {{image frame |content={{#chart:Example.Line.chart}} [[commons:Data:Chart Example Data.tab|'''Raw data''']] |width = 340 |caption = This is an example of a line chart. }} See the result in this section. BarHere the chart spans the full width of the page content area: Wikipedia article title {{#chart:Example.Bar.chart}} <div align="center">[[commons:Data:Chart Example Data.tab|'''Raw data''']]</div> This results in: AreaPiePie charts are a special chart type, and data sources may require modification to be rendered appropriately. When reading data, any non-number columns (e.g., the x-axis) will be discarded, and the sum of all rows will be represented on the chart. For example, where multiple rows depict values for A, B, and C on numerous dates, e.g., January 1st and January 2nd, the pie chart segment for A will represent the sum of all A's row values across those dates. Finding existing chartsCharts that can be used in articles live on Wikimedia Commons and can be tracked using MediaWiki categories. This query can be used as a proxy to find charts that others have made and contribute translations, and this to find tab pages that may be used to produce charts. The set of wiki pages that use charts on any particular wiki can be found in the category whose name is defined at MediaWiki:chart-render-category and MediaWiki:Chart-error-category (Category:Pages using the Chart extension and Category:Pages using the Chart extension with rendering errors on this wiki). Please make sure to connect your wiki categories to d:Q131382738 and d:Q131406605 to make the interwiki search easier. Migrating from the Graph extensionPlease see the category Wikipedia pages with disabled graphs in various languages for old graphs that need to be migrated to the Charts extension. Some have however already been deleted without replacing them with new charts. The list can be compared with an archived list of the first 200 out of 23,811 English Wikipedia pages with disabled graphs from 2023, soon after the templates were added to that category, and corresponding in other languages. Technical documentationGiven the problems with Extension:Graph , all the decisions regarding the new extension have been carefully considered, with the hope of building trust and confidence in its replacement. So far, the technical decisions are documented in the code repository in the /doc/adr folder. Error monitoringFailing .chart pages are automatically stored in commons:Category:Pages using the Chart extension with rendering errors. Wiki pages with faulty charts are automatically stored in Category:Pages using the Chart extension with rendering errors in different language versions. Errors with client side chart rendering will be logged to logstash. (Only for developers.) Tools for producing the chartsThere are several conceivable methods to semi-automatically produce and edit the charts and their tabular data:
See also
Categories:
Hidden categories: | ||||||||||||||||||||||||||||||||
| You are visitor 01402503 — GeezerVison does not store the pages you look up. Best viewed with Netscape Navigator 4.7 or Internet Explorer 6 at 800×600. No cookies required. | ||||||||||||||||||||||||||||||||
