Mozaïk multi-JSON widget

This widget display data from multiple JSON sources (up to three) in your Mozaik dashboard. These JSON sources may be either static hosted files or JSON objects fetched from REST API's.

Installation

To install mozaik-ext-multijson from npm, run:

npm install --save mozaik-ext-multijson

Configuration

Static hosted file

Let's say you want to display two set of data from files you host on your Dropbox public directory.

JSON file

In your Mozaik dashboard's config.js file, add the following section:

  {
      type:  'json.multidata',
      title: 'DEPLOYED APPLICATIONS',
      sources: [
        {
          url: 'https://dl.dropboxusercontent.com/u/11555789/f1.json',
          label: '${label}',
          data: '${data}',
          time:  '${time}'
        },
        {
          url: 'https://dl.dropboxusercontent.com/u/11555789/f2.json',
          label: '${label}',
          data: '${data}',
          time:  '${time}'
        },
        {
          url: 'https://dl.dropboxusercontent.com/u/11555789/f3.json',
          label: '${label}',
          data: '${data}',
          time:  '${time}'
        }
      ],
      columns: 1, rows: 1,
      x: 1, y: 1
  }

JSON data fetched from REST API

In your Mozaik dashboard's config.js file, add the webservice url in the api section. The url key shall contains the full URL where your webservice is hosted. An optionnal headers key can be added (to add authentication information for example):

  {
      type:  'json.multidata',
      title: 'DEPLOYED APPLICATIONS',
      sources: [
        {
          url: 'http://mywebservice/rest/api/2/resource/id1',
          headers: [{name: 'Authorization', value: 'Basic aKjs6LK8ijkSfT'}, {name: 'Content-type', value: 'application/json'}],
          label: '${label}',
          data: '${data}',
          time:  '${time}'
        },
        {
          url: 'http://mywebservice/rest/api/2/resource/id2',
          headers: [{name: 'Authorization', value: 'Basic aKjs6LK8ijkSfT'}, {name: 'Content-type', value: 'application/json'}],
          label: '${label}',
          data: '${data}',
          time:  '${time}'
        },
        {
          url: 'http://mywebservice/rest/api/2/resource/id3',
          headers: [{name: 'Authorization', value: 'Basic aKjs6LK8ijkSfT'}, {name: 'Content-type', value: 'application/json'}],
          label: '${label}',
          data: '${data}',
          time:  '${time}'
        }
      ],
      columns: 1, rows: 1,
      x: 1, y: 1
  }

parameters

title, value and unit parameters can be either a String or a property path to be retrieve in the JSON data.

key | required | description ------------------|----------|------------------------------------------------------------------- type | yes | Always equal to 'json.multidata' (String) title | yes | The title to be displayed in the header (String) sources | yes | The list of the sources to be displayed (Array) sources.url | yes | The url of the x.th source (URL) sources.headers | no | Headers to be used to fetch the source (Array) sources.label | yes | Label of the row (String) sources.data | yes | Data to be displayed (String) sources.time | no | Date information (String)