Charts

Pie chart

MIRO uses Plotly to render pie charts.

Configuration

Any GAMS symbol with a value column can be displayed as a pie chart.

Example: Model Pickstock, parameter weight

Set         symbol           'stock symbol';
Variable    w(symbol)        'what part of the portfolio'; 
                                    
$onExternalOutput    
Parameter   weight(symbol)   'weight of stock';
$offExternalOutput

stock_weight(s) = w.l(s);

In a resulting GDX this parameter looks as follows:

Pie chart data

In the Configuration Mode we can then configure a pie chart.

Pie chart configuration

Note:
Instead of the parameter weight, to which you assign the values of the variable w, you could have used a pie chart directly for the levels of variable w. However, this variable also contains all the zero values (due to nonzero upper bounds and scale factors) that would then become visible in the pie chart, see below. If you assign the levels of the variable w (w.l(symbol)) to the parameter weight instead, zeros will be squeezed out.

Pie chart with variable

Multi-pie chart:
In a pie chart only one dimension, i.e. one column of a table, can be displayed. However, it is possible to display several pie charts for one symbol at the same time. This makes it possible to easily distribute a multidimensional symbol over several pie charts. This is comparable to e.g. a line chart, where new lines can be displayed by including new table headers.

Multi-pie chart

JSON example


{
  "dataRendering": {
    "stock_weight": {
      "outType": "dtGraph",
      "graph": {
        "title": "Portfolio composition",
        "tool": "plotly",
        "type": "pie",
        "traces": {
          "1": {
            "labels": "symbol",
            "values": "value",
            "hole": 0,
            "name": "weight"
          }
        },
        "showlegend": true,
        "staticPlot": false
      },
      "height": 700
    }
  }
}
                                    

Donut chart

MIRO uses Plotly to render donut charts.

Configuration

A donut chart is a pie chart with a "hole". In the Configuration Mode the donut chart is therefore to be found under pie chart. In addition to a standard pie chart, only the size of the donut "hole" can be configured.

Example: Model Pickstock, parameter weight

Donut chart configuration

JSON example


{
  "dataRendering": {
    "stock_weight": {
      "outType": "dtGraph",
      "graph": {
        "title": "Portfolio composition",
        "tool": "plotly",
        "type": "pie",
        "traces": {
          "1": {
            "labels": "symbol",
            "values": "value",
            "hole": 0.6,
            "name": "weight"
          }
        },
        "showlegend": true,
        "staticPlot": false
      },
      "height": 700
    }
  }
}
                                    

Bar chart

MIRO uses Plotly to render bar charts.

Configuration

If a symbol is to be visualized as a bar chart, an index must be specified for the x-axis as well as for the y-axis. Several data series can be plotted together on the x-axis.

Example: Model Pickstock, parameter weight

Set         symbol           'stock symbol';
Variable    w(symbol)        'what part of the portfolio'; 
                                    
$onExternalOutput    
Parameter   weight(symbol)   'weight of stock';
$offExternalOutput

stock_weight(s) = w.l(s);

In a resulting GDX this parameter looks as follows:

Bar chart data

In the Configuration Mode we then can configure a bar chart.

Bar chart configuration

Note:
Instead of the parameter weight, to which you assign the values of the variable w, you could have used a bar chart directly for the levels of variable w. However, this variable also contains all the zero values that would then become visible in the chart, see the pie chart example.

JSON example


{
  "dataRendering": {
    "stock_weight": {
      "outType": "graph",
      "graph": {
        "title": "Portfolio composition",
        "tool": "plotly",
        "type": "bar",
        "barmode": "group",
        "ydata": {
          "value": {
            "label": "weight",
            "mode": "lines",
            "marker": {
              "line": {
                "width": 0
              },
              "color": "#ed0652"
            }
          }
        },
        "xdata": "symbol",
        "showlegend": false,
        "xaxis": {
          "title": "stock symbol",
          "showgrid": false,
          "zeroline": false,
          "showticklabels": true,
          "categoryorder": "trace"
        },
        "yaxis": {
          "title": "weight",
          "showgrid": false,
          "zeroline": false,
          "showticklabels": true,
          "categoryorder": "trace"
        }
      },
      "height": 700
    }
}
                                    

Scatter plot

MIRO uses Plotly to render scatter plots.

Configuration

Example: Model Pickstock, parameter absolute error

The parameter to plot represents the absolute errors in the training phase.
We define a parameter abserror(td, 'absolute error train') (last row), to which we assign the values of the parameter error(d), but only those values where ord(d) <= trainingdays.

Set         date           'date';
Parameter   error(date)    'Absolute error'; 

td(d)     = ord(d) <= trainingdays;
ntd(d)    = not td(d);

solve pickStock min obj using mip;

error(d)  = abs(index(d)-fund(d));                 
   
Set errHdr    'stock symbol header'    / 'absolute error train', 'absolute error test' /; 
  
$onExternalOutput    
Table abserror(date,errHdr)          'absolute error';  
$offExternalOutput

abserror(td, 'absolute error train')   = error(td);
abserror(ntd,'absolute error test')    = error(ntd);

In a resulting GDX this parameter looks as follows:

Scatter plot data

In the Configuration Mode we then can configure a scatter plot.

Scatter plot configuration

JSON example


{
  "dataRendering": {
    "abserror": {
      "outType": "graph",
      "graph": {
        "title": "Absolute error",
        "tool": "plotly",
        "type": "scatter",
        "ydata": {
          "absolute error train": {
            "label": "absolute error train",
            "mode": "markers",
            "fill": "none",
            "marker": {
              "symbol": "circle",
              "opacity": 1,
              "size": "12",
              "line": {
                "width": "2",
                "color": "#000000"
              },
              "color": "#ff0000"
            },
            "showlegend": false
          }
        },
        "xdata": "date",
        "showlegend": true,
        "xaxis": {
          "title": "date",
          "showgrid": false,
          "zeroline": false,
          "showticklabels": true,
          "categoryorder": "trace",
          "rangefrom": "2016-01-01",
          "rangeto": "2016-05-01"
        },
        "yaxis": {
          "title": "absolute error train",
          "showgrid": false,
          "zeroline": false,
          "showticklabels": true,
          "categoryorder": "trace"
        }
      },
      "height": 700
    }
  }
}
                                    

Line chart

MIRO uses Plotly to render line charts.

Configuration

Line charts also include area charts.

Example: Model Pickstock, parameter absolute error

For an example in GAMS, see the scatter plot example.

Line chart configuration

JSON example


{
  "dataRendering": {
    "abserror": {
      "outType": "graph",
      "graph": {
        "title": "Absolute error",
        "tool": "plotly",
        "type": "scatter",
        "ydata": {
          "absolute error train": {
            "label": "absolute error train",
            "mode": "lines",
            "line": {
              "width": 2,
              "shape": "linear",
              "dash": "solid"
            },
            "showlegend": false,
            "fill": "tozeroy"
          },
          "absolute error test": {
            "label": "absolute error test",
            "mode": "lines",
            "line": {
              "width": 2,
              "shape": "linear",
              "dash": "solid"
            },
            "showlegend": false,
            "fill": "tozeroy"
          }
        },
        "xdata": "date",
        "showlegend": true,
        "xaxis": {
          "title": "date",
          "showgrid": false,
          "zeroline": false,
          "showticklabels": true,
          "categoryorder": "trace"
        },
        "yaxis": {
          "title": "absolute error train",
          "showgrid": false,
          "zeroline": false,
          "showticklabels": true,
          "categoryorder": "trace"
        },
        "plot_bgcolor": "rgba(95,95,95,0.08)"
      },
      "height": 700
    }
  }
}
                                    

Bubble chart

MIRO uses Plotly to render bubble charts.

Configuration

A bubble chart is a scatter diagram with an additional dimension in the form of the size of the "bubbles".

Example: Model Pickstock, parameter absolute error

For an example in GAMS, see the scatter plot example.

Bubble chart configuration

JSON example


{
  "dataRendering": {
    "abserror": {
      "outType": "graph",
      "graph": {
        "title": "Absolute error",
        "tool": "plotly",
        "type": "bubble",
        "ydata": {
          "absolute error train": {
            "label": "absolute error train",
            "mode": "markers",
            "marker": {
              "symbol": "circle",
              "opacity": 1,
              "size": "absolute error train",
              "color": "absolute error train",
              "line": {
                "width": 0
              },
              "maxsize": 20
            },
            "showlegend": false
          }
        },
        "xdata": "date",
        "showlegend": false,
        "xaxis": {
          "title": "date",
          "showgrid": false,
          "zeroline": false,
          "showticklabels": true,
          "categoryorder": "trace",
          "rangefrom": "2016-01-01",
          "rangeto": "2016-05-01"
        },
        "yaxis": {
          "title": "absolute error train",
          "showgrid": false,
          "zeroline": false,
          "showticklabels": true,
          "categoryorder": "trace"
        }
      },
      "height": 700
    }
  }
}
                                    

Histogram

MIRO uses Plotly to render histograms.

Configuration

Example: Model Pickstock, parameter absolute error

For an example in GAMS, see the scatter plot example.

Histogram configuration

JSON example


{
  "dataRendering": {
    "abserror": {
      "outType": "graph",
      "graph": {
        "title": "Absolute error",
        "tool": "plotly",
        "type": "hist",
        "xdata": {
          "absolute error train": {
            "labels": "absolute error train",
            "color": "rgba(40,181,35,0.73)"
          },
          "absolute error test": {
            "labels": "absolute error test",
            "color": "rgba(255,0,0,0.62)"
          }
        },
        "histnorm": "",
        "nbins": 5,
        "barmode": "overlay",
        "alpha": 0.6,
        "xaxis": {
          "title": "absolute error train"
        },
        "cumulative": false,
        "horizontal": false,
        "yaxis": {
          "title": "Frequency"
        },
        "showlegend": true
      },
      "height": 700
    }
  }
}
                                    

Map

MIRO uses Leaflet to render maps.

Configuration

Example: Model Transport, parameter shipment quantities in cases

The parameter to plot represents the shipment quantities between canning plants and markets.

Set   
    i           'canning plants'
    j           'markets'
    scheduleHdr 'schedule header' / 'lngP', 'latP', 'lngM', 'latM', 'cap', 'demand', 'quantities' /;
  
$onExternalOutput
Table  schedule(i,j,scheduleHdr) 'shipment quantities in cases';
$offExternalOutput

schedule(i,j, 'lngP')       = iLocData(i,'lng');
schedule(i,j, 'latP')       = iLocData(i,'lat');
schedule(i,j, 'lngM')       = jLocData(j,'lng');
schedule(i,j, 'latM')       = jLocData(j,'lat');
schedule(i,j, 'cap')        = a(i);
schedule(i,j, 'demand')     = b(j);
schedule(i,j, 'quantities') = x.l(i,j);
Note:

To be able to set markers on a map, the map tool requires latitude and longitude information. Because we need multiple value columns, we need to declare the parameter to plot as a table instead of a parameter (which only has a single value column). In this way, the set elements of the last index of the symbol are flipped up and communicated as columns to which MIRO now has access. By declaring the parameter schedule as a table, the elements of the last index set scheduleHdr (lngP, latP, lngM, latM, cap, demand, quantities) can be used for the map configuration. You can find a detailed example here

In a resulting GDX this parameter looks as follows:

Map data

In the Configuration Mode we then can configure a map.

Map configuration

With regard to map-based graphics, a multitude of possible visualizations are conceivable. In the Configuration Mode of MIRO, the following features can be realized on a map:

  • Markers
    Markers can be set. For this purpose, the position of the markers must be available in the data as longitude and latitude information (see table above). Marker labels can be set dynamically, i.e. based on data. In the following example, the marker label is set to Market: [j]. If you now click on a marker on the resulting map, the label will not be Market: [j]. Instead, the [j] is replaced with the element of the GAMS index set belonging to the marker (here: Chicago).
    Map markers
    The second index of the symbol schedule contains the markets j. The indices lngM and latM were selected as longitude and latitude data. For a given longitude-latitude combination, the corresponding element from the second index j is now displayed as label.
  • Flows
    Flows can be displayed between different points on the map. If configured accordingly, the thickness of the arrows can depend on the flow data. The data overview from the table above also helps to understand this: In the example below the flows have been configured to point from lngP/latP to lngM/latM. The thickness depends on the data in the column quantities.
    Map flows
    Unique flow labels:

    When configuring flows, you can optionally specify a unique label for each flow. This label appears when you click on a flow. It is important that the label is different for each flow. If this is not the case, only one flow is displayed for each duplicated label. A suitable configuration for a label is to specify the originator and the recipient for each flow. You can achieve this by using the quare brackets syntax to address the symbol/data domains. In the example above the symbol schedule is used to display a map:

    Set   
        i           'canning plants'
        j           'markets'
        scheduleHdr 'schedule header' / 'lngP', 'latP', 'lngM', 'latM', 'cap', 'demand', 'quantities' /;
      
    $onExternalOutput
    Table  schedule(i,j,scheduleHdr) 'shipment quantities in cases';
    $offExternalOutput
    

    Originator and recipient in this case are the domains i and j of the symbol schedule. If you configure the label as follows: From [i] to [j] - then the originator and recipient cities appear as labels for each arrow:

    Unique label
  • Charts
    You can display small diagrams on your map. The following example shows a pie chart for each of the 16 German states.

    Example: Model Simple (see GAMS MIRO gallery), parameter energy mix report

    Map charts
    The graph is based on the data below:
    Map charts data
    The position of each pie chart results from a longitude/latitude combination. The data of the pie chart for each state were determined in Configuration Mode with Renewable and Fossil.
    You also have the option to define a time dimension in the charts. The data of the example covers a period of one year with a resolution of one hour. The first column was defined as the time dimension (starting with t001. In this way, a separate pie chart is displayed for each period for each state (see play button at the bottom right of the map).

    Note that all data of your entire graph must come from the same GAMS symbol. If you want to have more sophisticated graphics, it may make sense to combine data from different symbols in one symbol. Or you can use our R API and create your own graphics.

Layers
For map visualizations it can be helpful to display different layers, e.g. with markers. In Configuration Mode you can specify such layers. In the resulting graphic you can select the different layers and display only the corresponding markers.

Example: Model Transport, parameter shipment quantities in cases

Map charts data

JSON example


{
  "dataRendering": {
    "schedule": {
      "outType": "graph",
      "graph": {
        "title": "shipment quantities in cases",
        "tool": "leaflet",
        "layersControl": {
          "options": {
            "collapsed": true
          },
          "position": "topright",
          "baseGroups": ["plants", "markets"]
        },
        "markers": {
          "1": {
            "lng": "lngp",
            "lat": "latp",
            "labelOptions": {
              "textsize": "12px",
              "permanent": false
            },
            "label": "Plant [i]",
            "group": "plants"
          },
          "2": {
            "lng": "lngm",
            "lat": "latm",
            "labelOptions": {
              "textsize": "12px",
              "permanent": false
            },
            "label": "Market [j]",
            "group": "markets"
          }
        },
        "flows": {
          "1": {
            "lng0": "lngp",
            "lat0": "latp",
            "lng1": "lngm",
            "lat1": "latm",
            "flow": "quantities",
            "color": "#0000ff",
            "minThickness": 1,
            "maxThickness": 10
          }
        }
      },
      "height": 700
    }
  }
}
                                    

Time series diagram

MIRO uses DyGraphs to render time series diagrams.

Configuration

As the name of the graphic type suggests, this chart type is useful if you want to visualize time series data. An important property of such time series is the format of the data. You should make sure that the elements of the index set, which should represent the time component of your graphic, have their data available in a date format or at least can be formatted into such a format. A suitable syntax for a date would be yyyy-mm-dd, e.g. 2014-07-13.

Example: Model Pickstock, parameter dow jones vs. index fund

Set date      'date'
    fHdr      'fund header'   / dj 'dow jones','index fund'  /;
                                    
$onExternalOutput    
Table   dowVSindex(date,fHdr)  'dow jones vs. index fund';
$offExternalOutput

dowVSindex(d,'dj')             = index(d);
dowVSindex(d,'index fund')     = fund(d);

The index set date looks as follows:

Time series diagram dates

The parameter dowVSindex:

Time series diagram data

In the Configuration Mode we then can configure a time series diagram:

Time series configuration

The picture in this example shows a red dotted vertical line showing the "last day of training phase". A scalar output value has been integrated into the graph to define this event.
Note: To use such a scalar in the graphic, MIRO must of course know this symbol. You therefore need to tag it with $onExternalInput / $offExternalInput or $onExternalOutput / $offExternalOutput in the GAMS model.

Tip:

You want to use a scalar value in a graph but not in the scalars table in MIRO? You can do this by hiding that symbol.

The tool for creating time series diagrams supports the integration of static or dynamic scalar values. A static value could show a limit in the data in the form of a horizontal line. A dynamic scalar can be a date which results from the model calculations (i.e. output scalar) and is displayed in the graphic as an vertical event line.

Note:

Dynamic scalar values can only be displayed in graphics of output symbols!

The following options are available:

  • Event line
    Vertical event
  • Limit line
    Horizontal line
  • Annotation
    Annotation
  • Shading
    Shading

JSON example


{
  "dataRendering": {
    "dowvsindex": {
      "outType": "graph",
      "graph": {
        "title": "Dow Jones vs. Index fund",
        "tool": "dygraphs",
        "xdata": "date",
        "ydata": {
          "dj": {
            "label": "dow jones",
            "stemPlot": false,
            "stepPlot": false,
            "fillGraph": false,
            "drawPoints": false,
            "pointShape": "dot",
            "pointSize": 2
          },
          "index fund": {
            "label": "index fund",
            "stemPlot": false,
            "stepPlot": false,
            "fillGraph": false,
            "drawPoints": false,
            "pointShape": "dot",
            "pointSize": 2
          }
        },
        "dyOptions": {
          "includeZero": false,
          "logscale": false,
          "drawGrid": true,
          "stepPlot": false,
          "stemPlot": false,
          "fillGraph": false,
          "fillAlpha": 0.15,
          "drawPoints": false,
          "pointShape": "dot",
          "pointSize": 2
        },
        "dyHighlight": {
          "highlightCircleSize": 3,
          "highlightSeriesBackgroundAlpha": 0.5,
          "hideOnMouseOut": true
        },
        "xaxis": {
          "title": "date"
        },
        "yaxis": {
          "title": "dow jones"
        },
        "dyRangeSelector": {
          "height": 30,
          "strokeColor": "#808fab",
          "fillColor": "#a7b1c4",
          "retainDateWindow": false,
          "keepMouseZoom": true
        },
        "dyEvent": {
          "lastdaytraining": {
            "labelLoc": "top",
            "color": "rgb(255,0,0)",
            "strokePattern": "dashed",
            "label": "last day of training phase"
          }
        }
      },
      "height": 700
    }
  }
}
                                    

Pivot table

MIRO comes with a powerful pivot table renderer that allows you to filter, aggregate and pivot data. In addition to a table, the MIRO pivot table renderer also supports the visualization of data in the form of charts (line chart, bar chart etc.). Each slice, or "view" of data can be exported as a CSV file.

Configuration

You can specify the default view as well as the default renderer (table/chart) of the pivot table renderer in the Configuration Mode. Note that unlike other charting tools, you configure the MIRO pivot table directly in the preview on the right. Drag and drop the domains where you want them to be and click on "Save". The symbol is loaded in MIRO with the same view that you have set up in the Configuration Mode.

Example: Model Transport, parameter shipment quantities in cases

For an example in GAMS, see the map example.

Pivottable configuration

JSON example


{
  "dataRendering": {
    "schedule": {
      "outType": "miroPivot",
      "options": {
        "rows": "i",
        "cols": "j",
        "filter": {
          "Hdr": "quantities"
        },
        "renderer": "bar"
      },
      "height": 700
    }
  }
}
                                    

Gantt chart

MIRO uses timevis to render gantt charts.

Configuration

The GAMS symbol whose data is to be visualized as a Gantt chart must contain the following index sets:

  • Start
    Each event must have a start date. The GAMS elements of this set must be in date format, e.g. yyyy-mm-dd hh:mm:ss (hh:mm:ss is not required).
  • Content
    Each event must have a content which is then shown as a label. The GAMS elements of the underlying set can be of any format.

Optional index sets of the GAMS Symbol:

  • End
    If an event is not a single point in time, but rather a range, you can specify an end date. The GAMS elements of this set must be in date format.
  • Title
    A title is shown when you hover over an item. The GAMS elements of this set can be of any format.
  • Group
    When a group variable is specified, elements of the same group are grouped together. The GAMS elements of this set can be of any format.
Note:

The index sets of the GAMS symbol do not have to be named start, end, content etc. Only the mapping you define in the Configuration Mode is relevant.

As an example we use a GAMS Parameter gantt with index sets id, start, end, content and group:

Set
   id       'gannt_id'      / 1, 2, 3, 4, 5, 6 /
   start    'gannt_start'   / '2016-01-04 10:00:00', '2016-01-05 10:30:00', '2016-01-06 10:50:00', '2016-01-07 14:00:00', '2016-01-08 14:45:00', '2016-01-09 19:00:00' /
   end      'gannt_end'     / '2016-01-05 10:00:00', '2016-01-06 10:30:00', '2016-01-07 10:50:00', '2016-01-08 14:00:00', '2016-01-09 14:45:00', '2016-01-10 19:00:00' /
   content  'gannt_content' / test1, test2, test3, test4, test5, test6 /
   group    'gantt_group'   / a, b /
   ;

$onExternalOutput
Parameter gantt(id, start, end, content, group) 'Gantt chart parameter' ;
$offExternalOutput

gantt('1', '2016-01-04 10:00:00', '2016-01-05 10:00:00', 'test1', 'a') = 1;
gantt('2', '2016-01-05 10:30:00', '2016-01-06 10:30:00', 'test2', 'a') = 1;
gantt('3', '2016-01-06 10:50:00', '2016-01-07 10:50:00', 'test3', 'a') = 1;
gantt('4', '2016-01-07 14:00:00', '2016-01-08 14:00:00', 'test4', 'b') = 1;
gantt('5', '2016-01-08 14:45:00', '2016-01-09 14:45:00', 'test5', 'b') = 1;
gantt('6', '2016-01-09 19:00:00', '2016-01-10 19:00:00', 'test6', 'b') = 1;

In a resulting GDX this parameter looks as follows:

Gantt chart data

In the Configuration Mode we can then configure a Gantt chart.

Gantt chart configuration

More information on the tool we use for Gantt charts can be found here.

JSON example


{
  "dataRendering": {
    "gantt": {
      "outType": "graph",
      "graph": {
        "title": "",
        "tool": "timevis",
        "showZoom": true,
        "fit": true,
        "zoomFactor": 0.5,
        "series": {
          "1": {
            "content": "content",
            "start": "start",
            "type": "range",
            "end": "end",
            "title": "content",
            "group": "group",
            "groupTitle": "group"
          }
        },
        "editable": false,
        "multiselect": false,
        "showCurrentTime": false
      },
      "height": 700
    }
  }
}
                                    

Value box

Configuration

Example: Model Pickstock, scalars error_train, error_test and error_ratio

Value boxes are special in the sense that only scalar output values can be displayed as such. The other way around, scalar output values can only be visualized as value boxes in addition to the classic table.

The three scalars to plot represent the absolute error in the entire training phase, the absolute error in the entire testing phase and the ratio between both values.
The scalar error_train is equivalent to the objective function value obj.l. The absolute error in entire testing phase error_test is the sum of all errors in this time: sum(ntd, error(ntd)). The ratio of both values is calculated with error_ratio = error_test/error_train;.

$onExternalOutput
Scalar error_train                     'Absolute error in entire training phase'
       error_test                      'Absolute error in entire testing phase'
       error_ratio                     'Ratio between error test and error train';
$offExternalOutput

error_train                            = obj.l;
error_test                             = sum(ntd, error(ntd));
if(error_train > 0,
   error_ratio = error_test/error_train;
else
   error_ratio = inf;);


In the Configuration Mode we can configure this by selecting the symbol Output Scalars:

Valuebox configuration

Inside a Value box an icon can be displayed next to the scalar value. Icons from the libraries fonts-awesome and glyphicons are available here.

JSON example


{
  "dataRendering": {
    "scalars_out": {
      "outType": "valueBox",
      "options": {
        "color": "aqua",
        "width": 4
      }
    }
  }
}
                                    

Custom renderer

Configuration

Section Custom graphics gives examples and explains in detail how to deal with custom renderers in general.

The Configuration Mode can be used to assist with the basic configuration for using custom graphics. If a symbol is selected for the use of a custom renderer in Configuration Mode, the following screen appears:

Custom graph configuration

The Configuration Mode gives two kinds of assistance with the custom renderer: First, the basic configuration is stored in the JSON file, where all other things are stored as well. This includes the name of the function, which defines the renderer, additional - meaning not yet in MIRO included - R packages, which are necessary to use it as well as additional datasets you want to communicate with your custom renderer. Note that additional datasets are only available when you configure a custom renderer for an output symbol! The resulting JSON snippet looks like this:


{
   "dataRendering":{
      "schedule": {
         "outType": "transportMap",
         "packages": "leaflet",
         "additionalData": ["ilocdata", "jlocdata"]
    }
   }
}
                                    

Additional datasets allow you to use multiple GAMS symbols in the same renderer function. In this example, the latitude/longitude data of plants and markets are communicated with the renderer alongside the schedule data.

Furthermore, you can add options to this snippet, for example a title or other specifications. These can then be accessed from the custom renderer function.


{
   "dataRendering":{
      "schedule": {
         "outType": "transportMap",
         "packages": "leaflet",
         "additionalData": ["ilocdata", "jlocdata"],
         "options":{
            "title":"Optimal transportation schedule"
         }
      }
   }
}
                                    

The second assistance is that the basic framework for the R code is supplied on the right side of the screen. It also explains in detail what to do with the code snippet:

Steps:

  1. Create a directory renderer_transport in your model directory with a file transport_custom.R in it.
  2. Copy the above code and paste it into the transport_custom.R file.
  3. Write your own custom renderer! For a detailed description of how to write such a custom renderer, see here.

The next time the application is started, MIRO looks for a custom renderer function in the file transport_custom.R. If this is not found, the application does not start! Make sure that you have included the custom renderer function correctly. It is always a good idea to first develop a custom renderer isolated from MIRO and - as soon as you are satisfied with the result - to integrate it into the MIRO application.

Tip:

If your application doesn't start because of the reason mentioned above, you can always delete the configured renderer using the Configuration Mode.

Options

As already mentioned, not all the options available for the different graphs are explained here. Nevertheless, some options are given as examples, especially those that are applicable to several graphic types.

Group domain

With some graphic types, a symbol dimension can be internally pivoted. This makes the graphic independent of the data.

In the model Pickstock there is the parameter Price, which contains all stock symbols of the Dow Jones index with their daily prices for a period of one year:

Set       date                 'date'
        symbol               'stock symbol';
$onExternalInput
Parameter price(date<,symbol<) 'Price';
$offExternalInput

Price is not declared as a table but as a normal parameter. For MIRO, this means that the data is available in list format with the headers date and symbol. The individual stocks are listed in the rows:

Parameter Price

We want to configure a line chart in which the price trend of each stock symbol is plotted separately. Now MIRO needs the price information of each symbol for each date. The problem is that MIRO only knows about one value column: Price. Hence, we cannot distinguish between the prices of individual stocks. In the resulting line chart a single line is plotted which contains all prices of all stock symbols:

Line chart configuration without Table statement

In the section Filters & Domains we can can select a domain we want to pivot internally. If we select the domain stock symbol here, the tool plots a line for each individual stock symbol:

Line chart configuration without Table statement

With this option, the chart configuration is completely independent of the data. We could even import data from another stock index - say the French CAC40 - and plot these accordingly.

The internal pivoting is available for the chart types Bar chart, Scatter plot, Line chart, Bubble chart, Histogram and Time series diagram.

Please also see the chapter about tables in MIRO to understand the difference between the MIRO-internal pivoting done here and the GAMS Table statement.

Filter graph

One dimension of a symbol visualized as a graphic can be configured as a filter dimension. Its elements can then be selected via a (multi-)drop-down menu. Only the data belonging to this selection is displayed in the graphic.

Example: Model Pickstock, parameter price

The Parameter price has the dimensions date and symbol: Parameter price(date,symbol) 'Price';. With the previous option Group domain we made sure that each stock is displayed as a separate line (and the graphic is therefore independent of the data). Now we can activate the checkbox Should one domain of the symbol be selectable via a dropdown menu? in the same category Filters & Domains and select the dimension stocks as filter dimension. In the result a (multi-) dropdown menu appears above the chart, in which we can select the individual stocks. Only those stocks are displayed which are selected in the filter.

Filter graph by domain
Tip:

If your filter dimension contains data in date format (e.g. 2020-05-06), you will see a date range selector instead of a multi-dropdown menu for selection.

Show graphic and data table in split screen

If you have configured a graphical representation of your data, you can always switch between plot and data table by clicking on the Switch to tabular view button button in the upper right corner:

Table and chart separated

With the option Show graphic and data table in split screen in the section General in Configuration Mode, both data representations can be displayed next to each other:

Table and chart in split screen
Animation

Chart data can be animated in order to show how the data changes over time. Example: We want to animate a chart that shows the individual stocks of the Dow Jones index over time. The Y axis shows the price of a stock, the X axis shows the date. Now we want to display all stocks one after the other with an animation. For this we select in the category Y axix the dimension, which should be used in the animation for the single frames. Since we want to show all stock symbols one after the other, we choose stock symbol:

Data dimension to animate

After the selection the animation is rendered and a slider with play button appears under the graphic.
Note: The animation of graphics can require a lot of computing power. It is therefore possible that it takes a little time until the preview graphics are rendered. This is especially true if you select a dimension for animation that consists of many individual values.

Under Animation we can further customize the animation, for example by setting the number of frames per second or the type of transition between two frame transitions.

Animation customization
Tip:

When using animations, it is often useful to define the visible areas for both axes in the corresponding axis categories. Otherwise it can happen that areas are pre-selected in which no data is visible.