Clipping of Charts

Dashboard
1

I am having trouble maintaining some distances from the axes while plotting line graph. I have seen that there is an option called clip in charts.js documentation which will keep the plotting off graph raised to a particular point above the axes. The problem is that I have no able to deploy it correctly. This is my msg.ui_control paylod.

{
    "options": {
        "clip": {
            "left": 10,
            "top": 15,
            "right": 10,
            "bottom": -15
        },
        "elements": {
            "line": {
                "borderWidth": 5,
                "fill": false
            },
            "point": {
                "radius": 8
            }
        }
    }
}

I do believe that the placement of the clip details could be the problem here and so my graph looks like this.

image
image975Ă—472 63.4 KB

I want it to look like the below
image
image959Ă—475 59.3 KB

You can see that the graph is not touching any axes.

2

What is the data that is creating the flow?

3

The data looks like below.


    {
        "series": [
            "Total Returns"
        ],
        "data": [
            [
                21,
                29,
                25,
                25,
                20,
                27
            ]
        ],
        "labels": [
            "Jan",
            "Feb",
            "Mar",
            "Apr",
            "May",
            "Jun"
        ]
    }
]
4

This data does not seem to be reflected in the chart images you posted

do you mean that that is the msg.payload being sent to a ui-control node?

It might be clearer if you were to provide your flow

5

This should give you the idea of flow of payload.

[{"id":"672b26ecea3c997d","type":"change","z":"ea287ec.ff1148","name":"size","rules":[{"t":"set","p":"ui_control","pt":"msg","to":"{\"options\":{\"clip\":{\"left\":20,\"top\":50,\"right\":20,\"bottom\":-50},\"elements\":{\"line\":{\"borderWidth\":5,\"fill\":false},\"point\":{\"radius\":8}}}}","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":430,"y":3620,"wires":[["e57199372e1aeee4"]]},{"id":"e57199372e1aeee4","type":"ui_chart","z":"ea287ec.ff1148","name":"Chart","group":"d08eb194.4f60d","order":7,"width":16,"height":9,"label":"Mutual Fund Return % History","chartType":"line","legend":"true","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":true,"ymin":"","ymax":"","removeOlder":1,"removeOlderPoints":"30","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#d1001f","#f10404","#d66400","#025f02","#130557","#9e0557","#ff9896","#9467bd","#c5b0d5"],"outputs":1,"useDifferentColor":false,"x":570,"y":3620,"wires":[[]]},{"id":"4468935ca99051a3","type":"inject","z":"ea287ec.ff1148","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"series\":[\"Total Returns\"],\"data\":[[21,29,25,25,20,27]],\"labels\":[\"Jan\",\"Feb\",\"Mar\",\"Apr\",\"May\",\"Jun\"]}]","payloadType":"json","x":260,"y":3620,"wires":[["672b26ecea3c997d"]]},{"id":"d08eb194.4f60d","type":"ui_group","name":"Mutual Fund Investment History","tab":"a9a5b115d50d9ca1","order":1,"disp":false,"width":"16","collapse":false},{"id":"a9a5b115d50d9ca1","type":"ui_tab","name":"Mutual Fund Investment History","icon":"dashboard","disabled":false,"hidden":false}]
6

Not all chart.js options will apply to the ui-chart node. The ui-chart node dynamically builds the x and y axis'. for example if you have a value of 19, the y-axis will begin at 0, but if your lowest entry is 20, the y-axis will start at 20. If you go into your sample flow and change a valaue to 19, you will see the change.

For your x-axis starting with a ' ', will push Jan over on the x-axis giving you space.

Screen Shot 2021-09-06 at 7.21.30 AM
Screen Shot 2021-09-06 at 7.21.30 AM905Ă—495 28 KB

You can create graphs using chart.js with a ui-template node (here is an example creating a bubble chart using chart.js: EXAMPLE: How to create a Bubble chart (can be used as basis for scatter plot too) (flow) - Node-RED) or use the node-red-contrib-chartjs node (I have no experience with it)

Here is your flow with the added " " and a data of 0 added.

[{"id":"cf654b95d23fcd66","type":"change","z":"a3faa9967eaf2dcb","name":"size","rules":[{"t":"set","p":"ui_control","pt":"msg","to":"{\"options\":{\"clip\":{\"left\":20,\"top\":50,\"right\":20,\"bottom\":-50},\"elements\":{\"line\":{\"borderWidth\":5,\"fill\":false},\"point\":{\"radius\":8}}}}","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":470,"y":320,"wires":[["48206c8bed5e60d8"]]},{"id":"48206c8bed5e60d8","type":"ui_chart","z":"a3faa9967eaf2dcb","name":"Chart","group":"d08eb194.4f60d","order":7,"width":16,"height":9,"label":"Mutual Fund Return % History","chartType":"line","legend":"true","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":true,"ymin":"15","ymax":"35","removeOlder":1,"removeOlderPoints":"30","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#d1001f","#f10404","#d66400","#025f02","#130557","#9e0557","#ff9896","#9467bd","#c5b0d5"],"outputs":1,"useDifferentColor":false,"x":610,"y":320,"wires":[[]]},{"id":"d2004b5a7401348b","type":"inject","z":"a3faa9967eaf2dcb","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"series\":[\"Total Returns\"],\"data\":[[0,21,29,25,25,20,27]],\"labels\":[\" \",\"Jan\",\"Feb\",\"Mar\",\"Apr\",\"May\",\"Jun\"]}]","payloadType":"json","x":300,"y":320,"wires":[["cf654b95d23fcd66"]]},{"id":"d08eb194.4f60d","type":"ui_group","name":"Mutual Fund Investment History","tab":"a9a5b115d50d9ca1","order":1,"disp":false,"width":"16","collapse":false},{"id":"a9a5b115d50d9ca1","type":"ui_tab","name":"Mutual Fund Investment History","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
1 Like
7

Here you have fixed the max and minimum y axes for the chart which in my application wont be feasible, as the range can also be negative and also way high. I dont see a way to dynamically change the max and minimums also.

8

Other than building the chart using the ui-template I’m not sure what you could do

9

you should be able to set the max and min via a ui_control message - https://github.com/node-red/node-red-dashboard/blob/master/config-fields.md

1 Like