RGraph with Node-Red

RGraph GaugeHaving gone from spending countless hours staring at HTML5 CANVAS, I’m now at the “meh” stage as it starts to dawn on my how it works.

And so it was that I stumbled on RGraph – or put another way, Christmas for widget-lovers.

If you’ve been following these blog entries you’ll know that Node-Red has TEMPLATES in the UI – and that you can put your own stuff into the templates and that recently the fog has lifted on getting variables in and out of the templates.

In recent blogs I’ve been constantly improving a thermostat control page and that took me off looking for a gauge with two pointers – one to show temperature, the other to show humidity.

And that’s when I stumbled upon RGraph. If you read this – and understand it – you will open the doors to a boatload of gauges, thermometers, charts and graphs so tuck in:

First things first, if you’ve already played with Node-Red in here you will likely have made a /myjs folder (home/pi/.node-red/public/myjs or similar – defined in your Node-Red settings.js file) to put various Javascript files in. Well, add this lot in a sub-folder called RGraph – you can call it freddy if you like but I thought it reasonable to use the name the way they use it. I grabbed the latest stable version from here. Inside there is a folder called RGraph – and inside that is a folder called libraries – I grabbed the contents of that folder and put it inside my /public/RGraph folder. It may be there is a use for other stuff in there – but for now that’s all I’ve taken.

So – then I dropped in a template – made it 6*6 and inside that template I put this lot – code shown below.

Now, if you don’t like my colours – change them. You can change just about anything including the size but you may need to adjust the font size if you do that. Experiment!

To change the two pointers – which I’ve chosen to call temperature and humidity – you might use them for petrol and oil – or whatever….I simply pass MSG as is common in Node-Red – but not msg.template – instead msg.temperature and msg.humidity – you can call them whatever you like.

The point of this is not to demonstrate my crap taste in colours – once you follow what I’ve done here – that entire, massive library of CANVAS-related gauges and charts is yours for the taking!  You can make the gauges interactive – but as I had two, not one pointers in this example, I skipped that. Details are in the extensive RGraph documentation.  Copy me and drop them an encouraging lines to say MORE IOT PLEASE!!

Oh and if you don’t like animation – where I say “grow” say “draw”.

(As an aside, I got this working today as well - https://www.codeproject.com/Articles/304874/HTML-Canvas-Aqua-Gauge)  very pretty but doesn’t scale well.

Prerequisites: Far too often in blogs like this we “assume” that everyone is keeping up – if not – may I suggest a quick look at this page I put up specifically to give a little background – which might help explain this article.

[pcsh lang="js" tab_size="4" message="" hl_lines="" provider="manual"]

<script src="/myjs/RGraph/RGraph.common.core.js" ></script>
<script src="/myjs/RGraph/RGraph.gauge.js" ></script>

<script language="javascript" type="text/javascript">

                scope.$watch('msg', function(msg) {
            var gauge3 = new RGraph.Gauge({
                id: 'cvs',
                min: 0,
                max: 100,
                value: [23,60],
                options: {
                    titleTop: 'Temperature',
                    titleTopSize: '16',
                    titleTopFont: 'Impact',
                    titleTopColor: '#ff8888',
                    titleTopPos: 0.25,
                    titleBottom: 'Humidity',
                    titleBottomSize: '14',
                    titleBottomFont: 'Impact',
                    titleBottomColor: '#8888ff',
                    titleBottomPos: 0.3,
                    backgroundColor: 'black',
                    backgroundGradient: true,
                    centerpinColor: '#666',
                    needleSize: [null, 50],
                    needleColors: ['Gradient(transparent:yellow:orange:#ff8888:#ff8888)', 
                    textColor: 'white',
                    tickmarksBigColor: 'white',
                    tickmarksMediumColor: 'white',
                    tickmarksSmallColor: 'white',
                    borderWidth: 1,
                    borderOuter: '#666',
                    borderInner: '#3333',
                    colorsRanges: [
                    textAccessible: true


    <canvas id="cvs" width="300" height="300">[No canvas support]</canvas>



7 thoughts on “RGraph with Node-Red

  1. Hi Pete

    I note that the section relating to getting values back from RGraph has been removed so maybe you have resolved the issue but just in case here is how I did it.

    I added a line to the options of the object which created a listener namely

    eventsClick: myClick,

    I then added the function

    function myClick (e)
    var obj = e.target.__object__;
    Obviously I have done this as an alert but I am sure you can adapt this to a send easily enough


  2. Hello

    thanks for the great manuals you give us here. I work now with Raspberry Pie & MQTT & Node Red. I make it like you write here but i dont see anything in the Dashboard.
    I change the variable "httpStatic" in the settings.js
    What can i do?

    best regards

      1. Suggest a trip over to the Node-Red site where they have more info on the settings.js file - and also the Google Groups discussion area where there is a specific Node-Red Dashboard area.

      2. Yes, an other html example which only show text works fine
        i google so much, but i dont find any solution

        you write that the variable in settings.js must be changed for the folder where rgraph is saved. Was it the right variable i have changed?

  3. Hi Pete,

    I saw this page - and since you seem to be liking RGraph I wondered if you wanted to post an update about it. Since January I've been adding more SVG libraries which is now up to 13 base charts types. A few more variations can be be made - for example the Horizontal Bar chart can be customised to make a Horizontal Progress bar and similarly the vertical Bar chart can be customised to make Vertical Progress Bar.

    There's also a Semi-circular Progress in both SVG and also canvas flavours.

    Going forward I'll (eventually) add more SVG chart types - including a Gauge chart (like the canvas Gauge chart)



  4. Hi Pete!
    Really great work! Just a quick question: would it be possible to have the numeric value of the temperature instead of the "Humidity" sign on the bottom side of the gauge? And how would I have it updated each time the gauge receive a message?
    Thank you so much for your work!

    Roberto (from Italy)

Leave a Reply

Your email address will not be published. Required fields are marked *

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