Extension:ECharts
 | Warning: The code or configuration described here poses a major security risk. Site administrators: You are advised against using it until this security issue is resolved. Problem: Vulnerable to Cross-site scripting attacks, because it passes user input directly to the browser. This may lead to user accounts being hijacked, among other things. See #Known issues Solution: strictly validate user input and/or apply escaping to all characters that have a special meaning in HTML See #Known issues |
 Release status: beta |
|
|---|---|
 |
|
| Implementation | Parser function |
| Description | Allows to embed Apache ECharts in MediaWiki |
| Author(s) | Bertrand Gorge (BertrandGorgetalk) |
| Latest version | 1.0 (2023-04-24) |
| MediaWiki | 1.35+ |
| PHP | 7+ |
| Database changes | No |
| License | MIT License |
| Download | GitHub: Note: |
Apache Echarts is a powerful charting environment. This extension allows to make full use of it in your MediaWiki setups.
Download
[edit]You can download the extension here.
Installation
[edit]- Unzip the downloaded zip file.
- Rename and put the
EChartsfolder into your wikis extension folder. - Include the following line at the end of your LocalSettings.php:
wfLoadExtension( 'ECharts' );
- You can use the extension now! (There are no other extensions required as prerequisites and there is no setup procedure needed.)
Usage
[edit]Build your chart in the Apache Echarts editor, then copy the code and paste it in your wiki page, surrounding with {{#echarts: yourcode }}
NB : your code should only contain the option = { ... } declaration. It should not contain constants or other functions declarations.
Also, make sure your code does not contain double curly braces or (just add spaces between them), otherwise mediawiki will be very confused about where does the echarts parser function start and end.
Size and alignment
[edit]By default your charts will have a 100% width and 400px height. You can customize that by using:
{{#echarts:
width=300px |
height=300px |
yourcode }}
You can also add an alignment setting in order to float right or left (will only work if you have bootstrap in your skin):
{{#echarts:
width=300px |
height=300px |
align=right |
yourcode }}
Known issues
[edit]This extension will analyse the ECharts code by using the JS function eval. This might allow malicious code to get into your wiki pages. You don't want that. The only other option is to use JSON.parse(...) but the Echarts code is not strict Json so that would fail unless you rework your JSON data using a JSON beautifier/linter of some sort. If your wiki is opened to anonymous contributions, don't use this extension. You've been warned! (NB: this could be configured using a configuration option - PR welcome)