Creating graph with plotly using node.js and Passing array in axis

Question

I want to make a simple graph. Here is the code in node.js from plotly official documentation.

 equire('plotly')(username, 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);
});

Here, i want to pass an array in x axis.The line is given below where i want to change.
x: ["2013-10-04 22:23:00", "2013-11-04 22:23:00", "2013-12-04 22:23:00"],

I have tried this way.

xx = [];

for (i = 1; i < 100; i++) {

            xx[i] = i;

}

var data = [
  {
    x: xx,
    y: [1, 3, 6],
    type: "scatter"
  }
];
var graphOptions = {filename: "date-axes", fileopt: "overwrite"};
plotly.plot(data, graphOptions, function (err, msg) {
    console.log(msg);
});

But code is not working given above.Please can anyone suggest me how to solve this ? Thanks in advance.

I can see a graph getting generated, but what is the actual problem? — Naren Murali
– Naren Murali, Commented Jun 5, 2018 at 7:44
Blank Graph is generated. The problem is that i could not get the value of x axis when i passed x axis value through array. — Tausif
– Tausif, Commented Jun 5, 2018 at 7:49

Naren Murali · Accepted Answer · 2018-06-05 08:06:58Z

2

I checked your code and I am able to get the xaxis. PFB the screenshot of the graph generated. I think you need to scroll down a bit to see the xaxis in the plotly online editor.

Moving on, I you are still not able to see the xaxis, I would suggest you set the below layout properties, where you can configure the xaxis. Refer the link here to go to the plotly official documentation.

var layout = {
  xaxis: {
    visible: true,
    range: [1, 100],
    dtick: 1
  }
}

In the above code I configure the xaxis to better suit the data provided.

var plotly = require('plotly')('username here', 'API Key Here');
xx = [];
yy = [];
for (i = 0; i < 100; i++) {

  xx[i] = i + 1;
  yy[i] = y + 1;

}

var data = [{
  x: xx,
  y: yy,
  type: "scatter"
}];
var layout = {
  xaxis: {
    visible: true,
    range: [1, 100],
    dtick: 1
  }
}
var graphOptions = {
  layout: layout,
  filename: "date-axes",
  fileopt: "overwrite"
};
plotly.plot(data, graphOptions, function(err, msg) {
  console.log(msg);
});

I changed the yaxis values too, inorder to generate a better looking graph. Please let me know if this fixes your issue!

answered Jun 5, 2018 at 8:06

Naren Murali

66.1k6 gold badges51 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tausif Over a year ago

Thanks. It works finally. after changing the layout properties.

Tausif Over a year ago

I didn't find the close option !

Collectives™ on Stack Overflow

Creating graph with plotly using node.js and Passing array in axis

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related