Plotly.js: Should Plotly.restyle throw error(s) when the update object isn't valid?

Created on 7 Jan 2016  路  5Comments  路  Source: plotly/plotly.js

Consider this setup,

var data = [
  {
    y: ['22.3', '23'],
    x: ['2001-06-11 11:00', '2001-06-11 11:10'],
    line: {
      'width': 2
    },
    uid: '40abaa'
  }
]

var layout = {
  yaxis: {
    title: 'Rate'
  },
  margin: {
    l: 40, b: 40, r: 40, t: 40
  }
}

Plotly.plot('mydiv', data, layout)

This dosen't work, and clears the plot

var update = {
  x: ['2001-06-15 11:10', '2001-06-15 11:20'],
  y: ['23', '100.3']
}

Plotly.restyle('mydiv', update)

But this is working

var update = {
  y: ['23', '100.3']
}

Plotly.restyle('mydiv', update)

Plotly.restyle is handling two axis data update incorrectly and clears the existing data on the plot.

discussion needed

Most helpful comment

@harshjv Your update object should be:

var update = {
  x: [['2001-06-15 11:10', '2001-06-15 11:20']],
  y: [['23', '100.3']]
};

to update the x and y of your single-trace graph.

The restyle syntax works as fellow, the outer array maps to different traces i.e. your above update object mapped '2001-06-15 11:10' to the x in the first (and only) trace of your graph. As x and y need to be linked to an array, the graph is left blank after the update.

So, to update the the x data, you need to nest the update data array.

More info about the restyle syntax here. Unfortunately our docs on restyle are limited at the moment. Our apologies.

That said, one could argue that trying to update x (or y) with a scalar should throw an error. @mdtusz @cldougl thoughts?

All 5 comments

Thanks for opening the issue. I'll take a look into this and we'll hopefully have a fix in a future release. We're always open to community pull requests as well if they follow our contributing guidelines and style!

For now, your best bet is to use Plotly.newPlot or change the plot data manually and call Plotly.redraw as seen here.

@harshjv Your update object should be:

var update = {
  x: [['2001-06-15 11:10', '2001-06-15 11:20']],
  y: [['23', '100.3']]
};

to update the x and y of your single-trace graph.

The restyle syntax works as fellow, the outer array maps to different traces i.e. your above update object mapped '2001-06-15 11:10' to the x in the first (and only) trace of your graph. As x and y need to be linked to an array, the graph is left blank after the update.

So, to update the the x data, you need to nest the update data array.

More info about the restyle syntax here. Unfortunately our docs on restyle are limited at the moment. Our apologies.

That said, one could argue that trying to update x (or y) with a scalar should throw an error. @mdtusz @cldougl thoughts?

@etpinard Thanks. :+1:

@harshjv no problem. I'd rename your issue to reflect the discussion about possibly making restyle throw errors.

No initial opposition to throwing an error from me.
Regarding docs: we mention wrapping with the outer array in the function reference doc,
but I think it could be a bit more clear if we add a codepen example updating data and possibly use x/y data instead of z (it might be a little easier to see/understand the outer array looking at an x array opposed to a z matrix).

Was this page helpful?
0 / 5 - 0 ratings