# Photon/node.js live streaming graph web page example **URL:** \ **Category:** Project Share\ **Created:** [April 20, 2016, 10:03pm UTC](https://community.particle.io/t/photon-node-js-live-streaming-graph-web-page-example/22286 "2016-04-20T22:03:36Z")\ **Posts on this page:** 8\ **Page:** 1
**Author:** ![rickkas7](https://sea2.discourse-cdn.com/flex026/user_avatar/community.particle.io/rickkas7/32/8681_2.png) [@rickkas7](https://community.particle.io/u/rickkas7)\ **Post date:** [April 20, 2016, 10:03pm UTC](https://community.particle.io/t/photon-node-js-live-streaming-graph-web-page-example/22286/1 "2016-04-20T22:03:36Z")
I got a request this morning for a tutorial/example of streaming data from a Photon to a local node.js server, and then graphing it on a web page. I thought that sounded interesting, so here it is. It’s currently sending a sample every 20 milliseconds (50 samples per second) though it can go faster than that. My demo has a potentiometer and when you adjust it, the graph updates in real time! ![](https://us1.discourse-cdn.com/flex026/uploads/particle/original/2X/3/3a297b9d23b22598d94e75b367ee5ea4fbac01d4.png) Video: The node.js code has two parts: A HTTP web server that serves the html/css/Javascript for the demo page and also serves Server Sent Events (SSE) for the live data updates. The SSE server sends out 10 bytes for every data sample, so the overhead is pretty low even sending out 50 samples per second. A TCP server that accepts a connection from the Photon and receives raw data values, 1 byte per sample. When a new data value is received it’s sent out to all of the web browsers that are currently graphing. Since it’s the node.js server replicating the data you can have many web browsers simultaneously graphing the data without bogging down the Photon. There’s also the static web page code, served up by the node.js server. It’s simple HTML and Javascript code. The graphing is done using HTML5 canvas. It receives data in real-time using Server Sent Events. And it does the whole thing without using any framework (jquery, AngularJS, etc.) - it’s that simple! To run it, download the source from Github: > **[rickkas7/livegraph](https://github.com/rickkas7/livegraph)** > > Example program using Particle Photon, node.js, SSE, HTML5 Canvas to do real-time graphing - rickkas7/livegraph The firmware directory contains the code for your Photon. Be sure to update the server IP address and flash the Photon. Then run the node.js server, for example: `node livegraph.js` You must be in the directory containing livegraph.js and the public folder, because the files in the public folder, index.html, main.js, and main.css need to be sent to the web browser. Then open up a web browser. If you’re doing it on the computer running the node server and the default port, you’d just use: [http://localhost:8080/](http://localhost:8080/) ![](https://us1.discourse-cdn.com/flex026/uploads/particle/original/2X/7/79eba6442f142bc91183e5199fa82e9813bf8c24.jpg) Have fun! ---
**Author:** ![Madoo](https://sea2.discourse-cdn.com/flex026/user_avatar/community.particle.io/madoo/32/9829_2.png) [@Madoo](https://community.particle.io/u/Madoo)\ **Post date:** [July 30, 2016, 5:50pm UTC](https://community.particle.io/t/photon-node-js-live-streaming-graph-web-page-example/22286/2 "2016-07-30T17:50:51Z")
Thanks a million, this was extremely helpful! ---
**Author:** ![rickkas7](https://sea2.discourse-cdn.com/flex026/user_avatar/community.particle.io/rickkas7/32/8681_2.png) [@rickkas7](https://community.particle.io/u/rickkas7)\ **Post date:** [July 30, 2016, 5:56pm UTC](https://community.particle.io/t/photon-node-js-live-streaming-graph-web-page-example/22286/3 "2016-07-30T17:56:07Z")
Thanks! I have a newer version of the code in the post below. The new version is more complicated, but it eliminates the need to hardcode the IP address in the Photon code, authenticates the data connection, and combines the server functions so everything runs over a single port. > [@Local server in node.js example](https://community.particle.io/t/local-server-in-node-js-example/24233): > > The event publish and subscribe feature of the Particle Cloud is easy-to-use and very effective in most cases. But sometimes you need to transmit more data than is allowed for publishing events. Or maybe you need to do some specialized processing. A server on your home or office network implemented in node.js is a useful tool in some cases. This sample implements: Server discovery. The Photon uses publish to locate the server IP address and port to connect to, so you don’t need to hardcode it… ---
**Author:** ![Madoo](https://sea2.discourse-cdn.com/flex026/user_avatar/community.particle.io/madoo/32/9829_2.png) [@Madoo](https://community.particle.io/u/Madoo)\ **Post date:** [July 30, 2016, 6:51pm UTC](https://community.particle.io/t/photon-node-js-live-streaming-graph-web-page-example/22286/4 "2016-07-30T18:51:06Z")
Brilliant. Thanks! ---
**Author:** ![rite2rajeev](https://avatars.discourse-cdn.com/v4/letter/r/a87d85/32.png) [@rite2rajeev](https://community.particle.io/u/rite2rajeev)\ **Post date:** [February 21, 2017, 10:02pm UTC](https://community.particle.io/t/photon-node-js-live-streaming-graph-web-page-example/22286/5 "2017-02-21T22:02:58Z")
Hello. I tried the code and it didn’t work. My localhost just showing “Live graph” screen. I have flashed the code on to particle. Can someone help me to understand whats going on? Thankyou RN ---
**Author:** ![rickkas7](https://sea2.discourse-cdn.com/flex026/user_avatar/community.particle.io/rickkas7/32/8681_2.png) [@rickkas7](https://community.particle.io/u/rickkas7)\ **Post date:** [February 21, 2017, 10:05pm UTC](https://community.particle.io/t/photon-node-js-live-streaming-graph-web-page-example/22286/6 "2017-02-21T22:05:20Z")
Showing the Javascript console in your browser may be helpful to see if there are errors. Also, the example does not work on Internet Explorer or Edge because they don’t support SSE. And monitoring the USB serial output from the Photon will indicate whether it’s able to send data to the node server. ---
**Author:** ![ben93](https://avatars.discourse-cdn.com/v4/letter/b/49beb7/32.png) [@ben93](https://community.particle.io/u/ben93)\ **Post date:** [May 8, 2017, 2:17am UTC](https://community.particle.io/t/photon-node-js-live-streaming-graph-web-page-example/22286/7 "2017-05-08T02:17:53Z")
Hi rickkas, I’ve tried the code and it works great. I was wondering if there is any way this can be done, except that the Photon and laptop are not on the same Wi-Fi network. Thanks, Ben ---
**Author:** ![ScruffR](https://sea2.discourse-cdn.com/flex026/user_avatar/community.particle.io/scruffr/32/6952_2.png) [@ScruffR](https://community.particle.io/u/ScruffR)\ **Post date:** [May 8, 2017, 5:42am UTC](https://community.particle.io/t/photon-node-js-live-streaming-graph-web-page-example/22286/8 "2017-05-08T05:42:24Z")
Asking the same question multiple times is just going to bind resources without extra value > [@Particle publish high frequency?](https://community.particle.io/t/particle-publish-high-frequency/25409/4): > > TCP would work just as well as long you get a route between the two devices.