Discourse Graph (Plotly) Embed

:information_source: Summary Embed Plotly graphs into posts from an equation
:hammer_and_wrench: Repository GitHub - NateDhaliwal/discourse-graph-embed
:question: Install Guide How to install a theme or theme component
:open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes

Install this theme component

This component allows users to add graphs using Plotly.js to their topics and replies.

To use this, click the image (:chart_increasing:) icon in the formatting toolbar. Then, simply edit the equation inside the [wrap][/wrap]. (By sheer coincidence, I found out that backticks in the wrap didn’t affect anything)

For example:

Also, you can hover on the graph to find coordinates of points:

I originally tried to use a Desmos embed but that didn’t work out that well. Plotly (no affiliation) is a great library (and open-source too!) that can do this, paired with MathJS (also open-source) to run the calculations.

Plotly allows you to also use things like sin, cosine and tangent, as well as logarithms (base 10) and others.

With Plotly, you can also download the graph as a PNG by clicking on the :camera: icon in the embed at the top-right.

:warning: NOTE: Graphs of trigonometric functions (e.g. sin, cos, tan) are not ‘curved’ and they end up kind of pointy.

Optionally, you can enable the setting show_graph_in_modal (default off) to display the graph in a modal popup instead of below the post, so it doesn’t take up so much space.

In the modal, click the button Load Graph[1] to load and display the graph.

Post:

Modal:

I hope this is useful!


  1. Button label and title are editable as theme translations ↩︎

7 Likes

The icon is quite… should I describe it pale :joy:

1 Like

I’ve pushed a fix. Does it work now?

1 Like

Beautifully. Thanks.

1 Like

I have added a new setting show_graph_in_modal to display the graph in a modal popup instead of below the post, so it doesn’t take up so much space.

In the modal, click the button Load Graph[1] to, well, load and display the graph.

Post:

Modal:


  1. Button label and title are editable as theme translations ↩︎

4 Likes

this is pretty cool. nice work Nate :+1:

3 Likes