Archive Trac docs plot2d
Legacy Trac archive page imported from
docs_plot2d. Source: https://genapp.rocks/wiki/wiki/docs_plot2d. Active canonical page: Reference-2D-Plots. Review age, links, and examples before treating as current.
- full set of plot2d support tags for the module.json
{
"role" : "output",
"id" : "plotid",
"label" : "plot 2d",
"type" : "plot2d",
"titlefontclass" : "header3",
"height" : "500px",
"width" : "300px",
# enable pan
"pan" : "true",
# enable zoom
"zoom" : "true",
# enable box selection zoom [genappalpha rev 1105]
# n.b. if "selzoom" is selected, "pan" and "zoom" should not be set or strange behavior might result
"selzoom" : "true",
# set background color for plots [genappalpha rev 1105]
# colors can also be "rgb(255,255,255)" for "white" etc.
"backgroundcolor" : "white",
# savetofile enables saving flot generated image to a .png file
"savetofile" : "true",
# it's possible to change scale of the Y-axis back and forth, from Log to Lin, by specifying
"changescale" : "true",
# Text for Y-axis label can be set to be oriented vertically
"rotatedylabel" : "true",
# enable hovering to show coordinates
"hover" : "true",
# user can enable custom tooltips by placing tooltips data into 'tooltips' field of the .json output (see 'json output' below...)
"customtooltips": "true",
"help" : "drag to pan, double click to zoom, to reset zoom and pan: click on title, axis labels or live coordinates box"
}
- the directives.json entry controlling the precision of the numbers displayed when "hover":"true"
"plot2d" : {
"precision" : 4
},
- the 2d plot is currently utilized the jquery flot package http://www.flotcharts.org/
- In your module's executable, return a json object in your output JSON for the field id ("fieldname" below).
- the json output for a unlabeled line plot for multiple curves on a plot:
"fieldname" : [[[1,1],[2,3],...,[10,27]],[[...]]]
- it can also be more complicated
"fieldname" : [
{
"points" : { "show" : "true" },
"label" : "my legend title for curve 1",
"data" : [[1,1],[2,3],...,[10,27]],
"tooltips" : ["tooltip1", "tooltip2", ....] # this field specifies custom tooltips for certain data points
},
{
"lines" : { "show" : "true" },
"label" : "my legend title for curve 2",
"data" : [[...]]
}
]
-
for full details https://github.com/flot/flot/blob/master/API.md#data-format
-
[=#additional_controls we have extended the structure to provide additional controls] (currently for HTML5/PHP only)
"fieldname" : {
"options" : {
"title" : "optional title",
"xlabel" : "x-axis label",
"ylabel" : "y-axis label",
"xscale" : "log",
"yscale" : "log",
# explicitly specify xmin and/or xmay and/or ymin and/or ymax overriding the autoscaling
"xmin" : 0,
"xmax" : 0.5,
"ymin" : 1e-5,
"ymax" : 1.5e-2,
# specify number of tics
"xtics" : 50
# or an array of tic values
# "xtics" : [1,2,5,10],
# or an array of tic values and their display names
# "xtics" : [[1,"one"],[2,"two"],...,[10,"ten"]],
# same for ytics
# legend gives some control legend placement
"legend": {
# "position" can be "ne" or "nw" or "se" or "sw"
"position" : "ne"
# add a margin by number of pixels
,"margin" : 5
# "backgroundOpacity" is a number between 0 and 1
,"backgroundOpacity" : 0.7
# "container" puts the legend to the right of the plot
,"container" : "true"
# "sorted" orders the legend entries can be "ascending" or "descending"
,"sorted" : "ascending"
}
},
"data" : [
{
"points" : { "show" : "true" },
"label" : "my legend title for curve 1",
"data" : [[1,1],[2,3],...,[10,27]]
},
# for x
{
"lines" : { "show" : "true" },
"label" : "my legend title for curve 2",
"data" : [[...]]
}
]
}
- example in genapptest data_interpolation
- note that the plot data has to go over the "wire", so limiting the number of significant digits can speed up the user experience
- e.g. instead of [1.000000001,3.1415926535] maybe [1,3.14159]
- to add y error bars, change the data entry
# for y errorbars with 10% y value error that are symmetric you can use this instead of the above block
{
"points" : {
"show" : "true",
# set radius:0 if you don't want to show the points themselves
"radius" : 0,
# errorbars can be "x", "y" or "xy"
"errorbars" : "y",
# specify yerr properties (similarly, "xerr" can be specified
"yerr" : {
# optionally provide a lowerCap and upperCap, only "-" is currently supported.
"lowerCap" : "-",
"upperCap" : "-",
# required to show the errorbars
"show" : "true",
# optionally set the color
"color" : "red",
# set the size
"radius" : 5
}
}
"label" : "my legend title for curve 1",
"data" : [[1,1,0.1],[2,3,0.3],...,[10,27,2.7]]
},
# for non-symmetric error bars, you need to specify both, so each data point will become 4 values, e.g. [[1,1,lowerYerror,upperYerror], ... ]
-
flot examples for errorbars
- note: we don't currently support other than the "-" caps, but can if you would like, please get in touch
- simple example with one curve with errorbars
- here some specifications pulled from the plugin source:
Copyright (c) 2007-2014 IOLA and Ole Laursen.
Licensed under the MIT license.
Error bars are used to show standard deviation and other statistical
properties in a plot.
Created by Rui Pereira - rui (dot) pereira (at) gmail (dot) com
points: {
errorbars: "x" or "y" or "xy",
xerr: {
show: null/false or true,
asymmetric: null/false or true,
upperCap: null or "-",
lowerCap: null or "-",
color: null or color,
radius: null or number
},
yerr: { same options as xerr }
}
Each data point array is expected to be of the type:
"x" [ x, y, xerr ]
"y" [ x, y, yerr ]
"xy" [ x, y, xerr, yerr ]
Where xerr becomes xerr_lower,xerr_upper for the asymmetric error case, and
equivalently for yerr. Eg., a datapoint for the "xy" case with symmetric
error-bars on X and asymmetric on Y would be:
[ x, y, xerr, yerr_lower, yerr_upper ]
"fieldname": {
"options": {
"xscale": "log",
"yscale": "log"
},
"data": [{
"lines": {
"show": "true"
},
"label": "plot0",
"data": [
[1.000, 2.718],
[1.500, 4.482],
[2.000, 7.389],
[2.500, 12.182],
[3.000, 20.086],
[3.500, 33.115],
[4.000, 54.598],
[4.500, 90.017],
[5.000, 148.413],
[5.500, 244.692],
[6.000, 403.429],
[6.500, 665.142],
[7.000, 1096.633],
[7.500, 1808.042],
[8.000, 2980.958],
[8.500, 4914.769],
[9.000, 8103.084],
[9.500, 13359.727],
[10.000, 22026.466]
]
}, {
"points": {
"show": "true"
},
"label": "plot1",
"data": [
[1.000, 2.320],
[1.500, 4.465],
[2.000, 6.163],
[2.500, 4.465],
[3.000, 1.527],
[3.500, 3.414],
[4.000, 20.640],
[4.500, 81.360],
[5.000, 120.859],
[5.500, 48.447],
[6.000, 5.347],
[6.500, 4.048],
[7.000, 99.376],
[7.500, 1135.695],
[8.000, 2737.680],
[8.500, 886.375],
[9.000, 40.816],
[9.500, 2.042],
[10.000, 230.491]
]
}]
}