trinketapp · tuzz · Jan 7, 2024 · Jan 7, 2024 · Jan 7, 2024 · Jan 7, 2024
diff --git a/README.md b/README.md
@@ -8,9 +8,9 @@ charting library driven by [Skulpt](http://www.skulpt.org/) and
 ## What is Skulpt?
 
 > Python. Client side.
-> 
+>
 > Skulpt is an entirely in-browser implementation of Python.
-> 
+>
 > No preprocessing, plugins, or server-side support required, just write Python and reload.
 
 ## What is pygal?
@@ -25,13 +25,15 @@ charting library driven by [Skulpt](http://www.skulpt.org/) and
 
 Pygal.js brings together the above projects to provide beatiful charts
 created using python syntax all rendered in the browser with no server
-necessary. Cool.  See it in action on [trinket.io](https://trinket.io/charts).
+necessary. Cool. See it in action on [trinket.io](https://trinket.io/charts).
+
+New: You can now use pygal.js as a plain JavaScript file. See below for more details.
 
 ## Getting Started
 
 Install JS dependencies with ```bower install```
 
-Create a basic html page similar to DEMO.html.
+Create a basic html page similar to demo-skulpt.html.
 
 Add the pygal.js specific Skulpt configuration options
 
@@ -59,12 +61,37 @@ Sk.availableWidth = 600;
 Sk.availableHeight = 400;
 ```
 
-Note: If you use demo.html, you may need to serve it through an HTTP Server
+Note: If you use demo-skulpt.html, you may need to serve it through an HTTP Server
 due to the cross-site script URLs. "python -m SimpleHTTPServer" is one good
 way.
 
 Point your browser to your html page and have fun!
 
+## Plain JavaScript file
+
+You can now use Pygal as a plain JavaScript file if you want to call it from
+JavaScript directly, or if you are using another Python interpreter such as
+[Pyodide](https://pyodide.org/en/stable/).
+
+The API is similar except there is no longer an `Sk` global. Instead, you will
+need to set a `renderChart` function and `availableWidth` and `availableHeight`
+values on the `pygal.config` object:
+
+```javascript
+import * as pygal from "./pygal.js"
+
+pygal.config.renderChart = (chart) => Highcharts.chart(myElement, chart);
+pygal.config.availableWidth = 600;
+pygal.config.availableHeight = 400;
+```
+
+The plain JavaScript version also no longer requires jQuery. See demo-pyodide.html
+for a working example using the plain JavaScript import.
+
+Note that the plain JavaScript file is written for ES6 so you may need to
+transpile it and add a polyfill for `Array.fill` if you want to support older
+browsers.
+
 ## Opportunities for contribution
 
 * Integration with a free and open-source javascript charting library rather

diff --git a/demo-pyodide.html b/demo-pyodide.html
@@ -0,0 +1,78 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Pyodide</title>
+    <script src="https://cdn.jsdelivr.net/pyodide/v0.24.1/full/pyodide.js"></script>
+    <script src="https://code.highcharts.com/highcharts.js"></script>
+  </head>
+  <body>
+    <h3>Try This</h3>
+
+    <textarea id="input" cols="80" rows="30">
+
+import pygal
+
+# Our data is a list of series.
+# Each series is a list with a label and a list of data points
+data = [["Firefox", [None, None, 0, 16.6,   25,   31, 36.4, 45.5, 46.3, 42.8, 37.1]],
+        ["Chrome",  [None, None, None, None, None, None,    0,  3.9, 10.8, 23.8, 35.3]],
+        ["IE",      [85.8, 84.6, 84.7, 74.5,   66, 58.6, 54.7, 44.8, 36.2, 26.6, 20.1]],
+        ["Others",  [14.2, 15.4, 15.3,  8.9,    9, 10.4,  8.9,  5.8,  6.7,  6.8,  7.5]]]
+
+
+# Make a Pygal chart
+stackedline_chart = pygal.StackedLine(fill=True)
+stackedline_chart.title = "Browser usage evolution (in %)"
+stackedline_chart.x_labels = map(str, range(2002, 2013))
+
+# For each series in our data, add label and data points
+for label, data_points in data:
+    stackedline_chart.add(label, data_points)
+
+# Render the chart
+stackedline_chart.render()
+
+# Example modified from the pygal.org documentation
+    </textarea>
+
+    <br/>
+    <button id="run" disabled>Run</button>
+
+    <pre id="info">Loading pyodide...</pre>
+    <div id="visual" style="width: fit-content;"></div>
+
+    <script type="module">
+      import * as pygal from "./pygal.js";
+
+      pygal.config.renderChart = (chart) => Highcharts.chart(visual, chart);
+
+      const runButton = document.getElementById("run");
+      const input = document.getElementById("input");
+      const info = document.getElementById("info");
+      const visual = document.getElementById("visual");
+
+      let pyodide;
+
+      const main = async () => {
+        pyodide = await loadPyodide();
+        await pyodide.registerJsModule("pygal", { ...pygal });
+
+        runButton.disabled = false;
+        info.innerHTML = "";
+      };
+
+      const run = async () => {
+        try {
+          await pyodide.loadPackagesFromImports(input.value);
+          await pyodide.runPython(input.value);
+        } catch (error) {
+          console.log(error);
+        }
+      };
+
+      main();
+      runButton.addEventListener("click", run);
+    </script>
+  </body>
+</html>
diff --git a/demo.html → demo-skulpt.html b/demo.html → demo-skulpt.html