Charts: how to add new type

[dberardo-com]

in particular i would like to add a radar chart https://www.chartjs.org/docs/latest/charts/radar.html

which file(s) should be edited for it to happen ? i guess chart_factory.ts

[dberardo-com]

also as a bonus questions:

• can a formula output a chart ? --> example: https://peltiertech.com/chart-series-formula/
• can scatter plots be used ? or can a line chart be designed so as to resemble a scatter plot ?

[hokolomopo]

Hello 👋 Sorry for the tardy answer.

To create a new chart type, you need mutliple parts:

• An implementation of AbstractChart. Bar chart for example
• Then you can add the implementation to the chartRegistry
• You also need a component that draw the chart, and add it to the chartComponentRegistry
• Finally you need side panel components to edit your chart, that you add to the chartSidePanelComponentRegistry

I hope it helps. We unfortunately don't have a comprehensive documentation for that yet.

For your bonus questions:

• a formula cannot output a chart no. We have no plans on implementing that in the near future.
• Scatter plots are now available in the latest versions. We also plan on impelmenting other new chart types within the year.

Have a nice day 👋

[dberardo-com]

tahnks for the reply:

a formula cannot output a chart no. We have no plans on implementing that in the near future.

i assume i could do this by using a model.dispatch() call to specifically create a new chart in the model right ? i believe this could be enough for my use case --> as long as i can then reference the same chart from the formula to perform update / delete operations

To create a new chart type, you need mutliple parts:

is the current structure specific of chartjs library or can i change the underlying charting library for the new custom charts ?

[hokolomopo]

i assume i could do this by using a model.dispatch() call to specifically create a new chart in the model right ? i believe this could be enough for my use case --> as long as i can then reference the same chart from the formula to perform update / delete operations

Unfortunately it won't be so simple, because in our design model.dispatch() cannot be used during the evaluation (because it might trigger infinite loops of dispatch => evaluation => dispatch). You can probably make it work by having your function creating an async callback that will trigger the necessary dispatch. I cannot really help you with that.

is the current structure specific of chartjs library or can i change the underlying charting library for the new custom charts ?

ChartJS isn't necessary🙂 Scorecards for example simply draw on a canvas, and were pure HTML in previous versions.

[dberardo-com]

Unfortunately it won't be so simple, because in our design model.dispatch() cannot be used during the evaluation (because it might trigger infinite loops of dispatch => evaluation => dispatch). You can probably make it work by having your function creating an async callback that will trigger the necessary dispatch. I cannot really help you with that.

i am already using dispatch in this use case: #1935 ("EVALUATE_CELLS") -- i assume this won't be any different, right ? is there a command for creating/updating/deleting charts ?

ChartJS isn't necessary🙂 Scorecards for example simply draw on a canvas, and were pure HTML in previous versions.

lovely, i will try out D3 based libraries, such as plotly e.g.

[hokolomopo]

You can have a look at the commands handled by the ChartPlugin (plugins.core/charts.ts) to interact with the chart.

Note that your original question was on radar charts, and those are parts of our roadmap so we will implement them sometime before October (hopefully).

Have a nice day 👋

[dberardo-com]

thanks for answering, i will have a look.
as for the radar chart, i have some custom implementation needs, in particular i have the need of a radar chart for plotting degrees (from 0 to 360) in order to show the angular direction of signals. and also i need to represent multiple series on it, similar to this: https://echarts.apache.org/examples/en/editor.html?c=radar2

thats why i believe i might need to go for a custom implementation