-
Notifications
You must be signed in to change notification settings - Fork 0
Reference Plotly
madscatt edited this page Jun 21, 2026
·
3 revisions
-
requires genappalpha revision 1469
-
the output type "plotly" should support the full range of plotly plots
-
Plotly can also be used as a bounded dynamic output group when the number of plots is known only at runtime; see Dynamic Outputs
- in your module json fields, add an output type:plotly
,"fields" : [
...
{
"role" : "output",
"id" : "myplotid",
"label" : "plotly plot",
"type" : "plotly"
}
...
]
- In your module's executable, return a plotly object in your output JSON for the field id.
- the JSON required in the output field is Plotly JSON
- e.g. for a simple bar chart, set your output JSON myplotid :
{
"data": [
{
"x": [
"giraffes",
"orangutans",
"monkeys"
],
"y": [
20,
14,
23
],
"type": "bar"
}
]
}
- or for a line plot
{
"data" : [
{
"x": [1, 2, 3, 4],
"y": [10, 15, 13, 17],
"mode": "markers",
"marker": {
"color": "rgb(219, 64, 82)",
"size": 12
}
},
{
"x" : [2, 3, 4, 5],
"y" : [16, 5, 11, 9],
"mode" : "lines",
"line" : {
"color" : "rgb(55, 128, 191)",
"width": 3
}
},
{
"x" : [1, 2, 3, 4],
"y" : [12, 9, 15, 12],
"mode" : "lines+markers",
"marker" : {
"color" : "rgb(128, 0, 128)",
"size": 8
},
"line" : {
"color" : "rgb(128, 0, 128)",
"width" : 1
}
}
],
"layout" : {
"title" : "Line and Scatter Styling"
}
}
- or something fancier
{
"data": [
{
"name": "Col2",
"uid": "babced",
"fillcolor": "rgb(224, 102, 102)",
"y": [
"17087182",
"29354370",
"38760373",
"40912332",
"51611646",
"64780617",
"85507314",
"121892559",
"172338726",
"238027855",
"206956723",
"346004403",
"697089489",
"672985183",
"968882453",
"863105652",
"1068513050"
],
"x": [
"2000-01-01",
"2001-01-01",
"2002-01-01",
"2003-01-01",
"2004-01-01",
"2005-01-01",
"2006-01-01",
"2007-01-01",
"2008-01-01",
"2009-01-01",
"2010-01-01",
"2011-01-01",
"2012-01-01",
"2013-01-01",
"2014-01-01",
"2015-01-01",
"2016-01-01"
],
"fill": "tonexty",
"type": "scatter",
"mode": "none"
}
],
"layout": {
"autosize": false,
"title": "Total Number of Websites",
"yaxis": {
"range": [
0,
1124750578.9473684
],
"type": "linear",
"autorange": true,
"title": ""
},
"height": 500,
"width": 800,
"xaxis": {
"tickformat": "%Y",
"title": "livestats",
"showgrid": false,
"range": [
946702800000,
1451624400000
],
"type": "date",
"autorange": true
}
}
}
- a side-by-side plot
{
"data" : [
{
"x": [1, 2, 3],
"y": [4, 5, 6],
"type": "scatter"
},
{
"x": [20, 30, 40],
"y": [50, 60, 70],
"xaxis": "x2",
"yaxis": "y2",
"type": "scatter"
}
],
"layout" : {
"xaxis": {
"domain": [0, 0.45]
},
"yaxis2": {
"anchor": "x2"
},
"xaxis2": {
"domain": [0.55, 1]
}
}
}
- further examples of plotly charts can be found at the Plotly javascript reference, but note in the javascript examples, they are mostly broken up in to variables (var trace1 = ...) whereas for Plotly JSON, you need to encapsulate as a single object.
- full reference is here https://plotly.com/javascript/reference/
- layout : height & width might be useful if you do not want to take up the whole width
- responsive resizing is not implemented, but can be added upon request
- given the module/plotlytest.json containing
{
"moduleid" : "plotlytest"
,"label" : "Plotly Test"
,"help" : "help for Plotly"
,"executable" : "plotlytest"
,"fields" : [
{
"role" : "output"
,"id" : "barchart"
,"label" : "Example Barchart"
,"type" : "plotly"
}
,{
"role" : "output"
,"id" : "lineplot"
,"label" : "Example lineplot"
,"type" : "plotly"
}
]
}
- and a menu.json with
...
"modules" : [
...
,{
"id" : "plotlytest"
,"label" : "Plotly Test"
}
...
- and a bin/plotlytest containing
- N.B. make sure bin/plotlytest is set executable (chmod +x bin/plotlytest)
#!/usr/bin/python
import json, sys, StringIO
if __name__=='__main__':
# get JSON input object / not used in this example
argv_io_string = StringIO.StringIO(sys.argv[1])
json_variables = json.load(argv_io_string)
# setup basic output object
output = {}
# define a barchart
barchart = {
"data": [
{
"x": [
"giraffes",
"orangutans",
"monkeys"
],
"y": [
20,
14,
23
],
"type": "bar"
}
]
}
# define a line plot
lineplot = {
"data" : [
{
"x": [1, 2, 3, 4],
"y": [10, 15, 13, 17],
"mode": "markers",
"marker": {
"color": "rgb(219, 64, 82)",
"size": 12
}
},
{
"x" : [2, 3, 4, 5],
"y" : [16, 5, 11, 9],
"mode" : "lines",
"line" : {
"color" : "rgb(55, 128, 191)",
"width": 3
}
},
{
"x" : [1, 2, 3, 4],
"y" : [12, 9, 15, 12],
"mode" : "lines+markers",
"marker" : {
"color" : "rgb(128, 0, 128)",
"size": 8
},
"line" : {
"color" : "rgb(128, 0, 128)",
"width" : 1
}
}
],
"layout" : {
"title" : "Line and Scatter Styling"
}
}
# you can also work with these dicts directly
lineplot['data'][0]['y'] = [20, 10, 15, 23]
# a combination of using the json format as above and then setting the variable values afterwards
# (e.g. during computation) is a reasonable pattern to use
# populate output object
output['barchart'] = barchart;
output['lineplot'] = lineplot;
# output the final json object
# N.B. make sure you do not output anything else to standard output (i.e. via print or other)
# that will be attempted to be read as JSON and you will get an error
print(json.dumps(output))
- this method utilized the genapp.py module for messaging
- module definitions as above for the python example
#!/usr/bin/python
import json, sys, time
try:
from StringIO import StringIO ## for Python 2
except ImportError:
from io import StringIO ## for Python 3
import time
if ( sys.version_info[0] == 2 ):
from genapp import genapp ## python2
else:
from genapp3 import genapp ## python3
if __name__=='__main__':
argv_io_string = StringIO(sys.argv[1])
json_variables = json.load(argv_io_string)
### initialize the genapp object
ga = genapp( json_variables )
output = {}
output['plotbar'] = {
"data": [
{
"x": [
"giraffes",
"orangutans",
"monkeys"
],
"y": [
20,
14,
23
],
"type": "bar"
}
]
}
output['plotline'] = {
"data" : [
{
"x": [1, 2, 3, 4],
"y": [10, 15, 13, 17],
"mode": "markers",
"marker": {
"color": "rgb(219, 64, 82)",
"size": 12
}
},
{
"x" : [2, 3, 4, 5],
"y" : [16, 5, 11, 9],
"mode" : "lines",
"line" : {
"color" : "rgb(55, 128, 191)",
"width": 3
}
},
{
"x" : [1, 2, 3, 4],
"y" : [12, 9, 15, 12],
"mode" : "lines+markers",
"marker" : {
"color" : "rgb(128, 0, 128)",
"size": 8
},
"line" : {
"color" : "rgb(128, 0, 128)",
"width" : 1
}
}
],
"layout" : {
"title" : "Line and Scatter Styling"
}
}
# send both plots to the UI via tcpmessage
ga.tcpmessage( output )
time.sleep(5)
# add a plot point to 'plotbar'
output['plotbar']['data'][0]['x'].append( "llamas" )
output['plotbar']['data'][0]['y'].append( "17" )
# update the UI via tcpmessage
ga.tcpmessage( { "plotbar" : output['plotbar'] } )
time.sleep(5)
# add another plot point to 'plotbar'
output['plotbar']['data'][0]['x'].append( "alpacas" )
output['plotbar']['data'][0]['y'].append( "22" )
# change values for the 2nd data trace (index 1) of 'plotline'
output['plotline']['data'][1]['y'] = [ 9, 7, 3, 6 ];
# update both plots in a single tcpmessage
ga.tcpmessage( { "plotbar" : output['plotbar'], "plotline" : output['plotline'] } )
time.sleep(5)
# change values for the 2nd data trace of plotline again for the final output
output['plotline']['data'][1]['y'] = [ 17, 6, 12, 5 ];
# optional debugging output to the textarea
output['_textarea'] = "JSON output from executable:\n" + json.dumps( output, indent=4 ) + "\n\n";
output['_textarea'] += "JSON input to executable:\n" + json.dumps( json_variables, indent=4 ) + "\n";
# output final object to the UI
print(json.dumps(output))