Interacting with Plotly Chart

This example shows how to change a Plotly Chart when a user changes an Input that affect it. The example assumes you already understand the basics of Charts as well as how to refresh Widgets in response to user interaction.

The example displays a line graph with two lines. One of the lines changes its values based on a factor, which the user can select from a SelectInput.

Add a Field on ChartForm to keep track of the factor:

    fields = ExposedNames()
    fields.factor = lambda i: ChoiceField([Choice(c, IntegerField(label=str(c))) for c in range(1, 10)])

The factor attribute of ChartForm will only be updated in response to user changes once an Input is created for it.

This means that you first initialise factor, then create the SelectInput to possibly update the default value of factor. After the creation of the SelectInput, create the Chart (which uses factor). Lastly, call set_refresh_widgets() to make the SelectInput change the contents of the Chart:

Note

Refreshing only the contents of the Chart instead of the entire Chart updates the screen faster.

    def __init__(self, view):
        super().__init__(view, 'chartform')
        self.factor = 1
        self.use_layout(FormLayout())

        select_input = self.layout.add_input(SelectInput(self, self.fields.factor))  # Creating the input, sets self.factor
        chart = self.create_chart(self.factor)
        select_input.set_refresh_widgets([chart.contents])

Here is the entire example:

class ChartForm(Form):
    def __init__(self, view):
        super().__init__(view, 'chartform')
        self.factor = 1
        self.use_layout(FormLayout())

        select_input = self.layout.add_input(SelectInput(self, self.fields.factor))  # Creating the input, sets self.factor
        chart = self.create_chart(self.factor)
        select_input.set_refresh_widgets([chart.contents])

    def create_chart(self, factor):
        fig = self.create_line_chart_figure(factor)
        return self.add_child(Chart(self.view, fig, 'changing-chart'))

    fields = ExposedNames()
    fields.factor = lambda i: ChoiceField([Choice(c, IntegerField(label=str(c))) for c in range(1, 10)])

    def create_line_chart_figure(self, factor):
        x = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        fig = go.Figure()
        fig.add_trace(go.Scatter(x=x, y=[1000, 1500, 1360, 1450, 1470, 1500, 1700], name='first line'))
        fig.add_trace(go.Scatter(x=x, y=[i*factor for i in [100, 200, 300, 450, 530, 570, 600, 640, 630, 690, ]], name='second line'))
        fig.update_layout(
            title="Line chart",
            hovermode="x unified",
            xaxis_title="X Axis Title",
            yaxis_title="Y Axis Title"
        )
        return fig