Subscription examples with bajascript

Whilst Velocity is a very convenient means to inject data into an html document, one of many benefits of using bajascript in your application is support for subscriptions, which update the graphic as data change.

Of course, you could build this schema output in bajascript by executing queries or by directly subscribing to the components required, but a jsonSchema may reduce some of the work needed in JavaScript, allowing subscription only to the output slot, which can fetch the required data from the station.

Example html file for showing Chart.js

<!DOCTYPE html
<!-- @noSnoop --
<html
<head
  <titleHTML Page</title>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js">
  </script>

  <script type='text/javascript' src='/requirejs/config.js'></script>
  <script type='text/javascript' src='/module/js/com/tridium/js/ext/require/require.min
  .js?'></script>

  <!-- note the special syntax for downloading JS file from the 'bajascript' folder 
  you add in your station --> 
  <script type='text/javascript' src='/ord/file:%5Ebajascript/basic.js%7Cview:web
  :FileDownloadView'></script>

</head>
<body>

  <canvas class="my-4 w-100" id="myChart" width="800" height="450"></canvas>

</body>
</html>

Example basic.js file to fetch chart data

The data array in the payload below uses bound properties. A single-column query would allow historical data to be used instead from a bql query on the history database.

// Subscribe to a Ramp. When it changes, print out the results.
require(['baja!'], function (baja) {
    "use strict"

    // A Subscriber is used to listen to Component events in Niagara.
    var sub = new baja.Subscriber()

    var update = function () {

      // Graphs
      var ctx = $('#myChart')

      var newJson = JSON.parse(this.getOutput())

      var myChart = new Chart(ctx, newJson)
    }

    // Attach this function to listen for changed events.
    sub.attach('changed', update)

    // Resolve the ORD to the Ramp and update the text.
    baja.Ord.make('station:|slot:/ChartsJS/JsonSchema').get({ok: update, subscriber: sub})
    })

Example schema output for chart

{
  "type": "line",
  "data": {
    "labels": [
      "Sunday",
      "Monday",
      "Tuesday",
      "Wednesday",
      "Thursday"
    ],
    "datasets": [
      {
        "data": [
          202,
          240,
          202,
          3,
          150
        ],
        "backgroundColor": "transparent",
        "borderColor": "#007bff",
        "borderWidth": 3,
        "lineTension": 0
      },
      {
        "data": [
          3,
          202,
          150,
          202,
          240
        ],
        "backgroundColor": "transparent",
        "borderColor": "#ff0033",
        "borderWidth": 3,
        "lineTension": 0
      }
    ]
  },
  "options": {
    "scales": {
      "yAxes": [
        {
          "ticks": {
            "beginAtZero": false
          }
        }
      ]
    },
    "legend": {
      "display": false
    },
    "title": {
      "display": true,
      "text": "Philips Hue Light Demo"
    },
    "tooltips": {
      "intersect": true,
      "mode": "index"
    },
    "hover": {
      "intersect": true,
      "mode": "nearest"
    }
  }
}