node package manager
Don’t reinvent the wheel. Reuse code within your team. Create a free org »

mozaik-ext-multijson

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.

json

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)