Syntax error with more complex graphs

[EhuddR]

Hi! I have tried to get the plotly plugin to work but it only allows me to make basic plots. If I use another example from plotly.com it shows me a syntax error. So, how can we achieve more complex plots with this tool?

Thanks in advance

[Dmytro-Shulha]

Hello! First, thank you for using this plugin!

Regarding plugin, the way it works now is so that you can create a YAML object with data array, layout and config objects. YAML will be converted to json and passed to Plotly.newPlot('myDiv', data, layout, config) function. This supports only an imperative approach, where your YAML have to contain all the data required for plot creation written explicitly. On the other hand, lots of Plotly examples have data generated by JS code, which doesn't work in this plugin for now.

Can you please provide which particular example you are refering to? And a snippet which shows syntax error?

[peterkehlerjr]

Nice plugin. Unfortunately I ran into the same issue. Tried some simple stuff from Plotly Open Source Graphing Libraries| Heatmaps.

[Dmytro-Shulha]

Here is an example how to make this heatmap example using plugin.

Pasting JavaScript examples into plotly block, unfortunately, is not a supported use case yet. plotly block should contain YAML or JSON with data repeating one from example.

[Dmytro-Shulha]

Currently I am thinking about how to implement JS support to use official examples effortlessly. It may be something like providing additional plotlyjs block support, like in Dataview plugin. Or, something like making Plotly available from dataviewjs block.

[Dmytro-Shulha]

I have found a way to draw plots from DataViewJS blocks. Basic example would look like this:

```dataviewjs
//If your example needs d3 - download library from https://d3js.org/d3.v7.min.js to vault
//If no - just delete this part
let path = app.vault.adapter.basePath;//absolute path to your vault
var d3 = require(path+"\\utils\\d3.v7.min.js");

//Here you can paste example from plotly.com
//NOTE: `Plotly.newPlot` won't work here, use `window.renderPlotly` instead
var data = [
{x:[0,1,2,3,4,5,6,7,8,9],y:[4,4,2,2,3,3,2,2,4,4]},
{x:[0,1,2,3,4,5,6,7,8,9],y:[3,3,1,1,2,2,1,1,3,3]}
];
var layout = {};
var config = {};

window.renderPlotly(this.container, data, layout, config)

This template is available from Command Palette (Ctrl+P).
Already released in 0.0.6.

[peterkehlerjr]

Thanks, Dmitriy

[EhuddR]

Thank you very much, now using the plugin is easier. This plugin is my number one option for plotting a large amount of data. Thanks again 🙏

[EhuddR]

Hi! This is a menor issue but probably you can add the option to define a custom folder for the d3 script. I make a work arround using templater to generete the dataview template. var d3 = require(path+"\/Scripts\/d3.v7.min.js")

[Dmytro-Shulha]

First, I am glad those changes were helpful!

Regarding hardcoded path to d3 lib, I agree that defining it in settings is a better way. I have created separate issue #4 for this.