Code Monkey home page Code Monkey logo

freeboard-jqplot-widget's Introduction

freeboard-jqplot-widget

A starter template for building freeboard widgets using the jqplot plugin.

This gives you a nice development workflow by allowing you to implement your widget using files (data.js, chart-options.js, chart-settings.json), saving your files, and then refreshing your browser to immediately see your changes (assuming you have script to have freeboard load your dashboard.json) or you can manually re-load your dashboard.

Includes predefined npm scripts for updating freeboard dashboard.json (using freeboard-jqplot-buildtool) when files are saved.

setup

$ git clone https://github.com/jritsema/freeboard-jqplot-widget mywidget
$ cd mywidget
$ npm install

usage

Edit the "build" script command in package.json to point to the dashboard.json file you want updated.

"build": "cat ../freeboard/dashboard.json | freeboard-jqplot-buildtool > temp && cp temp ../freeboard/dashboard.json && rm temp",

Note that the target widget defined in dashboard.json needs to have a "title" property that matches the "name" property in package.json. For example, if you update the name in package.json to "mywidget", then your dashboard.json needs to look like the following.

...
"widgets": [
  {
    "title": "mywidget",
    "type": "jqplotWidget",
    "settings": {
      "height": 3,
      "data": "",
      "options": "",
      "chartHeight": 300,
      "chartWidth": 600
    }
  }
]
...

Now you're ready to edit your source files (data.js, chart-options.js, chart-settings.json) and then...

$ npm run build or $ npm run watch

...and this will update your dashboard.json with the resulting data, options, settings properties.

freeboard-jqplot-widget's People

Contributors

jritsema avatar

Stargazers

 avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.