https://github.com/breuleux/buche-plotly
Plotly plugin for Buche
https://github.com/breuleux/buche-plotly
Last synced: about 1 month ago
JSON representation
Plotly plugin for Buche
- Host: GitHub
- URL: https://github.com/breuleux/buche-plotly
- Owner: breuleux
- Created: 2019-02-22T18:50:19.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2019-02-22T18:51:41.000Z (over 6 years ago)
- Last Synced: 2025-01-18T18:42:17.179Z (4 months ago)
- Language: JavaScript
- Size: 835 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# buche-plotly
Buche plugin for the [plotly](https://plot.ly/javascript/) plotting library.
Provides the `plotly-element` component.
## Use
First you must output the following `buche` command:
```json
{"command":"plugin","name":"plotly"}
```
Buche will prompt you to install the plugin if it is not available, although you can install it manually with `buche --install plotly`.
## `` component
The component is instantiated in HTML as follows:
```html
{
"layout": {"showlegend": true},
"plots": {
"plot1": {
"x": [1, 2, 3, 4],
"y": [1, 4, 9, 16]
},
"plot2": {
"dataSource": "/some-data",
"x": {"field": "distance"},
"y": {"field": "size"}
}
}
}
`
```
### `configure` command
If this is more convenient to you, you can leave out the configuration in ``, and use a separate command to configure it. For example (using node.js):
```javascript
function buche(cfg) {
console.log(JSON.stringify(cfg));
}
buche({
parent: "/",
tag: 'plotly-element',
attributes: {
address: 'plot',
}
})
buche({
parent: "/plot",
command: "configure",
plots: {...}
})
```
The `` must have an `address` attribute in order for this to work, and the command must be directed to that address (see `parent` above).
### Live updates
New points can be added incrementally by linking a plot to a `` element, and then adding new rows to that element. For this you need to create a ``, then use `some-address` as the `dataSource` for a plot, and specify which fields to use for `x` and `y`.
See `examples/plot.py` for an example, or the raw JSON in `examples/plot.jsonl`.