More Google Charts for UniversalDashboard

Greetings fellow dashboard users

Tonight on the keyboard I am announcing the release of a new component for UD requested by a UD member only yesterday…I bring you New-UDPieChart3D it is an implementation of into UD. I have created a github repository for this component which is located here:-



This was a simple demo I constructed to show it running in UD. The complete script for this is:-

Import-Module -Name UniversalDashboard
Import-Module -Name UniversalDashboard.UDPieChart3D
Get-UDDashboard | Stop-UDDashboard
Start-UDDashboard -Port 10005 -Dashboard (
    New-UDDashboard -Title "Powershell UniversalDashboard" -Content {
        $MultiArray = @()
        $MultiArray += , @('Name', 'Age' )
        $MultiArray += , @('Laila-Belle', 11)
        $MultiArray += , @('Pixie', 9)
        $MultiArray += , @('Zelda', 5)
        $MultiArray += , @('Aurora', 3)
        new-udpiechart3d -Id "PIECHART" -Title "New-UDPieChart3D" -data @($MultiArray)

The only parameters I am not using in this demo is the height and width, I have defaulted this to “400px” you can change this using either of these parameters…I hope this will be useful to more than the one community member who requested it :crazy_face:

Where can I get it…?

and is now on

Remember Stay Safe


Speedy man!
Awesome chart, in record time :slight_smile:

1 Like

I’m hoping to release the google orgchart tonight…I just need to understand the concept of laying it out better…I got it working which is a good thing, same as this but using a 3 level multdimension array as opposed to the 2 level multidimensional array that the piechart3d uses…I hope that is the correct wording…? Be nice if someone could script up a function for the multi-array part…sure I could do it, if I stopped creating new components :crazy_face:

Yo @BoSen29 so here is an OrgChart of my fam
3 days 3 component challenge :crazy_face:

Might go for the sankey chart next…?

BoomI have now pushed New-UDOrgChart to the powershell gallery which in-turn will sync to the marketplace…the repo for this component is here:-

and it is currently on the gallery here:-

Any questions please read the readme first…any-further questions please ask :crazy_face:


Another day another Google chart…today folks it is the Sankey chart…please find this on the gallery here:-

which will soon be replicated to the marketplace…
The official repository for this project is located here:-

which does have a readme and an example dashboard within the readme. :crazy_face:


Another day another Chart

All the goodness for this chart is all on the marketplace:-


All tagged out…

I guess I done too much developing as I cannot add any more tags to this post. Well the 6th day of component building I bring you:-


All the information for how to use this is on the readme

This will soon sync to the marketplace, it is on the powershell gallery if you search for psdevuk

Marketplace Link to download this component

Everything on how to use this component is documented on the marketplace. This may look a dead basic graph but I can personally see many uses for it to clearly display my data.


Another Google Chart In A Table Format

I have just pushed New-GoogleTable to the powershell gallery, which in-turn will appear on the marketplace. I have added a ReadMe here:-

And here is a demo of this component in action:-



@psDevUK every time I look for a component I find you’ve already created one so thank you again for this one too!

One question I have for you, do you know if it’s possible to change the colours of the bars? I’d quite like to fit them in with a specific colour theme.

Hello again @tom.obrien thanks for the kind words man. It is appreciated to know someone out there appreciates what you have done. Although this was a super cool component to develop, I am not actually using this on any of my current dashboards :roll_eyes: so maybe this might make another blog feature if I can get it to work…might mean I need to rebuild the component…will have to revisit this component and see what I can cook up. :+1:

That would be great. I think I might need to learn how to make custom components myself so I stop hassling you all the time :laughing:

Ok I have had a quick butchers at this, and you can only change the Text colours via CSS. The actual bar chart bit on the right is an actual PNG image.

So I was reading some of the documentation again…and it might be possible, but would mean rebuilding the component, and testing it out. I still use the old method for building as not switched over to powershell universal yet. But I have seen Adam has released some new docs and youtube for building new components for v3…

Ah interesting, I’m using v2.9 still too. It’s this bar graph that I’m looking to use to display some VM stats so it would be quite good to be able to colour the bars to distinguish between CPU and memory stats.

Ah ok, I thought you were on about the Google Table component…will have a butchers at the documentation…
…and yeah I see you can customise the colours :slight_smile: but it might mean me doing a version 1.0.1 to rebuild it and add this option. This is the current JSX file, and currently there is no colour option, so will need to add and rebuild…

import React from 'react';
import { render } from "react-dom";
import { Chart } from "react-google-charts";
class GoogleBarChart extends React.Component {

  // state is for keeping control state before or after changes.
  state = {
    height: this.props.height,
    width: this.props.width

  render() {
    return (
      <div className="GoogleBarChart">
          loader={<div>Loading Chart</div>}
            title: this.props.title,
            chartArea: { width: this.props.chartArea },
            isStacked: this.props.isStacked,
            backgroundColor: this.props.backgroundColor,
            chartArea: { width: this.props.chartArea, height: this.props.chartArea },
            legend: {
              position: this.props.position,
              textStyle: {
                fontSize: this.props.legendSize,
                color: this.props.legendColor
            titleTextStyle: {
              color: this.props.titleColor,
              fontSize: this.props.titleSize
            hAxis: {
              title: this.props.bottomTitle,
              minValue: this.props.minValue,
            vAxis: {
              title: this.props.verticalTitle,
            animation: {
              startup: true,
              easing: this.props.easing,
              duration: this.props.duration,
            enableInteractivity: true,
              eventName: 'animationfinish',
              callback: () => {
                console.log('Animation Finished')

export default GoogleBarChart

I now added a -Colors parameter which accepts an array of colours to be passed to it. I need to release this as 1.0.2 but proof here:-

Just need to edit the readme on the project page then upload it to the powershell gallery…

Boom just uploaded it to the powershell gallery which in-turn should reflect to the marketplace, also updated the readMe on the project page, but the request this morning is now possible :grinning: in version 1.0.2 which has just been published

1 Like

Amazing! Looks great. I’ll download it now and have a play around. You’re a credit to the UD community. Half of the components I use on my app are ones that you’ve made hah.

Well if you come across any other tweaks you would like making to any of the components I released just give me a shout like you did on this one, and I will do my best to incorporate it, if it is possible to do. I ended up doing this way past my bed-time last night, and forgot to change the tags in the module, so don’t think the marketplace has picked up the change, so might have to do a 1.0.3 to correct that mistake. I even updated the ReadMe before going to bed to document the additional parameter, and added it to the demo code as an example, but didn’t update the associated GIF
Thanks for using some of the components I made, it’s good to know there being put to use :grinning: