A damn-sexy, open source real-time dashboard builder for IOT and other web mashups. A free open-source alternative to Geckoboard.

Overview

freeboard

free·board (noun) *\ˈfrē-ˌbȯrd*

  1. the distance between the waterline and the main deck or weather deck of a ship or between the level of the water and the upper edge of the side of a small boat.
  2. the act of freeing data from below the "waterline" and exposing it to the world.
  3. a damn-sexy, open source real-time dashboard builder/viewer for IOT and other web mashups.

Demo

http://freeboard.github.io/freeboard

https://freeboard.io

Screenshots

Weather

What is It?

Freeboard is a turn-key HTML-based "engine" for dashboards. Besides a nice looking layout engine, it provides a plugin architecture for creating datasources (which fetch data) and widgets (which display data)— freeboard then does all the work to connect the two together. Another feature of freeboard is its ability to run entirely in the browser as a single-page static web app without the need for a server. The feature makes it extremely attractive as a front-end for embedded devices which may have limited ability to serve complex and dynamic web pages.

The code here is the client-side portion of what you see when you visit a freeboard at http://freeboard.io. It does not include any of the server-side code for user management, saving to a database or public/private functionality— this is left up to you to implement should you want to use freeboard as an online service.

How to Use

Freeboard can be run entirely from a local hard drive. Simply download/clone the repository and open index.html. When using Chrome, you may run into issues with CORS when accessing JSON based APIs if you load from your local hard-drive— in this case you can switch to using JSONP or load index.html and run from a local or remote web server.

  1. git clone https://github.com/Freeboard/freeboard.git
  2. cd freeboard
  3. npm install
  4. grunt

Then run a index.html or index-dev.html through a webserver.

API

While freeboard runs as a stand-alone app out of the box, you can augment and control it from javascript with a simple API. All API calls are made on the freeboard singleton object.


freeboard.initialize(allowEdit, [callback])

Must be called first to initialize freeboard.

allowEdit (boolean) - Sets the initial state of freeboard to allow or disallow editing.

callback (function) - Function that will be called back when freeboard has finished initializing.


freeboard.newDashboard()

Clear the contents of the freeboard and initialize a new dashboard.


freeboard.serialize()

Serializes the current dashboard and returns a javascript object.


freeboard.loadDashboard(configuration, [callback])

Load the dashboard from a serialized dashboard object.

configuration (object) - A javascript object containing the configuration of a dashboard. Normally this will be an object that has been created and saved via the freeboard.serialize() function.

callback (function) - Function that will be called back when the dashboard has finished loading.


freeboard.setEditing(editing, animate)

Programatically control the editing state of the of dashboard.

editing (bool) - Set to true or false to modify the view-only or editing state of the board.

animate (function) - Set to true or false to animate the modification of the editing state. This animates the top-tab dropdown (the part where you can edit datasources and such).


freeboard.isEditing()

Returns boolean depending on whether the dashboard is in in the view-only or edit state.


freeboard.loadDatasourcePlugin(plugin)

Register a datasource plugin. See http://freeboard.github.io/freeboard/docs/plugin_example.html for information on creating plugins.

plugin (object) - A plugin definition object as defined at http://freeboard.github.io/freeboard/docs/plugin_example.html


freeboard.loadWidgetPlugin(plugin)

Register a widget plugin. See http://freeboard.github.io/freeboard/docs/plugin_example.html for information on creating plugins.

plugin (object) - A plugin definition object as defined at http://freeboard.github.io/freeboard/docs/plugin_example.html


freeboard.showLoadingIndicator(show)

Show/hide the loading indicator. The loading indicator will display an indicator over the entire board that can be useful when you have some code that takes a while and you want to give a visual indication and to prevent the user from modifying the board.

show (boolean) - Set to true or false to show or hide the loading indicator.


freeboard.showDialog(contentElement, title, okButtonTitle, cancelButtonTitle, okCallback)

Show a styled dialog box with custom content.

contentElement (DOM or jquery element) - The DOM or jquery element to display within the content of the dialog box.

title (string) - The title of the dialog box displayed on the top left.

okButtonTitle (string) - The string to display in the button that will be used as the OK button. A null or undefined value will result in no button being displayed.

cancelButtonTitle (string) - The string to display in the button that will be used as the Cancel button. A null or undefined value will result in no button being displayed.

okCallback (function) - A function that will be called if the user presses the OK button.


freeboard.getDatasourceSettings(datasourceName)

Returns an object with the current settings for a datasource or null if no datasource with the given name is found.

datasourceName (string) - The name of a datasource in the dashboard.


freeboard.setDatasourceSettings(datasourceName, settings)

Updates settings on a datasource.

datasourceName (string) - The name of a datasource in the dashboard.

settings (object) - An object of key-value pairs for the settings of the datasource. The values specified here will be combined with the current settings, so you do not need specify every setting if you only want to update one. To get a list of possible settings for a datasource, consult the datasource documentation or code, or call the freeboard.getDatasourceSettings function.


freeboard.on(eventName, callback)

Attach to a global freeboard event.

eventName (string) - The name of a global event. The following events are supported:

"dashboard_loaded" - Occurs after a dashboard has been loaded.

"initialized" - Occurs after freeboard has first been initialized.

callback (function) - The callback function to be called when the event occurs.


Building Plugins

See http://freeboard.github.io/freeboard/docs/plugin_example.html for info on how to build plugins for freeboard.

Testing Plugins

Just edit index.html and add a link to your javascript file near the end of the head.js script loader, like:

...
"path/to/my/plugin/file.js",
$(function()
{ //DOM Ready
    freeboard.initialize(true);
});

Copyright

Copyright © 2013 Jim Heising (https://github.com/jheising)
Copyright © 2013 Bug Labs, Inc. (http://buglabs.net)
Licensed under the MIT license.


Comments
  • How to auto load

    How to auto load "dashboard.json" when everyone go to freeboard

    Hi Sirs,

    As default freeboard need to save and load their dashboard into .json then save into desktop. Then how to auto load the default dashboard file when every user enter freeboard?

    Tks! Hanky

    opened by hankycheng 13
  • Mess after loading stored dashboard

    Mess after loading stored dashboard

    I'm currently trying to implement freeboard in our environment. Therefore I've added a server backend which stores the dashboard configuration object as json (sent to a REST API).

    Storing and retrieving the information works like a charm, but as soon as freeboard tries to render a loaded dashboard, it just places all panes on top of each other. Please see the following two screenshot (before and after loading). Any ideas how I can fix this?

    bildschirmfoto 2014-11-09 um 08 23 01

    bildschirmfoto 2014-11-09 um 08 23 26 (Clock pane slightly moved sideways so you can see the other panes are below of it)

    opened by marbetschar 13
  • How to make an HTML widget?

    How to make an HTML widget?

    It says "Can be literal HTML". Given that, how would I insert a datasource?

    <div style="background-color: gray">This is a timestamp: datasources["DS"]["Timestamp"]</div>

    Related SO question: http://stackoverflow.com/questions/31592886/adding-literal-html-to-an-html-widget-with-data-from-a-datasource

    opened by ScottBeeson 12
  • widgets not updating...

    widgets not updating...

    ...except for one only. I double checked, only one widget auto-updates when I POST data to Dweet.io. Dweet.io is the only method I'm using to push data, right now.

    (Address: https://freeboard.io/board/BnehvC)

    *) If I'm logged in and click on the "update" button in the datasources panel from the settings, widgets' values get updated.

    *) If I'm not logged in freeboard:

    • on 1st page loading I get empty fields;
    • If I reload, values get updated, but with no history.

    [all the above, except for one only widget: night-leds-level, if it matters. I'm wondering what does it have to be so special... :) ]

    Thanks.

    opened by dentex 10
  • directly load a prepared dashboard: howto and bugfix

    directly load a prepared dashboard: howto and bugfix

    first - missing documentation: if you want to load a dashboard: first create it and then "save freeboard" to get a json on your local computer. then put this json on the server. then you should be able to call it like /freeboard/index.html#source=test.json (if its in the freeboard folder)

    second - fix default index.html: change in the default index.html to "$.getJSON" instead of "$.get"

    opened by toastbrotch 8
  • Gauge Colors - 100% could be green ?

    Gauge Colors - 100% could be green ?

    I use freeboard to monitor application availability metrics, and currently, 100% shows up as red. Is there a way to invert the colors on a per widget basis ?

    opened by unixengineer 7
  • Full width and resizable widgets

    Full width and resizable widgets

    Hi, great initiative with this dashboard project.

    But why did you make it fixed width? A lot of screen estate is being unused.

    It would be awesome if you could use the entire screen width and be able to resize the widgets in whatever size you want.

    Look at this: http://gridster.net/demos/dynamic-grid-width.html

    You can support both custom widths, custom widget sizes and custom placements at once! Why restrict the user? I hated the fixed sizes with Geckoboard.

    Thanks.

    opened by Zyles 7
  • No development in a long time; please give me ownership

    No development in a long time; please give me ownership

    @jheising

    It appears that development of Freeboard has been abandoned. I would like to take ownership of Freeboard. Would you kindly either:

    1. Make me an owner of the project, so I can keep it going or
    2. Merge all pull requests (after review, of course) and close out all relevant bugs (if needed, of course)?

    I like the work you have done and I would like to keep it going, preferably under the same name.

    opened by JonathanWilbur 6
  • Smaller columns possible?

    Smaller columns possible?

    In order to better utilize screen real estate, I would like to define a smaller column size. For example, by going from 5 columns to 10 columns, I could effectively support "half-columns" and pack stuff more tightly. I tried simply raising the number of columns, but the columns retain their width. Any help is much appreciated - thanks!

    question 
    opened by tsjensen 6
  • Gauge settings: invert color and datasource as max value

    Gauge settings: invert color and datasource as max value

    Edit: sorry I just found #95 and #99, but how could I make this work on freeboard.io ? I'm not hosting anything and adding /examples/all, /examples/altGuage, and the direct link to the raw script doesn't do anything, no new widget is there, actually it just deleted my entire dashboard... Thanks for any help.

    Hi, for my dashboard I'd actually want the color of the gauge to be inverted, meaning red for lower values and green for higher. Can you add a toggle on the gauge settings to invert the color please?

    Also, can the max value be set as a Datasource ? My max values are not constant so that would be a great feature.

    Thank you !

    opened by a1ex4 4
  • Bugfix - javascript minimized/uglified assets should be ignored

    Bugfix - javascript minimized/uglified assets should be ignored

    Grunt tasks creates/modifies some JavaScript asset files when it ran get run, and hence it is changing the files which are available in the repository when cloning and modifies it.

    Because it is a must to run grunt to build the asset files then the minimized JS files are removed and ignored so when grunt is ran and creates/modifies the files they don't modify the git status to changes that should be staged.

    opened by lirantal 4
  • opensource freeboard development DEAD?

    opensource freeboard development DEAD?

    Is the public opensource freeboard development DEAD?

    Last commit 4 years ago, 22 pull requests open - no one cares?

    So why isn't there a big fat banner "sorry abandoned software"

    Why not close all pull requests and issues, they don't get resolved anymore...

    Just deactivte issues and pull requests in the github settings

    opened by joed74 1
  • Freeboard website doesn't redirect to https

    Freeboard website doesn't redirect to https

    Not exactly code-related, but I clicked on the link to freeboard.io via github and oddly it was http, and didn't redirect.

    Obviously it's only a couple of lines in .htaccess so thought it was worth letting you know.

    opened by ebecaf 0
  • Access to the stored datasources?

    Access to the stored datasources?

    Hi there, is there a way to get the list of the datasources added to the freeboard? I need to trigger the refresh of some widgets pointed to the same datasource from a global function - so external from a datasource.

    My try was by the freeboard.sarialize() method: this one returned the list of datasources but each of them are not 'datasouce' and then I cannot call the updateNow() method.

    Or .. is there a way to trigger the refresh of widget of 'outside' a datasource?

    thanks, regards

    opened by SteMMo33 0
  • Please help with Freeboard on Github IO

    Please help with Freeboard on Github IO

    Hi there, Could anybody give me some directions. I forked Freeboard to my own repositry. Next I made a Github page with freeboard from that repositry. And it works partially. I can make a time widget and a Google maps widget which work fine.

    But as I add a dweet datasource it will not update. Any clues. The original board does: http://freeboard.github.io/freeboard/ Mine does not: https://lucvolders.github.io/freeboard/

    What are the steps I need to do to have my Github freeboard get the updated data from dweet. My dweet is Lucstemp2018 and then temp (updated every half hour).

    Thanks Luc

    opened by Lucvolders 3
  • API functions to populate a freeboard instance?

    API functions to populate a freeboard instance?

    Hi there, is there some calls to populate a freeboard instance with panes and widget by code? I mean bypassing the loadDashboard() function that in my understanding is the only way to achieve that?

    Thanks!

    opened by SteMMo33 0
Owner
freeboard
Ridiculously simple dashboards for your devices.
freeboard
HTML5 Canvas Gauge. Tiny implementation of highly configurable gauge using pure JavaScript and HTML5 canvas. No dependencies. Suitable for IoT devices because of minimum code base.

HTML Canvas Gauges v2.1 Installation Documentation Add-Ons Special Thanks License This is tiny implementation of highly configurable gauge using pure

Mykhailo Stadnyk 1.5k Dec 30, 2022
Using ASP.NET Core, SignalR, and ChartJs to create real-time updating charts

Real-time Charts with ASP.NET Core, SignalR, and Chart.js This project shows how to update a real-time chart in your web browser using technologies li

Khalid Abuhakmeh 11 Nov 25, 2022
JavaScript toolkit for creating interactive real-time graphs

Rickshaw Rickshaw is a JavaScript toolkit for creating interactive time series graphs, developed at Shutterstock Table of Contents Getting Started Ins

Shutterstock 6.5k Dec 28, 2022
A general purpose, real-time visualization library.

Epoch By Ryan Sandor Richards Epoch is a general purpose charting library for application developers and visualization designers. It focuses on two di

Epoch 5k Dec 30, 2022
Make Your Company Data Driven. Connect to any data source, easily visualize, dashboard and share your data.

Redash is designed to enable anyone, regardless of the level of technical sophistication, to harness the power of data big and small. SQL users levera

Redash 22.4k Dec 30, 2022
A Simple Dashboard Chart in Laravel Nova using Chart JS

A Simple Dashboard Chart in Laravel Nova using Chart JS. Starting create your own dashboard with Chart JS Integration can save your time and help you maintain consistency across standard elements such as Bar, Stacked, Line, Area, Doughnut and Pie Chart.

Kuncoro Wicaksono 177 Jan 4, 2023
A centralized location for my WebGL and other demos.

?? Experiments A centralized location for my WebGL and other demos. Launch Site My work is for and funded by the community. If you used this or found

Faraz Shaikh 34 Dec 26, 2022
Plug is a browser extension for users of the Internet Computer that allows you to access your ICP, Cycles, and other tokens as well as log into IC apps with one click.

Plug Introduction Welcome to Plug! An Internet Computer crypto wallet and authentication provider as a browser extension. Find our latest version in t

Psychedelic 150 Dec 23, 2022
Highly customizable, animated, responsive, and dependency-free Evolution Graph implementation

Highly customizable, animated, responsive, and dependency-free Evolution Graph implementation. The package is built with Vanilla JavaScript and is used to create flexible data visualizations and present evolution relationships between entities.

Nathan S. Santos 39 Jan 5, 2023
Interactive visualizations of time series using JavaScript and the HTML canvas tag

dygraphs JavaScript charting library The dygraphs JavaScript library produces interactive, zoomable charts of time series: Learn more about it at dygr

Dan Vanderkam 3k Jan 3, 2023
Pretty time-series line graphs

Morris.js - pretty time-series line graphs Morris.js is the library that powers the graphs on http://howmanyleft.co.uk/. It's a very simple API for dr

null 7k Dec 24, 2022
Cubism.js: A JavaScript library for time series visualization.

Cubism.js Cubism.js is a D3 plugin for visualizing time series. Use Cubism to construct better realtime dashboards, pulling data from Graphite, Cube a

Square 4.9k Jan 3, 2023
📈 A small, fast chart for time series, lines, areas, ohlc & bars

?? μPlot A small (~35 KB min), fast chart for time series, lines, areas, ohlc & bars (MIT Licensed) Introduction μPlot is a fast, memory-efficient Can

Leon Sorokin 7.5k Jan 7, 2023
Synchro Charts is a front-end component library that provides a collection of components to visualize time-series data.

Synchro Charts Synchro Charts is a front-end component library that provides a collection of components to visualize time-series data. You can learn m

Amazon Web Services - Labs 60 Dec 29, 2022
API to generate candlestick chart data for any time period based on transactions data

candel-maker API to generate candlestick chart data for any time period based on transactions data Installation clone repo git clone https://github.co

null 2 Aug 18, 2022
Timeline/Graph2D is an interactive visualization chart to visualize data in time.

vis-timeline The Timeline/Graph2D is an interactive visualization chart to visualize data in time. The data items can take place on a single date, or

vis.js 1.2k Jan 3, 2023
danfo.js is an open source, JavaScript library providing high performance, intuitive, and easy to use data structures for manipulating and processing structured data.

Danfojs: powerful javascript data analysis toolkit What is it? Danfo.js is a javascript package that provides fast, flexible, and expressive data stru

JSdata 4k Dec 29, 2022
Open-source JavaScript charting library behind Plotly and Dash

Plotly.js is a standalone Javascript data visualization library, and it also powers the Python and R modules named plotly in those respective ecosyste

Plotly 15.3k Jan 4, 2023
Open Source Javascript Gantt

Frappe Gantt A simple, interactive, modern gantt chart library for the web View the demo » Install npm install frappe-gantt Usage Include it in your

Frappe 3.5k Dec 30, 2022