wiki:docs_plotly

Version 4 (modified by ehb, 2 years ago) (diff)

--

plotting with plotly in html5 target language

  • requires genappalpha revision 1469
  • the output type "plotly" should support the full range of plotly plots
  • in your module json fields, add an output type:plotly
        ,"fields"   : [
    ...
            {
                "role"            : "output",
                "id"              : "myplotid",
                "label"           : "plotly plot",
                "type"            : "plotly"
            }
    ...
        ]
    
  • then 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
            }
        }
    }
    
  • 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.