https://github.com/ocramz/htmx-plotly

https://github.com/ocramz/htmx-plotly

dashboards data-apps data-visualization htmx htmx-extension plotly plotlyjs

Last synced: 3 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/ocramz/htmx-plotly
• Owner: ocramz
• Created: 2024-01-07T02:20:02.000Z (12 months ago)
• Default Branch: main
• Last Pushed: 2024-02-05T10:37:22.000Z (11 months ago)
• Last Synced: 2024-05-01T23:24:44.150Z (8 months ago)
• Topics: dashboards, data-apps, data-visualization, htmx, htmx-extension, plotly, plotlyjs
• Language: JavaScript
• Homepage:
• Size: 37.1 KB
• Stars: 4
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        
# htmx-plotly [![](https://data.jsdelivr.com/v1/package/gh/ocramz/htmx-plotly/badge)](https://www.jsdelivr.com/package/gh/ocramz/htmx-plotly)

An [htmx](https://htmx.org) [extension](https://htmx.org/extensions/) to update ("restyle") [plotly.js](https://plotly.com/javascript/) plots.

This approach is much faster than recreating the whole plot, but since HTMX natively receives HTML from the server, we need this extension to receive JSON with the new plot data instead, and trigger Plotly to re-render.

Possible applications include: simple dashboards, data apps, and similar.

### Installation

First load HTMX and Plotly in the `` of your file:

```html

```

And right after, load `htmx-plotly`: 

```html

```

### Usage

Add these attributes to a page element: 

* `hx-ext="htmx-plotly"` means this element uses the extension

* `hx-post="/get-data"` the HTTP endpoint that returns the new plot data

* `plot-id="my-plot"` ID of the DOM element that hosts the Plotly chart.

Example: here we make an `` text link trigger the update of the plot within element `my-plot`:


```html

UPDATE

```


NB: As of `v0.3` the HTMX swap mechanism works once more as expected: this extension now receives an *object* from the server, which

is unpacked into Plotly restyle data and HTML markup.

### Setup (frontend)

Plotly charts need an empty div element as well as a script tag for initialization:

```html



```


```html

plotDiv = document.getElementById('my-plot');

plotlyTestData = [{x: [0,1,2], y: [5,6,10]}]

Plotly.newPlot( plotDiv, 

    plotlyTestData, 

    {margin: { t: 0 } } 

);

```

### Setup (backend)

*Warning:* The JSON data produced by the server must follow the Plotly 

[`newPlot` calling signature](https://plotly.com/javascript/plotlyjs-function-reference/#plotlynewplot):

the object must contain the `data` key (and optionally `layout`, `config` and `frames` keys)

* Since v0.4: use [`plotly_htmx_utils.py`](https://cdn.jsdelivr.net/gh/ocramz/[email protected]/plotly_htmx_utils.py) 

  to convert between Plotly objects and restyle-friendly JSON.:

## Tested with

* plotly.js 2.27

* htmx 1.9.10

### Warning

Beta-level software, feel free to file issues on github or even better submit PRs.

(c) 2023- Marco Zocca