Extensión:Chart

Manual de extensiones de MediaWiki

Chart Estado de la versión: estable
Implementación	Etiqueta
Descripción	Renders charts
Autor(es)	TODO
Política de compatibilidad	La rama maestra mantiene la retrocompatibilidad.
MediaWiki	>= 1.45
Cambios en la base de datos	No
Licencia	Licencia Pública General de GNU 3.0 o posterior
Descargar	Descargar la extensión. Git [?]: Explorar el repositorio (Phabricator · GitHub) revisión de código historial de cambios Download source tarball README
Parámetros $wgChartRequestSizeLimit $wgChartProgressiveEnhancement $wgChartTransformsEnabled $wgChartServiceUrl $wgChartCliPath
Ganchos utilizados LinksUpdateComplete PageSaveComplete ParserFirstCallInit
Traduce la extensión Chart si está disponible en translatewiki.net
Incidentes	Tareas abiertas · Reportar un error

Chart es una extensión representadora de gráficos que sustituye a la extensión Graph , y quizás también a la extensión $3. La extensión se encuentra en desarrollo para los wikis de Wikimedia en estos momentos. En Extension:Chart/Project hay más detalles sobre el proceso de desarrollo.

Esta extensión admite estos tipos de gráfico:

• Gráfico de líneas
• Gráfico de superficie
• Gráfico de barras
• Gráfico circular

Instalación

The 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.

For Wikimedia production usage, see wikitech:Kubernetes/Deployments for general instructions on service deployments.

Cómo se utiliza

To render a chart, you must define a chart definition to associate with the 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.

Todos los gráficos en este ejemplo se pueden representar a partir del mismo origen de datos: Data:Chart Example Data.tab, un conjunto de datos ficticio. Se puede encontrar el contenido de muestra de estas páginas en el directorio sample.

{
    "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:

{{#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
}}

Personalización

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.

Sizing

Currently, charts occupy the entire container width where you place them.

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.

Theming

Currently, 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 caution

Note, while chart's 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.

Internationalization

Charts can only be embedded in the wiki's content language; so, for example, the "uselang" query string (e.g. ?uselang=es) will not impact the chart.

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 issues

See this filtered view of the Charts Phabricator board.

Types of chart

For all charts, data is expected to be arranged in columns, with the first column representing the x-axis and the following columns representing series or curves on the y-axis.

Line

Raw data

This is an example of a line chart.

In the following example, the {{#chart| }} is wrapped in an {{Image frame }} container to set the chart’s width and include a caption. A link is also provided to the raw tabular data, where information on data sources may be found:

{{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.

Bar

Here the chart spans the full width of the page content area:

{{#chart:Example.Bar.chart}} <center>[[commons:Data:Chart Example Data.tab|'''Raw data''']]</center>

This results in:

Raw data

Area

Raw data

Pie

Pie 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.

Raw data

Finding existing charts

Charts 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 bages 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 y MediaWiki:Chart-error-category (Category:Pages using the Chart extension y 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 extension

Please see the category 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 documentation

Given the problems with Extensión: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 Monitoring

Failing .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 [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 charts

There are several conceivable methods to semi-automatically produce and edit the charts and their tabular data:

• The script graphDataImport can be used in the web browser to extract data from existing graph wikitext and similar, and convert it to a .tab page, a .chart definition page and new wikitext.
• Generative AI can be prompted to extract data from existing graph wikicode and tables, and convert it to .tab and .chart pages and generate new wikicode, according to given specifications. It can also provide translation of titles, and be utilized to extend and update the .tab page with new data.
• The gadget TabularImportExport can convert Excel and .csv files to and from the .tab pages. You can activate it via your Commons preferences.
• The JSON "edit as table" user interface (part of the Jsonconfig extension) is available from the .tab edit page.
• Some bots can periodically import statistics from the web, or from existing Wikipedia graphs, to .tab or .chart pages, upon request. Such bots include DPLA bot and SLiuBot.
• GraphBot ports English Wikipedia graphs to charts.

See also

• Frequently asked questions
• Transforms