More Google Charts for UniversalDashboard

psDevUK · April 28, 2020, 9:56pm

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 https://www.npmjs.com/package/react-google-charts#pie-chart into UD. I have created a github repository for this component which is located here:-
https://github.com/psDevUK/New-UDPieChart3D

Demo

3Dicon

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

Where can I get it…?

and is now on https://marketplace.universaldashboard.io/
https://marketplace.universaldashboard.io/Dashboard/UniversalDashboard.UDPieChart3D

Remember Stay Safe

BoSen29 · April 29, 2020, 9:51am

Speedy man!
Awesome chart, in record time

psDevUK · April 30, 2020, 12:41pm

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

Yo @BoSen29 so here is an OrgChart of my fam

3 days 3 component challenge

Might go for the sankey chart next…?

psDevUK · April 30, 2020, 7:11pm

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

psDevUK · May 1, 2020, 2:34pm

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…
https://marketplace.universaldashboard.io/Dashboard/UniversalDashboard.GoogleSankey
The official repository for this project is located here:-

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

psDevUK · May 2, 2020, 3:10pm

Another day another Chart

All the goodness for this chart is all on the marketplace:-
https://marketplace.universaldashboard.io/Dashboard/UniversalDashboard.GoogleBarChart

psDevUK · May 3, 2020, 9:38pm

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:-

New-GoogleHistogram

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

https://marketplace.universaldashboard.io/Dashboard/UniversalDashboard.GoogleHistogram

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.

psDevUK · May 10, 2020, 1:15pm

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:-

github.com

psDevUK/New-GoogleTable/blob/master/README.md

# New-GoogleTable
A Google Table for UniversalDashboard based on https://www.npmjs.com/package/react-google-charts

## As Always Please Support the Developer and buy the Enterprise license

## Google Table

**New-GoogleTable** is the name for this component and it does come in various formats on the developer site, but the bar chart
in a table format I saw the best display of chart as you can already place icons in a table in UniversalDashbaord.  So I wanted
to be able to produce a component that didn't already exist in UniversalDashboard.

## How To Use
  I should do more testing on the components I put together, but as long as they work and display the data provided then in my book
  that is a pass, then I look to build the next component.  So whilst proving this component does work I did find it to be a bit
  **picky** on how the data is provided.  So please remember that when using this component, it is **picky** on how the data is 
  provided.
  
## Parameters
    **-Data** supplied in a two dimensional array that has a header and must make sure the number is an integer (see demo)
    **-Width** defines the width of the table to be displayed defaulted to 500px

This file has been truncated. show original

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

Enjoy!

tom.obrien · September 29, 2020, 10:08am

@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.

psDevUK · September 29, 2020, 10:18am

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 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.

tom.obrien · September 29, 2020, 10:31am

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

psDevUK · September 29, 2020, 11:08am

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…

tom.obrien · September 29, 2020, 11:15am

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.

psDevUK · September 29, 2020, 11:40am

Ah ok, I thought you were on about the Google Table component…will have a butchers at the documentation… https://react-google-charts.com/bar-chart
…and yeah I see you can customise the colours 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">
        <Chart
          chartType={this.props.chartType}
          width={this.props.width}
          height={this.props.height}
          loader={<div>Loading Chart</div>}
          data={this.props.data}
          options={{
            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,
          }}
          chartEvents={[
            {
              eventName: 'animationfinish',
              callback: () => {
                console.log('Animation Finished')
              },
            },
          ]}
        />
      </div>
    )
  }
}

export default GoogleBarChart

psDevUK · September 29, 2020, 9:38pm

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 in version 1.0.2 which has just been published

tom.obrien · September 30, 2020, 9:13am

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.

psDevUK · September 30, 2020, 11:51am

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 https://github.com/psDevUK/New-GoogleBarChart/blob/master/README.md 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

Topic		Replies	Views
Google Gantt Chart for UniversalDashboard Universal Dashboard Show Off gantt , gantt-chart	2	1145	February 11, 2020
Feature request: New-UDMermaidChart? PowerShell Universal	4	403	February 23, 2022
Updated UD Gauge component Universal Dashboard Show Off	6	2148	December 8, 2019
UDChart vs. UDChartJS PowerShell Universal	2	514	October 9, 2020
Best Practice - Check Universal Dashboard	4	604	June 20, 2020