seamless integration widgets #185

Activity

1. chriddyp commented on Jan 30, 2015

   

   chriddyp

   on Jan 30, 2015

   Member

   More actions

   Yeah, coming soon! Within the next two weeks. restyle is wicked confusing and only useful when you want to update attributes of an existing graph -- we'll move it over to just g.plot(figure_or_data).

   @theengineear is also adding a save button and input box so you can play around with your graph in the notebook and then once your happy with it just type in the filename and submit the save button: #181
2. guenp commented on Feb 16, 2015

   

   guenp

   on Feb 16, 2015

   Author

   More actions

   @chriddyp @theengineear any updates? I'm setting up an experiment for a lab course right now with live graphing, and any new syntax that would make my life easier would be very welcome ^_^
3. chriddyp commented on Feb 17, 2015

   

   chriddyp

   on Feb 17, 2015

   Member

   More actions

   thx for the bump! here's the PR and usage: #192, we're just waiting on some review on the Plotly side and then we'll (you'll) be good to go ✊ . should be tonight or tomorrow morn
4. guenp commented on Feb 17, 2015

   

   guenp

   on Feb 17, 2015

   Author

   More actions

   Sweet, thanks!! So g.plot is equivalent to g.restyle?
   I have a follow-up question..here's a measurement code with live plotly graphing + grids:

   #create traces
   Vxx_vs_B = Scatter(x=[magnet.field.get()], y=[Vxx.get()], name='$V_{xx} (V)$')
   Vxy_vs_B = Scatter(x=[magnet.field.get()], y=[Vxy.get()], name='$V_{xy} (V)$')
   
   #create grid
   column_0 = Column([0], 'time (s)')
   column_1 = Column(Vxx_vs_B['x'], 'B (T)')
   column_2 = Column(Vxx_vs_B['y'], 'Vxx (V)')
   column_3 = Column(Vxy_vs_B['y'], 'Vxy (V)')
   grid = Grid([column_0, column_1, column_2, column_3])
   
   #graph layout
   layout = Layout(
   title='Quantum Hall effect',
   yaxis=YAxis(
    title='$V_{xx}, V_{xy} (V)$'
   ),
   xaxis=XAxis(
    title='$B (T)$'),
   showlegend=True
   )
   
   #create widget instance and add traces/layout
   g = GraphWidget()
   g
   g.delete_traces([0]) # bug (?): if I use add_traces with a list of 2 traces, a third one magically appears. By running this line it's fixed.
   g.add_traces([Vxx_vs_B, Vxy_vs_B])
   g.relayout(layout)
   
   #start measurement
   magnet.go_to_setpoint(2)
   lastrefresh = 0
   while magnet.field.get()<2:
       row = [timenow.get(), magnet.field.get(), Vxx.get(), Vxy.get()] # Take datapoint
       Vxx_vs_B['x'].append(row[1]) #append datapoint
       Vxx_vs_B['y'].append(row[2])
       Vxy_vs_B['x'].append(row[1])
       Vxy_vs_B['y'].append(row[3])
       py.grid_ops.append_rows([row], grid_url=grid_url)
   
       #only refresh graph every 2 seconds to prevent slowing down the browser
       if (np.mod(int(timenow.get()),2) == 0) & ((timenow.get()-lastrefresh) > 1):
        data = {'x': [Vxx_vs_B['x'], Vxy_vs_B['x']], 'y': [Vxx_vs_B['y'], Vxy_vs_B['y']]}
        g.restyle(data)
        lastrefresh = timenow.get()
   
   sleep(0.1)
   

   As you can see, the last few lines are to refresh the graph every 2 seconds. If I don't do this the graph will get flooded with restyle requests, and the browser start to run really slowly (I'm using Google Chrome canary). Any thoughts? Could this be added to the API somehow?

   Also - right now I have to separately append new datapoints (rows) individually to each trace for the widget, as opposed to the grid_ops where I can just append an entire row. Is there a way we could do this more efficiently? e.g. create a grid, hook it onto a widget, append the data row in the grid, then update the widget with the grid data?
5. chriddyp commented on Feb 17, 2015

   

   chriddyp

   on Feb 17, 2015

   Member

   More actions

   So g.plot is equivalent to g.restyle?

   g.plot is actually equivalent to the py.plot and py.iplot commands that use the graph objects. so, you don't need to nest arrays. g.restyle is used if you want to edit an attribute of the graph, like the marker.color or just the x data where g.plot will overwrite the graph with the new figure that you apply:

   For example, this series of commands:

   g.plot([Scatter(x=[1,2,3], y=[10,20,30])]) # creates a scatter plot (locally)
   
   g.restyle({'marker.color': 'blue'}) # sets the marker color to blue
   g.relayout({'title': 'new title'}) # sets the title to new title
   

   would result in the same graph as

   g.plot(Figure(
      data=[Scatter(x=[1,2,3], y=[10,20,30], marker=Marker(color='blue'))], 
      layout=Layout(title='new title')
   ))
   

   g.delete_traces([0]) # bug (?): if I use add_traces with a list of 2 traces, a third one magically appears. By running this line it's fixed.

   you're right - the graph is initialized with one empty trace so that you can immediately call restyle on it. that's definitely confusing though, it should just be an empty figure.. I'll update that!

   As you can see, the last few lines are to refresh the graph every 2 seconds. If I don't do this the graph will get flooded with restyle requests, and the browser start to run really slowly (I'm using Google Chrome canary). Any thoughts?

   I believe it. Is this just when the graphs get real big? How many points are getting plotted? Here's an example of pretty fast (50ms?) refreshing with restyle https://plot.ly/~streaming-demos/6/, but of course the window is small

   e.g. create a grid, hook it onto a widget, append the data row in the grid, then update the widget with the grid data?

   that's a great idea. I suspect that the graphs become slow because we begin to pass really large graph objects through IPython's kernel up to browser. So, we might be able to speed things up quite a bit by just passing the new points through the kernel and keeping the entire graph object only in the javascript memory. lemme hack something up on a dev branch today and we can see what it looks like!
6. guenp commented on Feb 17, 2015

   

   guenp

   on Feb 17, 2015

   Author

   More actions

   g.plot looks great, thanks!
   yes - initializing an empty graph makes more sense. but if g.plot already overwrites everything that's not strictly necessary.
   the reason the browser runs slow is not because the graph gets big - it's cause the browser's javascript is still processing all the restyle requests. if the measurement is stopped prematurely, the graph still goes on with adding new datapoints for a while. after that's done the browser works fine again.
   so yes - a g.update_traces() function that just passes (a) new row(s) and adds new datapoints instead of overwriting the entire graph would be perfect 😄
7. guenp commented on Feb 17, 2015

   

   guenp

   on Feb 17, 2015

   Author

   More actions

   ah one more thing: inside the GraphWidget there's this link saying "play with this data" which goes to "https://plot.ly/~playground/7/". is there a way to customize this link?
8. chriddyp commented on Mar 22, 2015

   

   chriddyp

   on Mar 22, 2015

   Member

   More actions

   hey @guenp - here's an update:

   • this PR (Extend traces #207) adds "extend" functionality, so you can just ship the points that you want to append to the graph, instead of the entire arrays - usage: Usage: http://nbviewer.ipython.org/gist/chriddyp/2fe51027d881076e4f52
   • the "play with this data" link will now open the current view of the graph inside the workspace, instead of the "https://plot.ly/~playground/7" link. So, you can use that link to create copies or save views of the state of your graph widget

   thanks for the suggestions!
9. chriddyp commented on Aug 30, 2018

   

   chriddyp

   on Aug 30, 2018

   Member

   More actions

   Much better support as part of this 3.0.0 release 😸 https://medium.com/@plotlygraphs/introducing-plotly-py-3-0-0-7bb1333f69c6
10. chriddyp

    closed this as completedon Aug 30, 2018