SparkFun Phant server data stream graphing

This application Phant Graphs is a simple AngularJs and ChartJs single page web application that allows to configure and create a dashboard of graphs that display stream data available on Sparkfun Phant servers, either localy, or on the internet ( for example).

The datasources ( servers and streams) can be configured rapidly, the graphs types can be chosen and also the fields that make up the graphs can also be chosen, so we can have some nice graphs without coding a single line. The application also pools periodically the data streams for the latest data and updates the graphs if needed.
For example, on the following image, for the same data stream there are several graphs, where each one show a different set of fields on different graph type. This is useful, and needed, for example for graphing temperature and pressure. Due to the scale differences between unit values a single graph won’t show properly the temperature for a graph that also has the pressure field.

PhantGraphs Dashboard
PhantGraphs Dashboard

How to deploy
Deploy the supporting rest server:, and start the server. The provided database already has some configuration done.
Deploy PhantGraphs on a web server, and change the REST server endpoint on the restapi.js file to point to the correct location of the Rest Server.

To configure, goto Config->Phant Servers where we can add, edit and delete servers. We should provide a name and the base URL for the Phant Server.
Please notice, that at least at this stage, the REST server doesn’t provide referential integrity on the data, so it’s a bad idea to delete a server that has streams and graphs associated…

Phant Servers
Phant Servers

After a server is configured, we can associate data streams to it. Just goto Config->Phant Streams and create a stream. The stream public key is needed, so we have to get it on the Phant server web interface. The PhantGraphs application will try to fetch from the stream the available fields.

Phant Streams
Phant Streams

If it fails, an error will appear at the top of the page.

After all the streams are configured, we can now create the graphs for them, one or more, with different graph types and for different stream fields.
Some things are not quite ready here, namely the graph display order, that must be defined, but it’s not used for now.

Phant Graphs configuration
Phant Graphs configuration

We can play around with the Graph type, like Line, Bar, Pie, and so on. The option Single Bars only applies to Bar Graphs, that for these type of graphs instead of using a time series for the X axis, it uses only bars for the fields defined.

After this, we just go to Dashboard and enjoy our graphs.

On Config->Dashboard we can change the refresh period for getting the latest data. This value shouldn’t be to low because it will overload the browser and the servers. We can also define the number of datapoints shown on the graphs, the number of errors that the application will endure before stopping the automatic refresh. To resume, just refresh the page or click on any graph. The label interval is used in the Line graph charts so that the X axis doesn’t become too overcrowded. Anyway, just play with the values.

The MQTT is just a simple MQTT over web sockets monitor, that can be configured in Config->MQTT Server. The MQTT broker must support MQTT over web sockets, for example Mosquitto 1.4 or Mosca.

The code is based on the flm-ui application available on Github.

IoT Device Provisioning
The application also allows to list IoT devices, namely the ESP8266, that registered on the RestServer, check their status, and make a simple JSON based properties configuration that is requested and loaded by the devices:

IoT Device Provisioning
IoT Device Provisioning

Configuring properties for the device:


Check out for more information: IoT device provisioning and tracking

And that’s it. Enjoy your new graphs.

9 thoughts on “SparkFun Phant server data stream graphing

  1. Firstly, thank you for releasing both the rest API and the graphing server. I have deployed both the rest server you provided as well as the phantGraph application on my local server, both running. I have tested/accessed the API via localhost:3000/api (which returns the json data). I then installed a simple node http-server and launched it via the PhantGraph app folder (containing index.html) and launched it with http-server –cors which allows me to access the page on another machine within my network. The problem is, whenever i click any button.. it redirects to the page but never loads the information so i cannot configure my local phant servers. Any ideas?

    1. Did you change on the source code restapi.js the URL for the REST Server?

      On the Rest Server it should show some output as you browse the Web application. Do you see anything?

    2. Hi: Just another question: Does the machine where you have your browser running to run the We application can access the RestAPI? All code runs on your browser and so the browser machine must be able to access the Rest API. For that to be possible the rest URL can’t be http://localhost:3000 but your rest api machine real public IP address.

      1. Hi there !

        Yeah I realised that so changed the rest url as you had said. It all works relatively well for now though! However, I need to add another server (with same details) for a stream on the same Phant server to load the stream ID’s (ie the first stream loads the id’s, the second doesn’t).
        The JSON output from the original Phant server also contains a space between temperature values (ie instead of 26.600 the JSON contains 26.__600 where _ represents a space). I accounted for this in main.js
        Did you ever have a similar issue ?

      2. Hi: No I don’t have that issue (the space) on my data. That’s a bit odd…
        Also if the server is the same, just add new streams to it. No need to define any new servers.
        Also if using Firefox, you can press F12 and see on the Network connections the phant server connections and find out why the field retrieval is failing.
        Note that I’m not making any input validation, so the URL that the application is building might be wrong.

      3. Yeah I wouldn’t have thought so..
        It’s a fresh local Phant install with the data not having spaces on Phant, only when it exports .. Odd.
        See I thought that as well, but upon adding another server, the second stream repopulated.. I am running Mac and safari though, I’ll try chrome or Firefox, otherwise a different machine and see if it happens.

        I will do some further debugging but otherwise all is well 🙂 under each graph you have the graph options.. How would I define the chart colours ? I looked on angular js code (chart-colours=[{grey, blue, green, red…}] but wasn’t sure I could enforce that in your dashboard.
        Regardless, thank you 🙂

      4. Well, I’ve only tested with Firefox, not even with chrome or IE, since I run Arch Linux in all of my machines. So it’s more than possible that something might be broken in another browsers 🙂
        Regarding the graph options, that’s indeed a problem that I haven’t solved yet, because the options are taken a instance time, and not taken from the passing parameters. You might want to change the views/main.html file under the options values to suit your requirements, but as far as it is now it doesn’t work dynamically as the other options.

      5. I’ll test other browsers and get back to you 🙂 it’s actually a really handy package to have regarding Phant servers!

        If I find a way to get it working, would you mind if I fork it and append my changes ?, or just clone yours with it on GitHub?

      6. Thanks for the input regarding other browsers.

        Regarding the code I made it available so everyone can use and change it. It was a great missing feature to Phant the possibility of easily graph data.

        I’m also not aware of all possibilities of Github, but I think, correct me If I’m wrong, If you fork, I can later merge your changes back, but please do what suits you best 🙂

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.