I have this dashboard 1 chart
The data comes from an SQL query so it's an array
[{"dayofmonth":20,"totalwh":194},{"dayofmonth":20,"totalwh":170},{"dayofmonth":21,"totalwh":184},{"dayofmonth":22,"totalwh":190},{"dayofmonth":23,"totalwh":180},{"dayofmonth":24,"totalwh":239},{"dayofmonth":25,"totalwh":104},{"dayofmonth":26,"totalwh":112},{"dayofmonth":27,"totalwh":229},{"dayofmonth":28,"totalwh":219},{"dayofmonth":29,"totalwh":174},{"dayofmonth":30,"totalwh":156},{"dayofmonth":31,"totalwh":185},{"dayofmonth":1,"totalwh":174},{"dayofmonth":2,"totalwh":155},{"dayofmonth":3,"totalwh":146},{"dayofmonth":4,"totalwh":217},{"dayofmonth":5,"totalwh":235},{"dayofmonth":6,"totalwh":172},{"dayofmonth":7,"totalwh":198},{"dayofmonth":8,"totalwh":136},{"dayofmonth":9,"totalwh":170},{"dayofmonth":10,"totalwh":217},{"dayofmonth":11,"totalwh":191},{"dayofmonth":12,"totalwh":200},{"dayofmonth":13,"totalwh":272},{"dayofmonth":14,"totalwh":191},{"dayofmonth":14,"totalwh":137},{"dayofmonth":15,"totalwh":136},{"dayofmonth":16,"totalwh":150},{"dayofmonth":17,"totalwh":126},{"dayofmonth":17,"totalwh":111},{"dayofmonth":18,"totalwh":180}]
(Note that "dayofmonth" values sometimes repeat and some days are missing.)
Each bar has a different colour so that I can visually associate this chart with others which plot different values.
Here is the same data plotted in Dashboard 2, using Series: msg.topic
But using Series: key: dayofmonth (and unticking Show legend) gives this
Question: Why did the bars switch to 1px wide?
[{"id":"7ffd21da5b4baa20","type":"inject","z":"ee21d839b49ce32b","name":"testdata","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"dayofmonth\":20,\"totalwh\":194},{\"dayofmonth\":20,\"totalwh\":170},{\"dayofmonth\":21,\"totalwh\":184},{\"dayofmonth\":22,\"totalwh\":190},{\"dayofmonth\":23,\"totalwh\":180},{\"dayofmonth\":24,\"totalwh\":239},{\"dayofmonth\":25,\"totalwh\":104},{\"dayofmonth\":26,\"totalwh\":112},{\"dayofmonth\":27,\"totalwh\":229},{\"dayofmonth\":28,\"totalwh\":219},{\"dayofmonth\":29,\"totalwh\":174},{\"dayofmonth\":30,\"totalwh\":156},{\"dayofmonth\":31,\"totalwh\":185},{\"dayofmonth\":1,\"totalwh\":174},{\"dayofmonth\":2,\"totalwh\":155},{\"dayofmonth\":3,\"totalwh\":146},{\"dayofmonth\":4,\"totalwh\":217},{\"dayofmonth\":5,\"totalwh\":235},{\"dayofmonth\":6,\"totalwh\":172},{\"dayofmonth\":7,\"totalwh\":198},{\"dayofmonth\":8,\"totalwh\":136},{\"dayofmonth\":9,\"totalwh\":170},{\"dayofmonth\":10,\"totalwh\":217},{\"dayofmonth\":11,\"totalwh\":191},{\"dayofmonth\":12,\"totalwh\":200},{\"dayofmonth\":13,\"totalwh\":272},{\"dayofmonth\":14,\"totalwh\":191},{\"dayofmonth\":14,\"totalwh\":137},{\"dayofmonth\":15,\"totalwh\":136},{\"dayofmonth\":16,\"totalwh\":150},{\"dayofmonth\":17,\"totalwh\":126},{\"dayofmonth\":17,\"totalwh\":111},{\"dayofmonth\":18,\"totalwh\":180}]","payloadType":"json","x":130,"y":200,"wires":[["ac8599c6863a0f6b","5cc3ab0e273160c1","63f3137f373cfc00"]]},{"id":"ac8599c6863a0f6b","type":"function","z":"ee21d839b49ce32b","name":"Format","func":"let labels = []\nlet totalpowerdata = []\nlet msg1 = {}\nmsg.payload.forEach(myFunction)\n\nfunction myFunction(item, index) { // Convert array of x,y and to arrays of x (labels) and y (data) values\n //labels.push(item.ontime.getDate());\n labels.push(item.dayofmonth);\n totalpowerdata.push(item.totalwh)\n}\nmsg1.payload = [{\n \"series\": [\"Total power (Wh)\"],\n \"data\": [totalpowerdata],\n \"labels\": labels // how come [data] but not [labels]? \n}];\n\n\n\nreturn msg1;","outputs":1,"timeout":"","noerr":0,"initialize":"","finalize":"","libs":[],"x":280,"y":160,"wires":[["08364db3fd33d1d9"]]},{"id":"08364db3fd33d1d9","type":"ui_chart","z":"ee21d839b49ce32b","name":"Dashboard 1","group":"75efeb59924cebba","order":3,"width":7,"height":4,"label":"Dashboard 1","chartType":"bar","legend":"false","xformat":"auto","interpolate":"linear","nodata":"","dot":false,"ymin":"100","ymax":"300","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"outputs":1,"useDifferentColor":false,"className":"","x":450,"y":160,"wires":[[]]},{"id":"5df4b1ac6ba5ecd4","type":"inject","z":"ee21d839b49ce32b","name":"Clear","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[]","payloadType":"json","x":130,"y":240,"wires":[["08364db3fd33d1d9","5cc3ab0e273160c1","63f3137f373cfc00"]]},{"id":"5cc3ab0e273160c1","type":"ui-chart","z":"ee21d839b49ce32b","group":"c144d9e75c434dc4","name":"Dashboard 2b","label":"Dashboard 2b","order":1,"chartType":"bar","category":"dayofmonth","categoryType":"property","xAxisLabel":"","xAxisProperty":"dayofmonth","xAxisPropertyType":"property","xAxisType":"category","xAxisFormat":"","xAxisFormatType":"auto","yAxisLabel":"","yAxisProperty":"totalwh","ymin":"100","ymax":"300","action":"replace","stackSeries":false,"pointShape":"circle","pointRadius":4,"showLegend":false,"removeOlder":1,"removeOlderUnit":"3600","removeOlderPoints":"","colors":["#0095ff","#ff0000","#ff7f0e","#2ca02c","#a347e1","#d62728","#ff9896","#9467bd","#c5b0d5"],"textColor":["#666666"],"textColorDefault":true,"gridColor":["#e5e5e5"],"gridColorDefault":true,"width":"7","height":"4","className":"","x":460,"y":240,"wires":[[]]},{"id":"63f3137f373cfc00","type":"ui-chart","z":"ee21d839b49ce32b","group":"c144d9e75c434dc4","name":"Dashboard 2a","label":"Dashboard 2a","order":2,"chartType":"bar","category":"topic","categoryType":"msg","xAxisLabel":"","xAxisProperty":"dayofmonth","xAxisPropertyType":"property","xAxisType":"category","xAxisFormat":"","xAxisFormatType":"auto","yAxisLabel":"","yAxisProperty":"totalwh","ymin":"100","ymax":"300","action":"replace","stackSeries":false,"pointShape":"circle","pointRadius":4,"showLegend":false,"removeOlder":1,"removeOlderUnit":"3600","removeOlderPoints":"","colors":["#0095ff","#ff0000","#ff7f0e","#2ca02c","#a347e1","#d62728","#ff9896","#9467bd","#c5b0d5"],"textColor":["#666666"],"textColorDefault":true,"gridColor":["#e5e5e5"],"gridColorDefault":true,"width":"7","height":"4","className":"","x":460,"y":200,"wires":[[]]},{"id":"75efeb59924cebba","type":"ui_group","name":"Demo","tab":"48ca31c920c96359","order":1,"disp":true,"width":"8","collapse":false,"className":""},{"id":"c144d9e75c434dc4","type":"ui-group","name":"Demo","page":"dea27ca0b0f9f3e8","width":"7","height":"1","order":1,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"48ca31c920c96359","type":"ui_tab","name":"Demo","icon":"dashboard","disabled":false,"hidden":false},{"id":"dea27ca0b0f9f3e8","type":"ui-page","name":"Demo","ui":"a3e614cd9df4ae2e","path":"/page2","icon":"home","layout":"grid","theme":"b892be9ce6f645f6","order":1,"className":"","visible":"true","disabled":"false"},{"id":"a3e614cd9df4ae2e","type":"ui-base","name":"My Dashboard","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"showPageTitle":true,"navigationStyle":"default","titleBarStyle":"default"},{"id":"b892be9ce6f645f6","type":"ui-theme","name":"Default Theme","colors":{"surface":"#ffffff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"},"sizes":{"pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"5px","density":"default"}}]
ps The clear button is not sufficient for D2, if you change anything you have to ctrl F5 to see the result. Why?
