Load

Load CSV - Data

Load Chart JSON

Save

Save JSON

Save Wiki Chart Output

Show Template

Edit

Show Line Chart     Restore to Default    

JSON Validator:

Workflow CSV2WikiChart

• Load CSV - File Load a CSV File that should be converted into a Chart for Wikiversity or Wikipedia.
• Preview Graph Check data in a graph with the library MorrisJS as preview
• Edit Data Edit CSV data or the settings for the graph in Wikiversity or Wikipedia and check again the preview of the chart
• Save Chart Edit CSV data or the settings for the graph in Wikiversity or Wikipedia and check again the preview of the chart

Chart

Edit Data Save Chart

Information about Graphs for CSV

The demo graphs show the possible options for the line chart. The rendering of the chart is performed with MorrisJS. Load a CSV file and set colors and titles in the Editor. Preview the data here and then save/export the data in Wiki Chart template.

---

Help CSV Workflow Information on basic workflow from CSV data to Wiki Chart.

---

Please edit the demo data and create a chart for your data by loading a CSV file.

Demo Graph 1

plotted sin(pi * x/180)-function

Demo Graph 2

Demo Graph 3

x-Label Angle: -60 Degrees

Delete

Clear Content

Print

Display Options

JSON		Handlebars4Code Output
JSON Schema		Handlebars4Code Template

Print File

Print

Print Chart

Settings

Save JSON Editor Schema

Save Template

About

WebApp - CSV2WikiChart

1.1.15

AppLSAC

Workflow CSV2WikiChart

• Wiki Template: The JSON Editor exports to the Wikipedia/Wikiversity Template:Graph:Chart.
• JSON-Editor App The underlying JSON-Editor was used for this repository csv2wikichart_app on GitHub. Editor layout for input is configured by a JSON Schema W to generate tailored JSON
• Template for Graphs: The syntax for the output is defined by the Wikipedia/Wikiversity Template - Graph:Chart. The Handlebars4Code template generates the Wiki-Graph output with the library Handlebars4Code. The output of CSV2WikiChart WebApp uses the JSON in the JSON Editor to populate the Handlebars4Code-Template tpl/template4json_tpl.js (see also Handelbars4Code Demo).
• App Menu: The menu was created with the JSONEditor4Menu as a web-based interface to create a Hamburger Menu App. Editor layout for input is configured by a JSON Schema W to generate tailored JSON
• used icons for the menu are a icons from JQuery Mobile 1.4.5 Icons and from Based on WikiCommons Icons: Icons for Menu: The used icons for the menu are a icons from JQuery Mobile 1.4.5 Icons and from WikiCommons. For icons and licensing detail see README_Icons4Menu.html.
• MorrisJS Chart Library There are different chart libraries for rendering data with JavaScript (Chart.js or D3.js). For the preview of the data before expport to the Wiki syntax the library MorrisJS. Press on the Chart icon in the menu to preview the graph.