wiki:docs_plot2d

plot2d field info

  • alternative Bokeh ploting
  • 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/
  • 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
  • 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

plot2d genapp data interp

  • 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]

adding errorbars

  • 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

errorbar plot example

  • 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 ]
    
    

example plottest output json

    "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]
            ]
        }]
    }

Last modified 9 days ago Last modified on Feb 17, 2018, 5:18:56 AM

Attachments (2)

Download all attachments as: .zip