GridPlot

Introduction

GridPlot widget in Supervisely is used to create a grid of LinePlot subplots with a given list of data. Users can add plots in real-time, making it useful for interactive data exploration and analysis.

Function signature

data_1 = {
    "title": "Line 1",
    "series": [{"name": "Line 1", "data": s1}],
}

data_2 = {
    "title": "Line 2",
    "series": [{"name": "Line 2", "data": s2}],
}

data_all = {
    "title": "All lines",
    "series": [{"name": "Line 1", "data": s1}, {"name": "Line 2", "data": s2}],
}

grid_plot = GridPlot(data=[data_1, data_2, data_all], columns=3)

Parameters

Parameters	Type	Description
data	List[dict or str]	List of data to display on GridPlot.str inputs will be recognized as a titles for empty widgets.
columns	int	Number of columns on GridPlot
gap	int	Gap between widgets on GridPlot
widget_id	str	ID of the widget

data

List of data to display on GridPlot.

type: List[Dict or str]

data_max = {"title": "Max", "series": [{"name": "Max", "data": s1}]}
data_denis = {"title": "Denis", "series": [{"name": "Denis", "data": s2}]}

grid_plot = GridPlot(data=[data_max, data_denis])

columns

Determine number of columns on GridPlot.

type: int

default value: 1

data_max = {"title": "Max", "series": [{"name": "Max", "data": s1}]}
data_denis = {"title": "Denis", "series": [{"name": "Denis", "data": s2}]}

grid_plot = GridPlot(data=[data_max, data_denis], columns=2)

gap

Determine gap between widgets on GridPlot.

type: int

default value: 10

data_max = {"title": "Max", "series": [{"name": "Max", "data": s1}]}
data_denis = {"title": "Denis", "series": [{"name": "Denis", "data": s2}]}

grid_plot = GridPlot(data=[data_max, data_denis], columns=2, gap=100)

widget_id

ID of the widget.

type: str

default value: None

Methods and attributes

Attributes and Methods	Description
add_scalar(dentifier: str, y, x)	Add data in GridPlot.
add_scalars(plot_title: str, new_values: dict, x)	Add series of data in GridPlot.

Mini App Example

You can find this example in our GitHub repository:

ui-widgets-demos/charts and plots/006_grid_plot/src/main.py

Import libraries

import os
import supervisely as sly
from supervisely.app.widgets import Card, Container, GridPlot
from dotenv import load_dotenv
import numpy as np

Init API client

First, we load environment variables with credentials and init API for communicating with Supervisely Instance:

load_dotenv("local.env")
load_dotenv(os.path.expanduser("~/supervisely.env"))

api = sly.Api()

Prepare series for plot

size1 = 10
x1 = list(range(size1))
y1 = np.random.randint(low=10, high=148, size=size1).tolist()
s1 = [{"x": x, "y": y} for x, y in zip(x1, y1)]

size2 = 30
x2 = list(range(size2))
y2 = np.random.randint(low=0, high=300, size=size2).tolist()
s2 = [{"x": x, "y": y} for x, y in zip(x2, y2)]

data_max = {"title": "Max", "series": [{"name": "Max", "data": s1}]}

data_denis = {"title": "Denis", "series": [{"name": "Denis", "data": s2}]}

data_all = {
    "title": "Max vs Denis",
    "series": [{"name": "Max", "data": s1}, {"name": "Denis", "data": s2}]}

Initialize GridPlot widget

grid_plot = GridPlot(data=[data_max, data_denis, data_all], columns=2)

Create app layout

Prepare a layout for app using Card widget with the content parameter and place widget that we've just created in the Container widget.

card = Card(
    title="GridPlot",
    content=grid_plot,
)

layout = Container(widgets=[card], direction="vertical")

Create app using layout

Create an app object with layout parameter.

app = sly.Application(layout=layout)