Sample READ Application for Streams developers getting started with READ: https://github.com/IBMStreams/streamsx.visualization

gistfile1.txt

{
  "version": "0.7.0",
  "app": {
    "_id": "Q4EnorTFxvG9gyHyB",
    "userId": "guest",
    "name": "Time Series",
    "private": true,
    "selectedDashboardId": "7kGXWA8K4yM55PCji"
  },
  "dashboards": [
    {
      "_id": "7kGXWA8K4yM55PCji",
      "userId": "guest",
      "appId": "Q4EnorTFxvG9gyHyB",
      "name": "Sine and Cos",
      "selectedDataSetId": "QWvddJfeSQguPZA62"
    }
  ],
  "dataSets": [
    {
      "_id": "4B6qZLiEkSiXnHXqu",
      "userId": "guest",
      "appId": "Q4EnorTFxvG9gyHyB",
      "dashboardId": "7kGXWA8K4yM55PCji",
      "dataSetType": "simpleHTTP",
      "name": "Time_HTTPView",
      "url": "http://192.168.147.130:8080/currentTime/ports/input/0/tuples",
      "poll": {
        "enabled": true,
        "intervalMilliSec": 1000
      }
    },
    {
      "_id": "5jGmc6gN3PLiD7GBo",
      "userId": "guest",
      "appId": "Q4EnorTFxvG9gyHyB",
      "dashboardId": "7kGXWA8K4yM55PCji",
      "dataSetType": "transformed",
      "name": "Stateful_HTTPView",
      "parents": [
        "4B6qZLiEkSiXnHXqu"
      ],
      "transformFunction": "(x, s) => {                                // x is the parent dataset, and s contains the current state\n    if (s.length === 30) s.splice(0, 1)    // If s already has 30 items, delete the first item\n    s.push(x[0]);                          // Push the latest data point into the state array\n    return s;                              // Return the state\n}",
      "stateParams": {
        "enabled": true,
        "state": "[]"
      },
      "selectedVisualizationId": "JRP8GczpGh6tE6e8t"
    },
    {
      "_id": "ffWGE6q3CTE3BgzR2",
      "userId": "guest",
      "appId": "Q4EnorTFxvG9gyHyB",
      "dashboardId": "7kGXWA8K4yM55PCji",
      "dataSetType": "websocket",
      "name": "Time_WebSocket",
      "url": "ws://192.168.147.130:8081",
      "bufferSize": 20
    },
    {
      "_id": "TwfSXQpWjbfZzJRdZ",
      "userId": "guest",
      "appId": "Q4EnorTFxvG9gyHyB",
      "dashboardId": "7kGXWA8K4yM55PCji",
      "dataSetType": "transformed",
      "name": "Stateful_WebSocket",
      "parents": [
        "ffWGE6q3CTE3BgzR2"
      ],
      "transformFunction": "(x, s) => {\n    if (s.length === 200) s.splice(0, 1)\n    s.push(x.tuples[0].tuple);\n    return s;\n}",
      "stateParams": {
        "enabled": true,
        "state": "[]"
      },
      "selectedVisualizationId": "a6dKnmAkcKJnPkfH6"
    },
    {
      "_id": "AmuFHRCZFaQG6uZzA",
      "userId": "guest",
      "appId": "Q4EnorTFxvG9gyHyB",
      "dashboardId": "7kGXWA8K4yM55PCji",
      "dataSetType": "simpleHTTP",
      "name": "Time_View_Annot",
      "url": "http://localhost:9000/streams/waves",
      "poll": {
        "enabled": true,
        "intervalMilliSec": 1000
      }
    },
    {
      "_id": "QWvddJfeSQguPZA62",
      "userId": "guest",
      "appId": "Q4EnorTFxvG9gyHyB",
      "dashboardId": "7kGXWA8K4yM55PCji",
      "dataSetType": "transformed",
      "name": "Transform_View_Anno",
      "parents": [
        "AmuFHRCZFaQG6uZzA"
      ],
      "transformFunction": "x => _.pluck(x.viewItems, 'data')",
      "stateParams": {
        "enabled": false,
        "state": "{\n  initialValue: 17\n}"
      },
      "selectedVisualizationId": "YWkThmxuc8tHAEkN5"
    }
  ],
  "visualizations": [
    {
      "_id": "JRP8GczpGh6tE6e8t",
      "userId": "guest",
      "appId": "Q4EnorTFxvG9gyHyB",
      "dashboardId": "7kGXWA8K4yM55PCji",
      "name": "HTTPTupleView",
      "templateId": "zAnReEZadoCj5aobp",
      "pluginType": "NVD3",
      "dataSetId": "5jGmc6gN3PLiD7GBo",
      "gridStack": {
        "x": 0,
        "y": 8,
        "height": 4,
        "width": 12
      },
      "basicOptions": "{\n    \"xKey\": \"timeStamp\",\n    \"yKeys\": [{\n        \"key\": \"sine\",\n        \"type\": \"area\",\n        \"yAxis\": 1\n    }, {\n        \"key\": \"cos\",\n        \"type\": \"area\",\n        \"yAxis\": 2\n    }],\n}",
      "advancedOptions": "{\n    'chart': {\n        'type': 'multiChart',\n        'margin' : {\n            'top': 20,\n            'right': 40,\n            'bottom': 40,\n            'left': 55\n        },\n        'color': d3.scale.category10().range(),\n        'useInteractiveGuideline': true,\n        'duration': 500,\n        'xAxis': {\n            'axisLabel': 'Time (ms)',\n            'tickFormat': function(d){\n                return d3.format(',f')(d);\n            }\n        },\n        'yAxis1': {\n            'axisLabel': 'Value',\n            'tickFormat': function(d){\n                return d3.format('.02f')(d);\n            },\n            'axisLabelDistance': -10\n        },\n        'yAxis2': {\n            'tickFormat': function(d){\n                return d3.format('.02f')(d);\n            }\n        }\n    }\n}"
    },
    {
      "_id": "a6dKnmAkcKJnPkfH6",
      "userId": "guest",
      "appId": "Q4EnorTFxvG9gyHyB",
      "dashboardId": "7kGXWA8K4yM55PCji",
      "name": "WebSocket",
      "templateId": "GrjTHgAnhoWDy748u",
      "pluginType": "NVD3",
      "dataSetId": "TwfSXQpWjbfZzJRdZ",
      "gridStack": {
        "x": 0,
        "y": 0,
        "height": 4,
        "width": 12
      },
      "basicOptions": "{\n    \"xKey\": \"timeStamp\",\n    \"yKeys\": [\"sine\", \"cos\"]\n}",
      "advancedOptions": "{\n    'chart': {\n        'type': 'lineChart',\n        'margin': {\n            'top': 20, \n            'right': 40, \n            'bottom': 40,\n            'left': 55\n        },\n        'x': function(d){ return d.x; },\n        'y': function(d){ return d.y; },\n        'useInteractiveGuideline': true,\n        'xAxis': {\n            'axisLabel': 'Time (ms)',\n            'tickFormat': function(d){\n                return d3.format(',f')(d);\n            }\n        },\n        'yAxis': {\n            'axisLabel': 'Value',\n            'tickFormat': function(d) {\n                return d3.format('.02f')(d);\n            },\n            'axisLabelDistance': -10\n        },\n        'color': function (d, i) {\n            var myColors = ['#1f77b4', '#d62728'];\n            return myColors[i];\n        }\n    }\n}"
    },
    {
      "_id": "YWkThmxuc8tHAEkN5",
      "userId": "guest",
      "appId": "Q4EnorTFxvG9gyHyB",
      "dashboardId": "7kGXWA8K4yM55PCji",
      "name": "View Annotation",
      "templateId": "GrjTHgAnhoWDy748u",
      "pluginType": "NVD3",
      "dataSetId": "QWvddJfeSQguPZA62",
      "gridStack": {
        "x": 0,
        "y": 4,
        "height": 4,
        "width": 12
      },
      "basicOptions": "{\n    \"xKey\": \"timeStamp\",\n    \"yKeys\": [\"sine\", \"cos\"]\n}",
      "advancedOptions": "{\n    'chart': {\n        'type': 'lineChart',\n        'margin': {\n            'top': 20, \n            'right': 40, \n            'bottom': 40,\n            'left': 55\n        },\n        'x': function(d){ return d.x; },\n        'y': function(d){ return d.y; },\n        'useInteractiveGuideline': true,\n        'xAxis': {\n            'axisLabel': 'Time (ms)',\n            'tickFormat': function(d){\n                return d3.format(',f')(d);\n            }\n        },\n        'yAxis': {\n            'axisLabel': 'Value',\n            'tickFormat': function(d) {\n                return d3.format('.02f')(d);\n            },\n            'axisLabelDistance': -10\n        },\n        'color': function (d, i) {\n            var myColors = ['red', 'green'];\n            return myColors[i];\n        }\n    }\n}"
    }
  ]
}