Show plots, charts & graphs

Using Plotly

Plotly is a free and open source package that simplifies the creation of interactive graphs, such as line plots, scatter plots, histograms, etc. A Plotly graph can be incorporated in your VIKTOR app by making use of a PlotlyView.

Example of how an interactive visualization in the PlotlyView could look like (source: plot.ly)

The Plotly graph can either be passed to a PlotlyResult as a (JSON) str representation (e.g. by creating a Plotly Figure object and calling to_json on it), or as a valid Plotly dict:

import plotly.graph_objects as go

from viktor import ViktorController
from viktor.views import PlotlyView, PlotlyResult


class Controller(ViktorController):
    ...

    @PlotlyView("Plotly view", duration_guess=1)
    def get_plotly_view(self, params, **kwargs):
        fig = go.Figure(
            data=[go.Bar(x=[1, 2, 3], y=[1, 3, 2])],
            layout=go.Layout(title=go.layout.Title(text="A Figure Specified By A Graph Object"))
        )
        return PlotlyResult(fig.to_json())

from viktor import ViktorController
from viktor.views import PlotlyView, PlotlyResult

class Controller(ViktorController):
    ...

    @PlotlyView("Plotly view", duration_guess=1)
    def get_plotly_view(self, params, **kwargs):
        fig = {
            "data": [{"type": "bar", "x": [1, 2, 3], "y": [1, 3, 2]}],
            "layout": {"title": {"text": "A Figure Specified By Python Dictionary"}}
        }
        return PlotlyResult(fig)

A Plotly view can be combined with data using a PlotlyAndDataView

Testing

New in v13.3.0

mock_View decorator for easier testing of view methods

Methods decorated with @PlotlyView or @PlotlyAndDataView need to be mocked within the context of (automated) testing.

import unittest

from viktor.testing import mock_View

from app.my_entity_type.controller import MyEntityTypeController

class TestMyEntityTypeController(unittest.TestCase):

    @mock_View(MyEntityTypeController)
    def test_plotly_view(self):
        params = ...
        result = MyEntityTypeController().plotly_view(params=params)
        self.assertEqual(result.figure, ...)

Using Matplotlib

You can show Matplotlib figures as static images using ImageView.

If you want an interactive graph and have a more sophisticated data visualisation tool, we recommend using Plotly.

Here is an example of how to use Matplotlib:

from viktor import ViktorController
from viktor.parametrization import ViktorParametrization, NumberField, Text
from viktor.views import ImageResult, ImageView

import numpy as np
import matplotlib.pyplot as plt
from io import StringIO

class Parametrization(ViktorParametrization):
    introduction = Text("Fill in values for A, B and C to plot the following equation: $y = Ax^2 + Bx + C$")

    constant_a = NumberField('A',default=1)
    constant_b = NumberField('B', default=1)
    constant_c = NumberField('C', default=1)

class Controller(ViktorController):
    label = 'My Entity Type'
    parametrization = Parametrization

    @ImageView("Plot", duration_guess=1)
    def createPlot(self, params, **kwargs):
        fig = plt.figure()
        x = np.arange(-10, 10, 1)
        y = params.constant_a*x**2 + params.constant_b*x + params.constant_c
        plt.plot(x, y)

        svg_data = StringIO()
        fig.savefig(svg_data, format='svg')
        plt.close()

        return ImageResult(svg_data)