Chart options: mixed charts and bars and multi axes

FAQs
1

Does anyone have a good example how to add attributes to the different datasets going to a chart. I have seen how to add a second y axes to a chart, but I don't know how to tell the chart on which axis to put which series. Example here which works:

On that same point in chart.js, you can set each series type property to 'bar' or 'line' even if it is on the other kind of chart to have mixed charts like here:

I just can't figure out how to add that property to the dataset.

Does anyone have a clue or an alternative.

For reference, I am trying to show the hourly rainfall with a bargraph and the daily accumulation with a line graph overlayed. Works great in excel like this.

Cheers,

Rob

2

You cant do it with regular chart node, but it is possible with ui_template. Quick example.

[{"id":"13e0b8f1.dfe687","type":"ui_template","z":"b633308d.4a91a","group":"4552fe72.fdfa5","name":"Line Chart","order":4,"width":"15","height":"10","format":"","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":690,"y":700,"wires":[[]]},{"id":"33be001d.f6af3","type":"inject","z":"b633308d.4a91a","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":true,"onceDelay":"0.62","x":250,"y":700,"wires":[["167e0e6d.2acf32"]]},{"id":"167e0e6d.2acf32","type":"function","z":"b633308d.4a91a","name":"","func":"\nvar m_first = []\nvar m_second = []\nvar m_labels = []\nvar a\nvar startTime = 1577836800000\nfor(x=1;x<=25;x++){\n    a = {x: new Date(startTime), y: Math.random() * 300}\n    m_first.push(a)\n    startTime += 86400000\n}\nstartTime = 1577836800000\nfor(x=1;x<=25;x++){\n    a = -2.5 + Math.random() * 5\n    m_second.push(a)\n    startTime += 86400000\n    m_labels.push(\"label_\"+x)\n}\n\nmsg.payload = {}\nmsg.payload.first = JSON.stringify(m_first)\nmsg.payload.second = JSON.stringify(m_second)\nmsg.payload.labels = JSON.stringify(m_labels)\nreturn msg;\n","outputs":1,"noerr":0,"x":390,"y":700,"wires":[["7f227cac.38d054"]]},{"id":"807a85c.8761e78","type":"debug","z":"b633308d.4a91a","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":670,"y":740,"wires":[]},{"id":"7f227cac.38d054","type":"template","z":"b633308d.4a91a","name":"","field":"template","fieldType":"msg","format":"html","syntax":"mustache","template":"<canvas id=\"myChart\" width=600 height =300></canvas>\n<script>\nvar textcolor = getComputedStyle(document.documentElement).getPropertyValue('--nr-dashboard-widgetTextColor');\nvar gridcolor = getComputedStyle(document.documentElement).getPropertyValue('--nr-dashboard-groupBorderColor');\nvar linecolors = ['#009900','#889900']\n\nvar ctx = document.getElementById('myChart').getContext('2d');\nvar chart = new Chart(ctx, {\n    // The type of chart we want to create\n    type: 'bar',\n\n    // The data for our dataset\n    data: {\n        labels: {{{payload.labels}}},\n        datasets: [\n            {\n                type:'line',\n                label: 'First',\n                backgroundColor: linecolors[0],\n                borderColor: linecolors[0],\n                data: {{{payload.first}}},\n                yAxisID: 'left-y-axis',\n                steppedLine: false,\n                fill: false,\n                borderWidth: 1\n            },\n            {\n                type:'bar',\n                label: 'Second',\n                \n                backgroundColor: linecolors[1],\n                borderColor: linecolors[1],\n                data: {{{payload.second}}},\n                yAxisID: 'right-y-axis',\n                barPercentage: 0.5,\n                barThickness: 6,\n                maxBarThickness: 8,\n                minBarLength: 2,\n            }\n        ]\n    },\n\n    // Configuration options go here\n    options: {\n        scales: {\n            yAxes: [\n                {\n                    gridLines :{display:false},\n                    id: 'left-y-axis',\n                    type: 'linear',\n                    position: 'left',\n                    ticks: {\n                        fontColor: linecolors[0]\n                    }\n                },\n                {\n                    gridLines :{zeroLineColor:gridcolor,color:gridcolor,lineWidth:0.5},\n                    id: 'right-y-axis',\n                    type: 'linear',\n                    position: 'right',\n                    ticks: {\n                        fontColor:linecolors[1]\n                    }\n                }\n            ],\n            xAxes: [\n                {\n                    gridLines :{zeroLineColor:gridcolor,color:gridcolor,lineWidth:0.5},\n                    \n                    ticks: {\n                        fontColor:textcolor\n                    }\n                }\n            ]\n        }\n    }\n});\n</script>\n","output":"str","x":520,"y":700,"wires":[["13e0b8f1.dfe687","807a85c.8761e78"]]},{"id":"4552fe72.fdfa5","type":"ui_group","z":"","name":"Chart","tab":"2ecb90e3.af7a5","order":3,"disp":true,"width":"15","collapse":false},{"id":"2ecb90e3.af7a5","type":"ui_tab","z":"","name":"Ovens","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

image
image824Ă—462 31 KB

10 Likes
3

And boom, there it is. Thanks hotNipi, you've just saved me hours of mucking around, but now I'm on a whole new graphing tangent! :nerd_face:

Cheers!

1 Like
4

Wow! that is a great example, definitely one for me to bookmark.

1 Like
5

The Wizard of charting :mage:

2 Likes
6

Are there a way of making the fill option more opaque? As if you make fill: true it's rather solid

image

Opaque like below
image

7

The way I understand it, once you are in the template node, you are back to regular html, JavaScript, etc. So standard chart.js formatting should work, eg: https://codepen.io/rtd62/pen/NpZvQj

1 Like
8

That fill color is currently same as the line color, that why it is not semitransparent.
Property to set is backgroundColor
For that dataset just change color to be with alpha channel adjusted

{
                type:'line',
                label: 'First',
                backgroundColor: '#00990055',
                borderColor: linecolors[0],
                data: {{{payload.first}}},
                yAxisID: 'left-y-axis',
                steppedLine: false,
                fill: true,
                borderWidth: 1
            }
1 Like
9

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.