4.2.6.1. MiniZincIDE solution visualisation tools

Provides functionality for web-based solution visualisation.

All predefined visualisations are designed to used from output items:

var 1..10: x;
output vis_line(x, "x-value");

Multiple such output items can be used in a single model to open multiple visualisations concurrently.

Custom visualisations can be created using the vis_server function:

int: n;
var 1..10: x;
output :: vis_server("my-vis.html", (n: n)) (x: x);

The file my-vis.html will be opened and the MiniZinc IDE JavaScript API can be used to listen for events and retrieve solutions. For more information, see Visualising solutions in the MiniZinc IDE.

In this section: vis_bar, vis_column, vis_digraph, vis_digraph_highlight, vis_gantt, vis_geost_2d, vis_graph, vis_graph_highlight, vis_line, vis_scatter, vis_scatter_cumulative, vis_server.

vis_bar

1.  annotation vis_bar(array [$$D] of var int: x)

2.  annotation vis_bar(array [$$D] of var float: x)

3.  annotation vis_bar(array [$$D] of var int: x,
                       array [$$D] of string: data_labels)

4.  annotation vis_bar(array [$$D] of var float: x,
                       array [$$D] of string: data_labels)

5.  annotation vis_bar(array [$$S,$$D] of var int: x)

6.  annotation vis_bar(array [$$S,$$D] of var float: x)

7.  annotation vis_bar(array [$$S,$$D] of var int: x,
                       array [$$S] of string: series_labels,
                       array [$$D] of string: data_labels)

8.  annotation vis_bar(array [$$S,$$D] of var float: x,
                       array [$$S] of string: series_labels,
                       array [$$D] of string: data_labels)

1, 2.: Visualise a bar chart of the values in x (labelled by index set)
3, 4.: Visualise a bar chart of the values in x. Chart values are labelled with data_labels.
5, 6.: Visualise a bar chart with grouped data (labelled by index set). x[i, j] is the value for j in data series i.
7, 8.: Visualise a bar chart with grouped data. x[i, j] is the value for j in data series i. Series are labelled with series_labels. Chart values are labelled with data_labels.

vis_column

1.  annotation vis_column(array [$$D] of var int: x)

2.  annotation vis_column(array [$$D] of var float: x)

3.  annotation vis_column(array [$$D] of var int: x,
                          array [$$D] of string: data_labels)

4.  annotation vis_column(array [$$D] of var float: x,
                          array [$$D] of string: data_labels)

5.  annotation vis_column(array [$$S,$$D] of var int: x)

6.  annotation vis_column(array [$$S,$$D] of var float: x)

7.  annotation vis_column(array [$$S,$$D] of var int: x,
                          array [$$S] of string: series_labels,
                          array [$$D] of string: data_labels)

8.  annotation vis_column(array [$$S,$$D] of var float: x,
                          array [$$S] of string: series_labels,
                          array [$$D] of string: data_labels)

1, 2.: Visualise a column chart of the values in x (labelled by index set)
3, 4.: Visualise a column chart of the values in x. Chart values are labelled with data_labels.
5, 6.: Visualise a column chart with grouped data (labelled by index set). x[i, j] is the value for j in data series i.
7, 8.: Visualise a column chart with grouped data. x[i, j] is the value for j in data series i. Series are labelled with series_labels. Chart values are labelled with data_labels.

vis_digraph

1.  annotation vis_digraph(array [$$E] of $$N: from,
                           array [$$E] of $$N: to,
                           array [$$E] of string: edge_labels,
                           array [$$N] of var bool: ns,
                           array [$$E] of var bool: es)

2.  annotation vis_digraph(array [$$E] of $$N: from,
                           array [$$E] of $$N: to,
                           array [$$N] of var bool: ns,
                           array [$$E] of var bool: es)

3.  annotation vis_digraph(array [$$N] of string: node_labels,
                           array [$$E] of $$N: from,
                           array [$$E] of $$N: to,
                           array [$$E] of string: edge_labels,
                           array [$$N] of var bool: ns,
                           array [$$E] of var bool: es)

Create a visualisation of the subgraph ns and es of a given directed graph. The nodes are labelled using the index set of ns.

Parameters:
- from: the leaving node for each edge
- to: the entering node for each edge
- edge_labels: labels to use for each edge
- ns: a Boolean for each node whether it is in the subgraph
- es: a Boolean for each edge whether it is in the subgraph
Create a visualisation of the subgraph ns and es of a given directed graph. The nodes are labelled using the index set of ns and the edges are labelled using the index set of es.

Parameters:
- from: the leaving node for each edge
- to: the entering node for each edge
- ns: a Boolean for each node whether it is in the subgraph
- es: a Boolean for each edge whether it is in the subgraph
Create a visualisation of the subgraph ns and es of a given directed graph.

Parameters:
- node_labels: the label for each node
- from: the leaving node for each edge
- to: the entering node for each edge
- edge_labels: labels to use for each edge
- ns: a Boolean for each node whether it is in the subgraph
- es: a Boolean for each edge whether it is in the subgraph

vis_digraph_highlight

1.  annotation vis_digraph_highlight(array [$$E] of $$N: from,
                                     array [$$E] of $$N: to,
                                     array [$$E] of string: edge_labels,
                                     array [$$N] of var bool: ns,
                                     array [$$E] of var bool: es)

2.  annotation vis_digraph_highlight(array [$$E] of $$N: from,
                                     array [$$E] of $$N: to,
                                     array [$$N] of var bool: ns,
                                     array [$$E] of var bool: es)

3.  annotation vis_digraph_highlight(array [$$N] of string: node_labels,
                                     array [$$E] of $$N: from,
                                     array [$$E] of $$N: to,
                                     array [$$E] of string: edge_labels,
                                     array [$$N] of var bool: ns,
                                     array [$$E] of var bool: es)

Create a visualisation of the subgraph ns and es of a given directed graph. The nodes are labelled using the index set of ns. The entire graph is drawn, with the given subgraph highlighted.

Parameters:
- from: the leaving node for each edge
- to: the entering node for each edge
- edge_labels: labels to use for each edge
- ns: a Boolean for each node whether it is in the subgraph
- es: a Boolean for each edge whether it is in the subgraph
Create a visualisation of the subgraph ns and es of a given directed graph. The nodes are labelled using the index set of ns and the edges are labelled using the index set of es. The entire graph is drawn, with the given subgraph highlighted.

Parameters:
- from: the leaving node for each edge
- to: the entering node for each edge
- ns: a Boolean for each node whether it is in the subgraph
- es: a Boolean for each edge whether it is in the subgraph
Create a visualisation of the subgraph ns and es of a given directed graph. The entire graph is drawn, with the given subgraph highlighted.

Parameters:
- node_labels: the label for each node
- from: the leaving node for each edge
- to: the entering node for each edge
- edge_labels: labels to use for each edge
- ns: a Boolean for each node whether it is in the subgraph
- es: a Boolean for each edge whether it is in the subgraph

vis_gantt

1.  annotation vis_gantt(array [$$E] of var int: start,
                         array [$$E] of var int: dur)

2.  annotation vis_gantt(array [$$E] of var int: start,
                         array [$$E] of var int: dur,
                         array [$$E] of string: labels)

3.  annotation vis_gantt(array [$$E] of var int: start,
                         array [$$E] of var int: dur,
                         array [$$E] of string: labels,
                         array [$$E] of string: colors)

Visualise a Gantt chart of tasks with start times start and durations dur. The tasks are labelled using the index set of start.
Visualise a Gantt chart of tasks with start times start and durations dur. The tasks are labelled using labels.
Visualise a Gantt chart of tasks with start times start and durations dur. The tasks are labelled using labels and given the colours colors.

vis_geost_2d

1.  annotation vis_geost_2d(array [$$E] of int: rect_x,
                            array [$$E] of int: rect_y,
                            array [$$E] of int: rect_dx,
                            array [$$E] of int: rect_dy,
                            array [$$K] of set of $$E: shape,
                            array [$$T] of var int: x,
                            array [$$T] of var int: y,
                            array [$$T] of var $$K: kind)

2.  annotation vis_geost_2d(array [$$E,1..2] of int: rect_size,
                            array [$$E,1..2] of int: rect_offset,
                            array [$$K] of set of $$E: shape,
                            array [$$T,1..2] of var int: x,
                            array [$$T] of var $$K: kind)

3.  annotation vis_geost_2d(array [$$E] of tuple(int, int): rect_size,
                            array [$$E] of tuple(int, int): rect_offset,
                            array [$$K] of set of $$E: shape,
                            array [$$T] of var tuple(var int, var int): x,
                            array [$$T] of var $$K: kind)

Visualise the positions of 2-dimensional objects which take a particular shape composed of rectangles.

Parameters:
- rect_x: x-position of each rectangle
- rect_y: y-position of each rectangle
- rect_dx: width of each rectangle
- rect_dy: height of each rectangle
- shape: the rectangles which comprise each shape
- x: the x-position of each object
- y: the y-position of each object
- kind: which shape each object is

2, 3.

Visualise the positions of 2-dimensional objects which take a particular shape composed of rectangles.

Parameters:

rect_size: the size of each rectangle
rect_offset: the position of each rectangle
shape: the rectangles which comprise each shape
x: the position of each object
kind: which shape each object is

vis_graph

1.  annotation vis_graph(array [$$E] of $$N: from,
                         array [$$E] of $$N: to,
                         array [$$E] of string: edge_labels,
                         array [$$N] of var bool: ns,
                         array [$$E] of var bool: es)

2.  annotation vis_graph(array [$$E] of $$N: from,
                         array [$$E] of $$N: to,
                         array [$$N] of var bool: ns,
                         array [$$E] of var bool: es)

3.  annotation vis_graph(array [$$N] of string: node_labels,
                         array [$$E] of $$N: from,
                         array [$$E] of $$N: to,
                         array [$$E] of string: edge_labels,
                         array [$$N] of var bool: ns,
                         array [$$E] of var bool: es)

Create a visualisation of the subgraph ns and es of a given undirected graph. The nodes are labelled using the index set of ns.

Parameters:
- from: the leaving node for each edge
- to: the entering node for each edge
- edge_labels: labels to use for each edge
- ns: a Boolean for each node whether it is in the subgraph
- es: a Boolean for each edge whether it is in the subgraph
Create a visualisation of the subgraph ns and es of a given undirected graph. The nodes are labelled using the index set of ns and the edges are labelled using the index set of es.

Parameters:
- from: the leaving node for each edge
- to: the entering node for each edge
- ns: a Boolean for each node whether it is in the subgraph
- es: a Boolean for each edge whether it is in the subgraph
Create a visualisation of the subgraph ns and es of a given undirected graph.

Parameters:
- node_labels: the label for each node
- from: the leaving node for each edge
- to: the entering node for each edge
- edge_labels: labels to use for each edge
- ns: a Boolean for each node whether it is in the subgraph
- es: a Boolean for each edge whether it is in the subgraph

vis_graph_highlight

1.  annotation vis_graph_highlight(array [$$E] of $$N: from,
                                   array [$$E] of $$N: to,
                                   array [$$E] of string: edge_labels,
                                   array [$$N] of var bool: ns,
                                   array [$$E] of var bool: es)

2.  annotation vis_graph_highlight(array [$$E] of $$N: from,
                                   array [$$E] of $$N: to,
                                   array [$$N] of var bool: ns,
                                   array [$$E] of var bool: es)

3.  annotation vis_graph_highlight(array [$$N] of string: node_labels,
                                   array [$$E] of $$N: from,
                                   array [$$E] of $$N: to,
                                   array [$$E] of string: edge_labels,
                                   array [$$N] of var bool: ns,
                                   array [$$E] of var bool: es)

Create a visualisation of the subgraph ns and es of a given undirected graph. The nodes are labelled using the index set of ns. The entire graph is drawn, with the given subgraph highlighted.

Parameters:
- from: the leaving node for each edge
- to: the entering node for each edge
- edge_labels: labels to use for each edge
- ns: a Boolean for each node whether it is in the subgraph
- es: a Boolean for each edge whether it is in the subgraph
Create a visualisation of the subgraph ns and es of a given undirected graph. The nodes are labelled using the index set of ns and the edges are labelled using the index set of es. The entire graph is drawn, with the given subgraph highlighted.

Parameters:
- from: the leaving node for each edge
- to: the entering node for each edge
- ns: a Boolean for each node whether it is in the subgraph
- es: a Boolean for each edge whether it is in the subgraph
Create a visualisation of the subgraph ns and es of a given undirected graph. The entire graph is drawn, with the given subgraph highlighted.

Parameters:
- node_labels: the label for each node
- from: the leaving node for each edge
- to: the entering node for each edge
- edge_labels: labels to use for each edge
- ns: a Boolean for each node whether it is in the subgraph
- es: a Boolean for each edge whether it is in the subgraph

vis_line

1.  annotation vis_line(var int: x, string: label)

2.  annotation vis_line(var float: x, string: label)

3.  annotation vis_line(array [$$E] of var int: x)

4.  annotation vis_line(array [$$E] of var float: x)

5.  annotation vis_line(array [$$E] of var int: x,
                        array [$$E] of string: series_labels)

6.  annotation vis_line(array [$$E] of var float: x,
                        array [$$E] of string: series_labels)

7.  annotation vis_line(array [$$E] of var int: x,
                        array [$$E] of var int: y,
                        string: x_label,
                        string: y_label)

8.  annotation vis_line(array [$$E] of var float: x,
                        array [$$E] of var float: y,
                        string: x_label,
                        string: y_label)

1, 2.: Add a line graph of x with respect to solution time, labelling the trace label.
3, 4.: Add line graphs of the values in x with respect to solution time on the same axes, labelling the series using their index.
5, 6.: Add line graphs of the values in x with respect to solution time on the same axes, labelling the series with series_labels.
7, 8.: Add a line graph of x against y, labelling the axes x_label and y_label respectively.

vis_scatter

annotation vis_scatter(array [$$E] of var int: x,
                       array [$$E] of var int: y,
                       string: x_label,
                       string: y_label)
annotation vis_scatter(array [$$E] of var float: x,
                       array [$$E] of var float: y,
                       string: x_label,
                       string: y_label)

Add a scatter plot of x against y, labelling the axes x_label and y_label respectively.

vis_scatter_cumulative

1.  annotation vis_scatter_cumulative(var int: x,
                                      var int: y,
                                      string: x_label,
                                      string: y_label,
                                      string: series_label)

2.  annotation vis_scatter_cumulative(var float: x,
                                      var float: y,
                                      string: x_label,
                                      string: y_label,
                                      string: series_label)

3.  annotation vis_scatter_cumulative(array [$$E] of var int: x,
                                      array [$$E] of var int: y,
                                      string: x_label,
                                      string: y_label)

4.  annotation vis_scatter_cumulative(array [$$E] of var float: x,
                                      array [$$E] of var float: y,
                                      string: x_label,
                                      string: y_label)

5.  annotation vis_scatter_cumulative(array [$$E] of var int: x,
                                      array [$$E] of var int: y,
                                      string: x_label,
                                      string: y_label,
                                      array [$$E] of string: series_labels)

6.  annotation vis_scatter_cumulative(array [$$E] of var float: x,
                                      array [$$E] of var float: y,
                                      string: x_label,
                                      string: y_label,
                                      array [$$E] of string: series_labels)

1, 2.

Create a scatter-plot visualisation. The point (x, y) is added to the plot for each solution.

Parameters:

x: the x coordinate
y: the y coordinate
x_label: the x-axis label
y_label: the y-axis label
series_label: the series label

3, 4.

Create a scatter-plot visualisation with multiple series. The point (x[i], y[i]) for each series i is added to the plot for each solution. Series are labelled using the index set of x and y.

Parameters:

x: the x coordinate for each series
y: the y coordinate for each series
x_label: the x-axis label
y_label: the y-axis label

5, 6.

Create a scatter-plot visualisation with multiple series. The point (x[i], y[i]) for each series i is added to the plot for each solution.

Parameters:

x: the x coordinate for each series
y: the y coordinate for each series
x_label: the x-axis label
y_label: the y-axis label
series_labels: the label for each series

vis_server

 annotation vis_server(string: file)

 annotation vis_server(string: file, opt $T: user_data)

 annotation vis_server(string: file, array [$X] of opt $T: user_data)

Launch a visualisation server for a custom visualisation using the given file.

2, 3.: Launch a visualisation server for a custom visualisation using the given file. The user_data value can be retrieved in the page using MiniZincIDE.getUserData().