Black Lives Matter. Please consider donating to Black Girls Code today.
Learn how to use COVID-19 data in open source Dash apps. Register for the Sept 23rd webinar with IQT!

Failed to create a plot

Hi,

I want to show a zoomable chart on my web ui and get the plotly_relayout event after zoom. I am using Node.js version within Vue.js environment. Below is my code:

var plotly = require(‘plotly’)(username, api_key); // I have replaced the user name and api_key.

var data = [
{
x: [“2013-10-04 22:23:00”, “2013-11-04 22:23:00”, “2013-12-04 22:23:00”],
y: [1, 3, 6],
type: “scatter”
}
];
var graphOptions = {filename: “date-axes”, fileopt: “overwrite”};
plotly.plot(data, graphOptions, function (err, msg) {
console.log(msg);
});

The code is from an example of plotly, when it run plotly.plot, I got the error below:
Fetch API cannot load https://plot.ly/clientresp. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:8080’ is therefore not allowed access. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

I have register a new account and have the api_key for that. I don’t know what else I need to do. ‘localhost:8080’ is my local server.
What else should I do for calling this api?

BTW how can I get the custom event after the zoom which is shown on https://plot.ly/javascript/zoom-events/
because there is no place to pass a html element to plotly.plot.

Many thanks!

https://jsfiddle.net/1yLavejg/12/

Pl chk this.

Thanks lavanya, I have resolved this issue

Alexche1981, how did you resolve the CORS header problem? I’m running into this myself.

1 Like