Plotwidget¶

The plot widget provides rudimentary plotting functionality, mostly to demonstrate how plots can be embedded in a Flexx GUI. It may be sufficient for simple cases, but don’t expect it to ever support log-plotting, legends, and other fancy stuff. For real plotting, we should probably have a BokehWidget and a VispyWidget. Or maybe it makes sense to have a visualization library based on Flexx.

Simple example:

p = ui.PlotWidget(xdata=range(5), ydata=[1,3,4,2,5],
                  line_width=4, line_color='red', marker_color='',
                  style='min-height:200px;')

Interactive example:

from flexx import app, ui, event
from flexx.pyscript import window

class Example(ui.Widget):
    def init(self):
        time = [i/100 for i in range(100)]
        with ui.VBox():
            with ui.HBox():
                ui.Label(text='Frequency:')
                self.slider1 = ui.Slider(min=1, max=10, value=5, flex=1)
                ui.Label(text='Phase:')
                self.slider2 = ui.Slider(min=0, max=6, value=0, flex=1)
            self.plot = ui.PlotWidget(flex=1, xdata=time, xlabel='time',
                                      ylabel='amplitude', title='a sinusoid')

    class JS:

        @event.connect('slider1.value', 'slider2.value')
        def __update_amplitude(self, *events):
            freq, phase = self.slider1.value, self.slider2.value
            ydata = []
            for x in self.plot.xdata:
                ydata.append(window.Math.sin(freq*x*2*window.Math.PI+phase))
            self.plot.ydata = ydata

class flexx.ui.PlotWidget(*init_args, **kwargs)¶

Inherits from: CanvasWidget

Widget to show a plot of x vs y values. Enough for simple plotting tasks.

line_color¶

property – The color of the line. If this is the empty string, the line is not shown.

line_width¶

property – The width of the line, in pixels.

marker_color¶

property – The color of the marker. If this is the empty string, the line is not shown.

marker_size¶

property – The size of the marker, in pixels.

xdata¶

property – A list of values for the x-axis.

xlabel¶

property – The label to show on the x-axis.

ydata¶

property – A list of values for the y-axis.

ylabel¶

property – The label to show on the y-axis.

yrange¶

property – The range for the y-axis. If None (default) it is determined from the data.