[{"data":1,"prerenderedAt":465},["ShallowReactive",2],{"blog-\u002Fblog\u002F2024\u002F07\u002Fdashboard-new-charts":3},{"id":4,"title":5,"body":6,"description":12,"extension":454,"meta":455,"navigation":460,"path":461,"seo":462,"stem":463,"__hash__":464},"blog\u002Fblog\u002F2024\u002F07\u002Fdashboard-new-charts.md","New Charts Available in FlowFuse Dashboard",{"type":7,"value":8,"toc":440},"minimark",[9,13,18,21,26,37,41,49,53,56,59,67,71,75,78,86,90,95,109,112,115,119,126,129,133,136,139,143,154,303,306,314,317,325,336,344,348,356,365,368,375,379,386,389,415,419,436],[10,11,12],"p",{},"It's been a while coming, but we've finally introduced a new set of chart types to FlowFuse Dashboard. We've added Pie, Donut and Grouped (Stacks and Side-by-Side) Bar charts to the UI Chart node. We've also shipped plenty of other improvements and fixes in this release, so let's dive in.",[14,15,17],"h2",{"id":16},"grouped-bar-charts","Grouped Bar Charts",[10,19,20],{},"We now have the option \"Group By\" available when building Bar Charts, with the options \"Stacks\" and \"Side-by-Side\". This allows you to group data in a more meaningful way, and is particularly useful when comparing multiple data sets.",[22,23,25],"h3",{"id":24},"stacks","Stacks",[10,27,28,34],{},[29,30],"img",{"alt":31,"dataZoomable":32,"src":33},"Screenshot showing a stacked bar chart with Dashboard","","\u002Fblog\u002F2024\u002F07\u002Fimages\u002Fui-chart-bar-grouped-finance-stacks.png",[35,36,31],"em",{},[22,38,40],{"id":39},"side-by-side","Side-by-Side",[10,42,43,47],{},[29,44],{"alt":45,"dataZoomable":32,"src":46},"Screenshot showing a side-by-side grouped bar chart with Dashboard","\u002Fblog\u002F2024\u002F07\u002Fimages\u002Fui-chart-bar-grouped-finance.png",[35,48,45],{},[14,50,52],{"id":51},"pie-donut-charts","Pie & Donut Charts",[10,54,55],{},"Radial charts are now available in Dashboard, with the introduction of Pie and Donut charts. These are particularly useful when you want to show the proportion of a single data set.",[10,57,58],{},"If you're using multiple \"Series\" here, then you'll get multiple nested radial charts, which can be particularly useful when comparing multiple data sets.",[10,60,61,65],{},[29,62],{"alt":63,"dataZoomable":32,"src":64},"Screenshot showing the new Pie and Donut charts available with Dashboard","\u002Fblog\u002F2024\u002F07\u002Fimages\u002Fui-chart-pie-doughnut.png",[35,66,63],{},[14,68,70],{"id":69},"general-chart-changes-improvements","General Chart Changes & Improvements",[22,72,74],{"id":73},"breaking-changes-bar-charts","Breaking Changes - Bar Charts",[10,76,77],{},"With the introduction of the new chart types, we've generalised the key mapping features for charts. Previously, Bar Charts were using the \"Series\" property to define how data is rendered onto the x-axis. In hindsight, this didn't really make any sense, it should be the \"X\" property that defines the data used on the x-axis, so we've corrected that going forward, but it did mean introducing a breaking change. We don't do this lightly, but in this case, it was necessary to ensure the charting experience is consistent across all chart types.",[10,79,80,81,85],{},"It does however mean that Bar Charts created in ",[82,83,84],"code",{},"1.13.0"," or below will need to be updated to reflect this. You just need to set \"X\" to whatever you have in the \"Series\" property, and then set \"Series\" to \"None\".",[22,87,89],{"id":88},"mapping-your-data","Mapping Your Data",[91,92,94],"h4",{"id":93},"series","Series",[10,96,97,98,101,102,104,105,108],{},"This property is now, consistently, how you want to group your data. If a new ",[82,99,100],{},"msg"," is coming in, and a property on that ",[82,103,100],{}," defines its group, then you can set \"Series\" to something like ",[82,106,107],{},"msg.myCategory",".",[10,110,111],{},"If a single data point needs to plot multiple points\u002Fbars onto a chart, then you can use the \"JSON\" type here, and list the different properties you want to plot, one for each category.",[10,113,114],{},"For Radial charts (Pie & Donut), having multiple series would provide multiple, nested radial charts.",[91,116,118],{"id":117},"x","X",[10,120,121,122,125],{},"With this, we define which property (or ",[35,123,124],{},"properties"," if a single piece of data needs to plot multiple points\u002Fbars) we want to plot on the x-axis.",[10,127,128],{},"Note that on Radial charts (Pie & Donut), this is the value that defines the label of the segment.",[91,130,132],{"id":131},"y","Y",[10,134,135],{},"Which property should be used to define the y-axis value, i.e. height of the bar or the y-coordinate of a point on a scatter chart.",[10,137,138],{},"Note that on Radial charts (Pie & Donut), this is the value that defines the size of the segment.",[91,140,142],{"id":141},"example-plotting-star-wars-character-heights","Example: Plotting Star Wars Character Heights",[10,144,145,146,153],{},"The ",[147,148,152],"a",{"href":149,"rel":150},"https:\u002F\u002Fswapi.dev\u002F",[151],"nofollow","Star Wars API"," is a free, open API that provides data on the Star Wars universe, an example API call can return details about particular characters, and the response is as follows:",[155,156,160],"pre",{"className":157,"code":158,"language":159,"meta":32,"style":32},"language-json shiki shiki-themes github-light github-dark","[{\n    \"name\":\"Luke Skywalker\",\n    \"height\":\"172\",\n    \"mass\":\"77\",\n    \"hair_color\":\"blond\",\n    \"skin_color\":\"fair\",\n    \"eye_color\":\"blue\",\n    \"birth_year\":\"19BBY\",\n    \"gender\":\"male\",\n    ...\n}, {\n    ...\n}]\n","json",[82,161,162,171,188,201,214,227,240,253,266,279,286,292,297],{"__ignoreMap":32},[163,164,167],"span",{"class":165,"line":166},"line",1,[163,168,170],{"class":169},"sVt8B","[{\n",[163,172,174,178,181,185],{"class":165,"line":173},2,[163,175,177],{"class":176},"sj4cs","    \"name\"",[163,179,180],{"class":169},":",[163,182,184],{"class":183},"sZZnC","\"Luke Skywalker\"",[163,186,187],{"class":169},",\n",[163,189,191,194,196,199],{"class":165,"line":190},3,[163,192,193],{"class":176},"    \"height\"",[163,195,180],{"class":169},[163,197,198],{"class":183},"\"172\"",[163,200,187],{"class":169},[163,202,204,207,209,212],{"class":165,"line":203},4,[163,205,206],{"class":176},"    \"mass\"",[163,208,180],{"class":169},[163,210,211],{"class":183},"\"77\"",[163,213,187],{"class":169},[163,215,217,220,222,225],{"class":165,"line":216},5,[163,218,219],{"class":176},"    \"hair_color\"",[163,221,180],{"class":169},[163,223,224],{"class":183},"\"blond\"",[163,226,187],{"class":169},[163,228,230,233,235,238],{"class":165,"line":229},6,[163,231,232],{"class":176},"    \"skin_color\"",[163,234,180],{"class":169},[163,236,237],{"class":183},"\"fair\"",[163,239,187],{"class":169},[163,241,243,246,248,251],{"class":165,"line":242},7,[163,244,245],{"class":176},"    \"eye_color\"",[163,247,180],{"class":169},[163,249,250],{"class":183},"\"blue\"",[163,252,187],{"class":169},[163,254,256,259,261,264],{"class":165,"line":255},8,[163,257,258],{"class":176},"    \"birth_year\"",[163,260,180],{"class":169},[163,262,263],{"class":183},"\"19BBY\"",[163,265,187],{"class":169},[163,267,269,272,274,277],{"class":165,"line":268},9,[163,270,271],{"class":176},"    \"gender\"",[163,273,180],{"class":169},[163,275,276],{"class":183},"\"male\"",[163,278,187],{"class":169},[163,280,282],{"class":165,"line":281},10,[163,283,285],{"class":284},"s7hpK","    ...\n",[163,287,289],{"class":165,"line":288},11,[163,290,291],{"class":169},"}, {\n",[163,293,295],{"class":165,"line":294},12,[163,296,285],{"class":284},[163,298,300],{"class":165,"line":299},13,[163,301,302],{"class":169},"}]\n",[10,304,305],{},"We can configure a chart with the following \"Mapping\" options:",[10,307,308,312],{},[29,309],{"alt":310,"dataZoomable":32,"src":311},"Example mapping of data to a UI Chart for data coming from the Star Wars API","\u002Fblog\u002F2024\u002F07\u002Fimages\u002Fui-chart-bar-sw-config.png",[35,313,310],{},[10,315,316],{},"and this would then be the resulting chart:",[10,318,319,323],{},[29,320],{"alt":321,"dataZoomable":32,"src":322},"Example bar chart showing heights of Star Wars characters","\u002Fblog\u002F2024\u002F07\u002Fimages\u002Fui-chart-bar-sw.png",[35,324,321],{},[10,326,327,328,331,332,335],{},"Note, the chart takes in all of the data sent to it, uses the ",[82,329,330],{},"name"," field to define where on the x-axis the data should be plotted, and the ",[82,333,334],{},"height"," field to define the height of the bar (the y-axis).",[10,337,338,339],{},"You can read more about this example, and access the flow itself in our documentation ",[147,340,343],{"href":341,"rel":342},"https:\u002F\u002Fdashboard.flowfuse.com\u002Fnodes\u002Fwidgets\u002Fui-chart.html#bar-charts",[151],"here",[14,345,347],{"id":346},"live-dashboard-demo","Live Dashboard Demo",[10,349,350,354],{},[29,351],{"alt":352,"dataZoomable":32,"src":353},"Screenshot of our new interactive Dashboard to demonstrate how charts render in FlowFuse Dashboard","\u002Fblog\u002F2024\u002F07\u002Fimages\u002Fdashboard-interactive-docs.png",[35,355,352],{},[10,357,358,359,364],{},"With the new release also comes a new ",[147,360,363],{"href":361,"rel":362},"https:\u002F\u002Fdashboard-demos.flowfuse.cloud\u002Fdashboard\u002Fcharts-example",[151],"Public Demo Dashboard"," that we've made available for all to use and play with.",[10,366,367],{},"You can try it out, and interact with a range of different chart types, including the new Pie, Donut and Grouped Bar charts. We'll also be extending this soon to cover the full range of widgets available in FlowFuse Dashboard.",[10,369,370,371,108],{},"If you want more technical detail, you can also check out our online documentation ",[147,372,343],{"href":373,"rel":374},"https:\u002F\u002Fdashboard.flowfuse.com\u002Fnodes\u002Fwidgets\u002Fui-chart.html",[151],[14,376,378],{"id":377},"what-else-is-new","What else is new?",[10,380,381,382,108],{},"You can find the full 1.14.0 Release Notes ",[147,383,343],{"href":384,"rel":385},"https:\u002F\u002Fgithub.com\u002FFlowFuse\u002Fnode-red-dashboard\u002Freleases\u002Ftag\u002Fv1.14.0",[151],[10,387,388],{},"Just to highlight a few, particularly valuable, updates and fixes:",[390,391,392,400,405,408],"ul",{},[393,394,395,396,399],"li",{},"UI Button Group - Now supports ",[82,397,398],{},"msg.enabled"," to enable\u002Fdisable the widget.",[393,401,402,403,399],{},"UI Form - Now supports ",[82,404,398],{},[393,406,407],{},"UI Button - Color customisation now available, without needing to write overriding CSS.",[393,409,410,411,414],{},"UI Switch - Fix missing ",[82,412,413],{},"msg.topic"," when setting the topic to a static string.",[14,416,418],{"id":417},"whats-next","What's Next?",[10,420,421,422,425,426,430,431],{},"Work has already begun on the next release, ",[82,423,424],{},"1.15.0",", you can see what items we have queued up ",[147,427,343],{"href":428,"rel":429},"https:\u002F\u002Fgithub.com\u002Forgs\u002FFlowFuse\u002Fprojects\u002F15\u002Fviews\u002F1",[151],", if you've got any feedback or suggestions, please do let us know, and feel free to open new issues on our ",[147,432,435],{"href":433,"rel":434},"https:\u002F\u002Fgithub.com\u002FFlowFuse\u002Fnode-red-dashboard\u002Fissues",[151],"GitHub",[437,438,439],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .s7hpK, html code.shiki .s7hpK{--shiki-default:#B31D28;--shiki-default-font-style:italic;--shiki-dark:#FDAEB7;--shiki-dark-font-style:italic}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":32,"searchDepth":173,"depth":173,"links":441},[442,446,447,451,452,453],{"id":16,"depth":173,"text":17,"children":443},[444,445],{"id":24,"depth":190,"text":25},{"id":39,"depth":190,"text":40},{"id":51,"depth":173,"text":52},{"id":69,"depth":173,"text":70,"children":448},[449,450],{"id":73,"depth":190,"text":74},{"id":88,"depth":190,"text":89},{"id":346,"depth":173,"text":347},{"id":377,"depth":173,"text":378},{"id":417,"depth":173,"text":418},"md",{"navTitle":5,"excerpt":456},{"type":7,"value":457},[458],[10,459,12],{},true,"\u002Fblog\u002F2024\u002F07\u002Fdashboard-new-charts",{"title":5,"description":12},"blog\u002F2024\u002F07\u002Fdashboard-new-charts","VTyZCNZ4Pp-lkJyJzgCpmFfS800QeTUPl9gNYsX_yFI",1780070551997]