Last active
          August 29, 2015 14:19 
        
      - 
      
- 
        Save forresto/77f213fb32c9b22527e2 to your computer and use it in GitHub Desktop. 
    noflo-canvas demo: line chart
  
        
  
    
      This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
      Learn more about bidirectional Unicode characters
    
  
  
    
  | { | |
| "properties": { | |
| "name": "noflo-canvas line chart", | |
| "id": "77f213fb32c9b22527e2", | |
| "environment": { | |
| "type": "noflo-browser", | |
| "content": "<canvas id=\"mycanvas\" width=\"200\" height=\"200\"></canvas>\n" | |
| }, | |
| "icon": "" | |
| }, | |
| "inports": {}, | |
| "outports": {}, | |
| "groups": [], | |
| "processes": { | |
| "canvas/Draw_ps7an": { | |
| "component": "canvas/Draw", | |
| "metadata": { | |
| "label": "canvas/Draw", | |
| "x": 612, | |
| "y": 252, | |
| "width": 72, | |
| "height": 72 | |
| } | |
| }, | |
| "canvas/Fill_cbdq5": { | |
| "component": "canvas/Fill", | |
| "metadata": { | |
| "label": "canvas/Fill", | |
| "x": 468, | |
| "y": 432, | |
| "width": 72, | |
| "height": 72 | |
| } | |
| }, | |
| "canvas/MakeRectangle_1rmr9": { | |
| "component": "canvas/MakeRectangle", | |
| "metadata": { | |
| "label": "canvas/MakeRectangle", | |
| "x": 324, | |
| "y": 432, | |
| "width": 72, | |
| "height": 72 | |
| } | |
| }, | |
| "dom/GetElement_an98u": { | |
| "component": "dom/GetElement", | |
| "metadata": { | |
| "label": "dom/GetElement", | |
| "x": 432, | |
| "y": 72, | |
| "width": 72, | |
| "height": 72 | |
| } | |
| }, | |
| "canvas/MakeRange_lb9hw": { | |
| "component": "canvas/MakeRange", | |
| "metadata": { | |
| "label": "canvas/MakeRange", | |
| "x": 0, | |
| "y": 288, | |
| "width": 72, | |
| "height": 72 | |
| } | |
| }, | |
| "canvas/Stroke_3m3hk": { | |
| "component": "canvas/Stroke", | |
| "metadata": { | |
| "label": "canvas/Stroke", | |
| "x": 432, | |
| "y": 216, | |
| "width": 72, | |
| "height": 72 | |
| } | |
| }, | |
| "strings/ParseJson_1yejs": { | |
| "component": "strings/ParseJson", | |
| "metadata": { | |
| "label": "strings/ParseJson", | |
| "x": 0, | |
| "y": 180, | |
| "width": 72, | |
| "height": 72 | |
| } | |
| }, | |
| "canvas/MakePoint_fkzuq": { | |
| "component": "canvas/MakePoint", | |
| "metadata": { | |
| "label": "canvas/MakePoint", | |
| "x": 144, | |
| "y": 216, | |
| "width": 72, | |
| "height": 72 | |
| } | |
| }, | |
| "canvas/MakeRange_i62n8": { | |
| "component": "canvas/MakeRange", | |
| "metadata": { | |
| "label": "canvas/MakeRange", | |
| "x": 0, | |
| "y": 432, | |
| "width": 72, | |
| "height": 72 | |
| } | |
| }, | |
| "canvas/MakePath_slkr2": { | |
| "component": "canvas/MakePath", | |
| "metadata": { | |
| "label": "canvas/MakePath", | |
| "x": 288, | |
| "y": 216, | |
| "width": 72, | |
| "height": 72 | |
| } | |
| }, | |
| "canvas/MakeGrid_ref0c": { | |
| "component": "canvas/MakeGrid", | |
| "metadata": { | |
| "label": "canvas/MakeGrid", | |
| "x": 144, | |
| "y": 432, | |
| "width": 72, | |
| "height": 72 | |
| } | |
| } | |
| }, | |
| "connections": [ | |
| { | |
| "src": { | |
| "process": "dom/GetElement_an98u", | |
| "port": "element" | |
| }, | |
| "tgt": { | |
| "process": "canvas/Draw_ps7an", | |
| "port": "canvas" | |
| }, | |
| "metadata": { | |
| "route": 2 | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "canvas/Fill_cbdq5", | |
| "port": "fill" | |
| }, | |
| "tgt": { | |
| "process": "canvas/Draw_ps7an", | |
| "port": "commands" | |
| }, | |
| "metadata": { | |
| "route": 9 | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "strings/ParseJson_1yejs", | |
| "port": "out" | |
| }, | |
| "tgt": { | |
| "process": "canvas/MakePoint_fkzuq", | |
| "port": "y" | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "canvas/MakeRange_lb9hw", | |
| "port": "range" | |
| }, | |
| "tgt": { | |
| "process": "canvas/MakePoint_fkzuq", | |
| "port": "x" | |
| }, | |
| "metadata": { | |
| "route": null | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "canvas/MakeRectangle_1rmr9", | |
| "port": "rectangle" | |
| }, | |
| "tgt": { | |
| "process": "canvas/Fill_cbdq5", | |
| "port": "items" | |
| }, | |
| "metadata": { | |
| "route": null | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "canvas/MakePath_slkr2", | |
| "port": "path" | |
| }, | |
| "tgt": { | |
| "process": "canvas/Stroke_3m3hk", | |
| "port": "items" | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "canvas/Stroke_3m3hk", | |
| "port": "stroke" | |
| }, | |
| "tgt": { | |
| "process": "canvas/Draw_ps7an", | |
| "port": "commands" | |
| }, | |
| "metadata": { | |
| "route": null | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "canvas/MakeRange_i62n8", | |
| "port": "range" | |
| }, | |
| "tgt": { | |
| "process": "canvas/MakeGrid_ref0c", | |
| "port": "x" | |
| }, | |
| "metadata": { | |
| "route": 0 | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "canvas/MakeRange_i62n8", | |
| "port": "range" | |
| }, | |
| "tgt": { | |
| "process": "canvas/MakeGrid_ref0c", | |
| "port": "y" | |
| }, | |
| "metadata": { | |
| "route": 0 | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "canvas/MakeGrid_ref0c", | |
| "port": "point" | |
| }, | |
| "tgt": { | |
| "process": "canvas/MakeRectangle_1rmr9", | |
| "port": "point" | |
| } | |
| }, | |
| { | |
| "src": { | |
| "process": "canvas/MakePoint_fkzuq", | |
| "port": "point" | |
| }, | |
| "tgt": { | |
| "process": "canvas/MakePath_slkr2", | |
| "port": "items" | |
| } | |
| }, | |
| { | |
| "data": "#mycanvas", | |
| "tgt": { | |
| "process": "dom/GetElement_an98u", | |
| "port": "selector" | |
| } | |
| }, | |
| { | |
| "data": 0, | |
| "tgt": { | |
| "process": "canvas/MakeRange_lb9hw", | |
| "port": "from" | |
| } | |
| }, | |
| { | |
| "data": 2, | |
| "tgt": { | |
| "process": "canvas/Stroke_3m3hk", | |
| "port": "linewidth" | |
| } | |
| }, | |
| { | |
| "data": true, | |
| "tgt": { | |
| "process": "canvas/Draw_ps7an", | |
| "port": "drawevery" | |
| } | |
| }, | |
| { | |
| "data": true, | |
| "tgt": { | |
| "process": "canvas/Draw_ps7an", | |
| "port": "clearevery" | |
| } | |
| }, | |
| { | |
| "data": 200, | |
| "tgt": { | |
| "process": "canvas/MakeRange_lb9hw", | |
| "port": "to" | |
| } | |
| }, | |
| { | |
| "data": "[0,10,100,105,106,88,85,10,0]", | |
| "tgt": { | |
| "process": "strings/ParseJson_1yejs", | |
| "port": "in" | |
| } | |
| }, | |
| { | |
| "data": 10, | |
| "tgt": { | |
| "process": "canvas/MakeRange_lb9hw", | |
| "port": "count" | |
| } | |
| }, | |
| { | |
| "data": "white", | |
| "tgt": { | |
| "process": "canvas/Fill_cbdq5", | |
| "port": "fillstyle" | |
| } | |
| }, | |
| { | |
| "data": 1, | |
| "tgt": { | |
| "process": "canvas/MakeRectangle_1rmr9", | |
| "port": "width" | |
| } | |
| }, | |
| { | |
| "data": 1, | |
| "tgt": { | |
| "process": "canvas/MakeRectangle_1rmr9", | |
| "port": "height" | |
| } | |
| }, | |
| { | |
| "data": 0, | |
| "tgt": { | |
| "process": "canvas/MakeRange_i62n8", | |
| "port": "from" | |
| } | |
| }, | |
| { | |
| "data": 200, | |
| "tgt": { | |
| "process": "canvas/MakeRange_i62n8", | |
| "port": "to" | |
| } | |
| }, | |
| { | |
| "data": 10, | |
| "tgt": { | |
| "process": "canvas/MakeRange_i62n8", | |
| "port": "count" | |
| } | |
| }, | |
| { | |
| "data": "white", | |
| "tgt": { | |
| "process": "canvas/Stroke_3m3hk", | |
| "port": "strokestyle" | |
| } | |
| } | |
| ] | |
| } | 
  
    Sign up for free
    to join this conversation on GitHub.
    Already have an account?
    Sign in to comment