Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 400,000 packages pre-installed, including mozaik-ext-multijson with all npm packages installed. Try it out:

var mozaikExtMultijson = require("mozaik-ext-multijson")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

mozaik-ext-multijson v0.0.14

Mozaïk multi source json extension

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.

keyrequireddescription
typeyesAlways equal to 'json.multidata' (String)
titleyesThe title to be displayed in the header (String)
sourcesyesThe list of the sources to be displayed (Array)
sources.urlyesThe url of the x.th source (URL)
sources.headersnoHeaders to be used to fetch the source (Array)
sources.labelyesLabel of the row (String)
sources.datayesData to be displayed (String)
sources.timenoDate information (String)
RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free