►
From YouTube: Canviz Power Apps Charting Components
Description
Todd Baginski (@toddbaginski) and Matt Schuessler (@mattschues) of Canviz have been working on Power Apps charting components for much of 2019 and have graciously decided to give them to the community. This component includes nine of the most commonly requested charting visuals (i.e. Scatter, solid gauge, Radar, Candlestick, funnel, and Gannt!).
View on GitHub https://aka.ms/AAa276m
Taken from the October Power Apps community call https://youtu.be/AxdFVpkAt5Q
Stay connected
Twitter https://twitter.com/microsoft365dev
YouTube https://aka.ms/M365DevYouTube
Blogs https://aka.ms/M365DevBlog
A
A
A
So
you
can
see.
There's
eight
different
types
of
charts,
plus
a
gantt
chart
that
you
can
make
now.
The
important
thing
that
you'll
notice
in
this
repository
is
that
this
ms
app
file-
this
is
actually
the
chart
component
that
you
will
import
into
your
power
app
to
use
them
to
get
started.
You
click
this
link
down
here.
That
says
quick
start
right
above
the
picture
and
when
you
click
quick
start,
it's
going
to
open
up
this
documentation
that
you
see
right
here.
A
A
A
A
A
So,
as
you
come
back
now
to
your
chart,
import
upload
file-
and
then
here
is
where
you
will
then
go
and
pick
that
one
that
you
just
downloaded-
here's
the
one
I
just
downloaded
right
now.
You
only
have
one
copy
within
that
hit
open
when
you
hit
open
those
charts
get
added
right
here,
so
the
one
called
chart
can
make
eight
different
types
of
chart.
The
one
called
gant
only
makes
a
gantt
chart
to
add
it
to
your
screen.
A
Go
to
the
screen.
You
want
it
on
open
the
custom
section
and
drag
the
chart
on
now
that
you've
dragged
the
chart
onto
your
screen.
What
you
can
do
is
you
can
resize
that
chart
to.
However,
you,
like
the
type
of
the
chart
right
here,
gets
set
with
this
property,
so
this
could
be
pi
scatter
line
bar,
etc
everything,
but
the
gant.
A
A
A
A
Perhaps
I'm
looking
at
the
legend
of
the
chart
and
saying
I
wish
I
would
have
that
in
a
different
spot
or
I
could
affect
how
that
looks.
Well,
you
can
do
that
with
the
legend
property
right
here.
I
can
turn
it
on
or
off
too.
Let's
say
I
want
to
move
it
to
the
top
I'll.
Just
go
like
that,
and
now
it's
at
the
top
of
my
chart,
if
I
didn't
want
it
I'll,
just
set
this
true
to
false,
or
I
can
bring
it
back
now
when
I
come
to
the
bottom
there's
a
couple.
A
Other
options
that
I
can
do
every
chart
is
going
to
come,
have
the
name
of
the
chart
and
then
a
name
of
a
property
of
some
particular
option
you
can
affect
about
it.
In
this
case,
the
pie
chart
is
saying
the
data
labels
are
turned
on,
because
this
is
true.
If
I
make
it
false
now,
you
can
see
they
disappear.
A
Finally,
my
data
section,
which
I
think
is
easier
to
look
at
in
the
top
up
here,
looks
like
this
data
is
bound
in
key
value
pairs
for
this
particular
type
of
chart.
Actually,
this
is
not
my
data
value
here.
It
is
there.
It
is
so
here's
the
different
data
that
I
have
in
the
chart.
Obviously,
I'm
showing
you
hard-coded
data
here,
which
may
or
may
not
probably
wouldn't
occur
in
a
real-life
chart,
but,
as
you
can
see,
as
I
change
it,
the
chart
reacts
immediately.
B
Thanks
todd,
hi
everybody,
so
first
things.
First,
let's
look
at
what
the
schema
is
for
a
gantt
chart.
Let's
go
ahead
and
click
on
the
chart
and
then
we'll
click
on
data,
and
here
we
can
see
what
it's
looking
for.
So
real
simple.
We
have
this
property,
which
right
now
is
just
set
to
a
static
group
of
values,
as
well
as
the
labels,
so
the
legend
down
here
on
the
bottom
right
now.
B
The
labels
on
the
left
hand,
row
side
and
then
the
meat
of
the
chart,
which
is
the
intervals
table
and
that's
just
looking
for
values
of
start
date
and
date,
color
index,
which
this
correlates
to
the
color
table
of
what
colors
can
be
used.
So
the
first
value
in
in
the
color
table
will
correlate
to
this
and
as
well
as
the
process
index
which
aligns
for
which
row
you
want
to
be
on
the
gantt
chart.
B
So
this
is
the
static
data,
but
first
so
we're
going
to
be
switching
it
over
to
dynamics.
So
let's
go
ahead
and
look
at
my
data
source
and
I
have
a
simple
sharepoint
list
here:
called
project
tasks.
I
have
a
title
row,
a
start
date
and
end
date
and
that's
the
core
of
what
you
need
now.
I
have
a
couple
other
columns
project
name
and
assigned
to
because
you
can
really
make
this
dynamic
and
and
add
a
lot
more.
You
know
a
lot
more
options.
B
You
have
disguise
the
limit
really
so
now
that
we've
seen
the
data
source,
let's
go
ahead
and
let's
look
at
I'm
going
to
switch
powerapps
screens,
and
so
here
we
see
a
gantt
chart
with
some
of
my
data.
So
we
see
the
labels
and
the
different
days,
and
so
let's
go
look
in
and
find
out
how
to
do
this.
So
let's
switch
over
or
let's
click
on
the
data
property
and
actually
might
not
be
what
you
expect.
B
B
Let's
go
ahead
and
switch
back.
Okay,
so
that's
step
one,
and
actually
we
can
go
ahead
and
quickly
view
the
collection
project
tasks
here.
So
here
you
can
see
the
collection's
been
built,
switching
back
okay,
so
next
up
is-
and
this
was
an
actually
an
optional
thing-
I'm
using
the
titles
for
these
tests
on
both
the
legend
and
the
rows.
So
I
just
set
a
variable
called
titles.
I
ran
a
forall
function
and
just
collected
those,
and
by
doing
that
I
was
able
to
call
this
once
and
you
can
see
oops.
B
B
So
I
have
this
wrapped
in
a
global
variable,
but
what
we
need
here
is
so
then
you
just
assign
the
legends
to
our
titles
variable
and
which
is
the
table
and
same
thing
for
this
c
labels,
property
and
then
the
intervals.
So
again,
I
do
a
forall
function
for
all
items
in
our
project
task
collection
and
then
I
just
assign
the
start.
Property
with
my
start
date.
B
So
I
set
a
variable
of
today
and
formatted
it
to
be
a
short
date
format,
because
that's
what
the
schema
is
looking
for-
and
I
also
made
another
variable
called
var
three
months
and
basically
same
type
of
thing,
but
I
added
use
the
date,
add
function
and
that
in
90
days,
so
each
time
we're
looking
at
the
chart,
I'm
going
to
see
from
today
in
the
next
30
90
days.
Rather
so,
let's
go
back
to
the
chart
for
a
second
and
check
out
the
options
and
in
the
options
for
this
chart.
B
This
is
where
I
have
plugged
in
those
optional
dynamic
pieces.
So
for
gantt
start
date.
I
have
my
var
today
and
for
gain
end
date.
I
have
my
var
three
months
and
there's
lots
of
other
options
which
again
are
clearly
outlined
in
our
documentation
and
that's
how
this
chart
gets
built
all
right.
So
that's
how
easy
it
is
to
connect
to
a
sharepoint
data
source.
B
Thanks,
I
think
we
have
another
example
here,
just
a
similar
example-
and
this
is
all
outlined
in
our
we-
we
take
you
through
this.
This
is
connecting
to
a
excel
sheet
and
over
here
in
the
data
we
can
see,
we
have
a
movies
excel
spreadsheet
in
our
onedrive
location,
and
so
we
go
ahead
and
just
get
our
data
from
excel
that
populates,
a
collection
of
movies
and
votes,
and
then
we
just
bind
that
data
to
the
table.
B
We
can
see
how
easy
easy
that
is
so
again
same
type
of
method
that
you've
seen
before,
where
you're
setting
global
variable
again,
that
part
is
optional,
but
we
are
setting
the
labels
for
this
type
of
chart
running
through
and
grabbing
the
genres
of
our
collection.
And
then
this
is
a
key
value
pair.
So
we're
the
key
are
our
values
and
then
the
votes
is
the
values,
and
so
that
you
can
see
how
simple
it
is
to
make
this
dynamic
and
again.
This
is
our
outline
tutorial
in
our
documentation.
A
Quite
honestly,
it's
because
we
just
haven't
packaged
it
in
a
component
library
yet,
and
it's
in
our
component
and
we've
been
really
working
hard
on
the
documentation
recently
to
release
it.
So
people
can
understand
how
to
pick
it
up
and
use
it
easily
happy
to
see
it
done
if
you'd
like
to
help
out
with
it
like.
We
totally
encourage
contributions
on
all
this,
and
we
really
see
this
and
hope
that
this
is
like
the
foundation
of
an
awesome
set
of
charting
components
for
the
whole
community.
A
A
Last
month,
I
think
he's
got
a
good
idea:
real
quick
shout
out
to
emmanuel
gallis
sancho,
harker,
raza
durani,
david
van
heerden
and
all
of
our
teammates
at
canvas
who
gave
us
feedback
on
this
and
helped
help
us
build
it
out.
So
we
could
get
it
to
the
point
where
everyone
can
use
it.
We
hope
you
all
enjoyed
a.