# Letting users plot/graph data

**URL:** https://meta.discourse.org/t/letting-users-plot-graph-data/329184
**Category:** Development
**Created:** [October 3, 2024, 12:38pm UTC](https://meta.discourse.org/t/letting-users-plot-graph-data/329184 "2024-10-03T12:38:03Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![ajtowns](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/ajtowns/32/267792_2.png) [@ajtowns](https://meta.discourse.org/u/ajtowns)
#### Post date: [October 3, 2024, 12:38pm UTC](https://meta.discourse.org/t/letting-users-plot-graph-data/329184/1 "2024-10-03T12:38:03Z")

</div>

I really like discourse’s support for inline-LaTeX for talking about maths, and mermaid for doing diagrams, but one thing I’ve been missing is the ability to grab small little bits of data and make x/y plots of it – dropping into a spreadsheet and exporting a png sucks. But after a bit of staring at the mermaid theme component’s source, I’ve had some success at making a theme component for [plotly.js](https://github.com/plotly/plotly.js/). It’s here:

[https://github.com/ajtowns/discourse-plotly-theme-component](https://github.com/ajtowns/discourse-plotly-theme-component)

Once it’s enabled, you can do a scatter plot as:

````plaintext
```plotly
data:
  - x: [0,300,400]
    y: [0,950,1050]
    name: Old mempool
  - x: [0,200,400]
    y: [0,700, 1150]
    name: New mempool
layout:
  title: Test plot
```

````

giving an image like

 ![newplot(10)](https://global.discourse-cdn.com/meta/original/4X/9/7/a/97a94d468d279a8a542f2b64ffa050d403a1081e.png)

Or, presumably, any of the [other sorts of charts you can make](https://plotly.com/javascript/) by passing data/layout values to plotly.js.

A particularly nice thing is that the plots by default are interactive, so you can see the actual values of points by hovering, can zoom in and out, and can save a png. And of course, the raw data is there in the post source as well.

Haven’t deployed it live yet, so can only say it seems to work in a test environment; but wanted to share it early, particularly in case someone wants to take over maintaining it for me… 🙂 (Also, if there’s some way better way of doing this that I’ve just somehow missed, I’d be happy to find out about it before I waste too much more time on this…)

(the minified plotly js is over 4MB, so you need to bump the “max attachment size” setting to 5m for it to work, I think?)

---

<div class="post-metadata">

### Author: ![pmusaraj](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pmusaraj/32/119489_2.png) [@pmusaraj](https://meta.discourse.org/u/pmusaraj)
#### Post date: [October 3, 2024, 2:34pm UTC](https://meta.discourse.org/t/letting-users-plot-graph-data/329184/2 "2024-10-03T14:34:43Z")

</div>

This is neat, nice work!

Once you’re ready for this to be run in production, please post it under the #Customization > Theme component category. Would love to see this alongside the mermaid component. (Note also that we ahve [a graphviz plugin](https://meta.discourse.org/t/graphviz-plugin/97554/) that does something similar.)

And also, plotly has a lively community, they’d love to know about this as well:

> **[Plotly Community Forum](https://community.plotly.com)**
>
> Plotly forum and Q/A site.