docs would be greatly appreciated

[Pshemas]

Pasting code directly from Plotly website is not working.

• I get things like this. I've been able to figure it out for some basic charts, but for some more complex ones (for example stacked bars, box plot etc) some instructions would be greatly appreciated.

[Dmytro-Shulha]

Hi! Can you please provide code sample that doesn't work?

[tolga-balci]

Hi Dmytro,

I am running into similar issues as well. Seeing this issue, I am not creating a separate issue.

First, the first block you have is:

//Some plotly examples require d3 library to work.
//Since it's large and used by few examples,
//I propose a workaround to import d3;
//You need to download dependency from https://d3js.org/d3.v7.min.js
//and place it in your vault.

let path = app.vault.adapter.basePath;//absolute path to your vault
var d3 = require(path+"\\utils\\d3.v7.min.js");

Do we set the absolute path as C:\\Users\\Tolga\\MyNotes\\.obsidian or the app.vault.adapter.basePath picks it up? Do we need to change/define anything on this line?

Next, if app.vault.adapter.basePath is picking up the directory, what does it pick up, so we create another directory "utils" and place the d3 code in it?

The next part of the code is:

var data = [
x: ['giraffes', 'orangutans', 'monkeys'], y: [20, 14, 23], name: 'SF Zoo', type: 'bar'
];

var layout = {barmode: 'stack'};
var config = {displaylogo:false};

The final code:

//Some plotly examples require d3 library to work.
//Since it's large and used by few examples,
//I propose a workaround to import d3;
//You need to download dependency from https://d3js.org/d3.v7.min.js
//and place it in your vault.
let path = app.vault.adapter.basePath;//absolute path to your vault
var d3 = require(path+"\\utils\\d3.v7.min.js");

//Replace this block with any example from plotly.com
//NOTE: `Plotly.newPlot` won't work here, use `window.renderPlotly` instead
var data = [
x: ['giraffes', 'orangutans', 'monkeys'], y: [20, 14, 23], name: 'SF Zoo', type: 'bar'
];

var layout = {barmode: 'stack'};
var config = {displaylogo:false};

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

The code does not run, even if I set the absolute path with let path="C:\\Users\\Tolga\\MyNotes\\.obsidian"

The complete final code above does not render a graph. It just sits there without execution.

Thank you.

[Dmytro-Shulha]

Hello @tolga-balci !

First thing is that path is not pointing to .obsidian directory, but to the root of your vault. Try this and check the console in Dev Tools (Ctrl+Shift+I):

let path = app.vault.adapter.basePath;
console.log(path); // you should see "C:\Users\Tolga\MyNotes"

And yes, my examples assumes you to have d3 library here: "C:\Users\Tolga\MyNotes\utils\d3.v7.min.js" You're free to place this wherever you like, just update path accordingly and you're good to go. Also, the plot you provided doesn't actually leverages any of the d3 library, so you can just delete those lines.

Second, there is an error with your data object, which Plotly API expects to be an array of objects like this [{x,y},{x,y},{x,y}].

This patched version of your example should work fine:

let data = [{
    x: ['giraffes', 'orangutans', 'monkeys'], 
    y: [20, 14, 23], 
    name: 'SF Zoo', 
    type: 'bar'
}];

let layout = {barmode: 'stack'};
let config = {displaylogo:false};

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

Thank you for using the plugin.

[tolga-balci]

Many thanks @Dmytro-Shulha for your detailed explanation. I could not run the code, and it seems to me that I'm missing something. I copied and pasted your code but it looks like just another code block inside the note., I think it needs a configuration somewhere, but I couldn't find it.

[Dmytro-Shulha]

Do you have DataView plugin installed? Do you have dataviewjs blocks execution enabled in DataView settings? This example of mine is relying on DataView plugin for JS execution.

[tolga-balci]

OK, now it fits. It seems that it is related to DataView and JS execution settings. Many many thanks for your assistance!