Learn how to connect realtime data to Plot.ly with the Firebase database and Angular 4 on the frontend. In this episode, I build three different graphs and charts designed to handle realtime data streams. 

Full Lesson: https://angularfirebase.com/lessons/realtime-charts-with-plot-ly/

Plot.ly JS: https://plot.ly/javascript/
2024-02-04T08:13:34.799Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
8785d16a-74a9-45d7-b8e6-6ad7c27d7fbe
a223285e28762c717eb6392acfbcef422685fbf0341c21edae4e27c61931f25d
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
In the age of big data and deep learning, data visualization is an extremely important tool for many applications.
In this episode, we're going to combine the Plotly JS library along with Angular and Firebase to create 3 different types of charts that are capable of handling real time data.
We'll start by building a basic 2 d line chart, and then we'll build up to a 3 d topographical chart.
Then we'll finish up with a ternary chart that's capable of staying in sync with the real time back end on Firebase.
The first step is to install the PlotlyJS library, which we can do with npm install plotly.js flag save.
Then add it to the script section in the angular dash CLI.json file.
It's worth noting that Plotly is a pretty big library.
So So if you wanna slim it down a little bit, go to your node modules and find just the script that you need for your app.
In this case, we're using the entire library, which is probably overkill for most situations.
Then in your typings dot d file, add the Plotly class so it's recognized by TypeScript.
Now we can start building our first line chart.
This chart will just be completely static just to show you the general concepts behind Plotly.
In the HTML, create an empty div, and then give it a template reference variable named chart.
Then in the component type script, we'll use view child as well as element ref.
Then we're going to build this chart service in the next step once we start using live data from Firebase, so you can ignore that for now.
And we'll also use the Lodash library.
So to get a hold of the div and the HTML, we use view child and then reference that chart variable that we name there.
Then we'll name it l in the TypeScript, which is more or less an Angular convention.
Then to actually build a Plotly chart, there are 3 basic variables that you need to be aware of.
First, we have element which is the HTML element that will be replaced by the chart.
And then we have data.
That's the actual data that's going to be displayed in the chart.
Here we have a few numbers on the x and y axis that will create a basic line chart with a curve.
The third variable is style, which defines the style options that vary from chart to chart.
And to put everything together, we just call plotly dot plot and pass it the element data and style.
Back in the app, we can see we get this simple line chart, but it's packed with a bunch of features from Plotly such as the ability to zoom in and zoom out.
You can save it as an image and do all kinds of different stuff to it.
So that was pretty simple.
Now let's build a 3 d chart that uses data from Firebase.
So I'm building a basic service here that injects the AngularFire database, then it returns the dataset we want as a Firebase list observable.
In this example, my database is a collection of arrays with each array having its own set of data points.
These data points correspond to the elevation of a mountain and I'll provide a link to the dataset in the description.
Now getting back to the component, we create a new function for this chart, but this time we pass it the data as an argument.
Like before we set the element variable, then we format the data specifically for 3 d charts.
So we pass the data as the z axis and set the type to surface.
Then for the layout or style, we set a few simple parameters here just to make the chart look And again, we call plotly dot plot and pass it these variables.
Now we need to pass the chart some data.
So we do this during n g on init by subscribing to the dataset in the database.
In this example, we don't expect our data to change.
So So we're just going to take 1 and then subscribe to it so we don't have a long running subscription, and then we'll pass the data from the subscription to the topo chart function.
Back in the app, you can see we get this really cool 3 d interactive chart based on our data in Firebase.
And there's a ton of ways you can customize this, so make sure to check out Plotly docs, and the community for more inspiration on what you can do.
So the last type of chart that we'll build is a chart that can to update its appearance based on real time data.
For this example, I have some user rankings that will rank a user based on their abilities as an analyst, designer, or developer.
And we're going to visualize this data on a ternary chart, which is basically just a triangle that compares 3 different types of data.
First, we're going to add a function to our service that will allow us to make this update in Firebase.
It just references a single data point and updates it with some new data.
Then in the component, we're going to subscribe to the data in ng on init.
But before we pass the data to the function, we're going to purge the chart existing in that element.
Then we'll go ahead and call the function that builds the chart.
But before we get there, let's create a function that will just randomize the data for a certain data point.
Then you can attach this function to a click event so the user can randomize the data just with a click of a button.
Now let's build this ternary chart.
We start by passing it the element as usual, then we map each of the 3 categories down to an array of its values.
In most cases, you'll need to map your data down to an array for it to work with any kind of data chart.
The rest of the code is mostly just presentational, so we just add a few options to give it with some nice looking styles.
Plotly has a big library of examples so you can usually find a good starting chart for most situations.
Now back in the app if we Click the button that says Realtime Update, we can see the red circle moving around the screen.
That's because it's actually being updated in the back end in Firebase.
That's it for real time charts with Plotly and Firebase.
If this video helped you, please like and scribe.
And if you want help building your own features, consider becoming a pro subscriber at angularfirebase.com.
You'll receive a free copy of my book as well as 1 on 1 project consulting.
Thanks for watching, and I'll see you next time.

Speaker 0: In the age of big data and deep learning, data visualization is an extremely important tool for many applications. In this episode, we're going to combine the Plotly JS library along with Angular and Firebase to create 3 different types of charts that are capable of handling real time data. We'll start by building a basic 2 d line chart, and then we'll build up to a 3 d topographical chart. Then we'll finish up with a ternary chart that's capable of staying in sync with the real time back end on Firebase. The first step is to install the PlotlyJS library, which we can do with npm install plotly.js flag save.

Then add it to the script section in the angular dash CLI.json file. It's worth noting that Plotly is a pretty big library. So So if you wanna slim it down a little bit, go to your node modules and find just the script that you need for your app. In this case, we're using the entire library, which is probably overkill for most situations. Then in your typings dot d file, add the Plotly class so it's recognized by TypeScript.

Now we can start building our first line chart. This chart will just be completely static just to show you the general concepts behind Plotly. In the HTML, create an empty div, and then give it a template reference variable named chart. Then in the component type script, we'll use view child as well as element ref. Then we're going to build this chart service in the next step once we start using live data from Firebase, so you can ignore that for now.

And we'll also use the Lodash library. So to get a hold of the div and the HTML, we use view child and then reference that chart variable that we name there. Then we'll name it l in the TypeScript, which is more or less an Angular convention. Then to actually build a Plotly chart, there are 3 basic variables that you need to be aware of. First, we have element which is the HTML element that will be replaced by the chart.

And then we have data. That's the actual data that's going to be displayed in the chart. Here we have a few numbers on the x and y axis that will create a basic line chart with a curve. The third variable is style, which defines the style options that vary from chart to chart. And to put everything together, we just call plotly dot plot and pass it the element data and style.

Back in the app, we can see we get this simple line chart, but it's packed with a bunch of features from Plotly such as the ability to zoom in and zoom out. You can save it as an image and do all kinds of different stuff to it. So that was pretty simple. Now let's build a 3 d chart that uses data from Firebase. So I'm building a basic service here that injects the AngularFire database, then it returns the dataset we want as a Firebase list observable.

In this example, my database is a collection of arrays with each array having its own set of data points. These data points correspond to the elevation of a mountain and I'll provide a link to the dataset in the description. Now getting back to the component, we create a new function for this chart, but this time we pass it the data as an argument. Like before we set the element variable, then we format the data specifically for 3 d charts. So we pass the data as the z axis and set the type to surface.

Then for the layout or style, we set a few simple parameters here just to make the chart look And again, we call plotly dot plot and pass it these variables. Now we need to pass the chart some data. So we do this during n g on init by subscribing to the dataset in the database. In this example, we don't expect our data to change. So So we're just going to take 1 and then subscribe to it so we don't have a long running subscription, and then we'll pass the data from the subscription to the topo chart function.

Back in the app, you can see we get this really cool 3 d interactive chart based on our data in Firebase. And there's a ton of ways you can customize this, so make sure to check out Plotly docs, and the community for more inspiration on what you can do. So the last type of chart that we'll build is a chart that can to update its appearance based on real time data. For this example, I have some user rankings that will rank a user based on their abilities as an analyst, designer, or developer. And we're going to visualize this data on a ternary chart, which is basically just a triangle that compares 3 different types of data.

First, we're going to add a function to our service that will allow us to make this update in Firebase. It just references a single data point and updates it with some new data. Then in the component, we're going to subscribe to the data in ng on init. But before we pass the data to the function, we're going to purge the chart existing in that element. Then we'll go ahead and call the function that builds the chart.

But before we get there, let's create a function that will just randomize the data for a certain data point. Then you can attach this function to a click event so the user can randomize the data just with a click of a button. Now let's build this ternary chart. We start by passing it the element as usual, then we map each of the 3 categories down to an array of its values. In most cases, you'll need to map your data down to an array for it to work with any kind of data chart.

The rest of the code is mostly just presentational, so we just add a few options to give it with some nice looking styles. Plotly has a big library of examples so you can usually find a good starting chart for most situations. Now back in the app if we Click the button that says Realtime Update, we can see the red circle moving around the screen. That's because it's actually being updated in the back end in Firebase. That's it for real time charts with Plotly and Firebase.

If this video helped you, please like and scribe. And if you want help building your own features, consider becoming a pro subscriber at angularfirebase.com. You'll receive a free copy of my book as well as 1 on 1 project consulting. Thanks for watching, and I'll see you next time.
In the age of big data and deep learning, data visualization is an extremely important tool for many applications. In this episode, we're going to combine the Plotly JS library along with Angular and Firebase to create 3 different types of charts that are capable of handling real time data.
visualization
databases
data management
data
deep learning
We'll start by building a basic 2 d line chart, and then we'll build up to a 3 d topographical chart. Then we'll finish up with a ternary chart that's capable of staying in sync with the real time back end on Firebase. The first step is to install the PlotlyJS library, which we can do with npm install plotly.js flag save. Then add it to the script section in the angular dash CLI.json file. It's worth noting that Plotly is a pretty big library. So So if you wanna slim it down a little bit, go to your node modules and find just the script that you need for your app.
In this case, we're using the entire library, which is probably overkill for most situations. Then in your typings dot d file, add the Plotly class so it's recognized by TypeScript. Now we can start building our first line chart. This chart will just be completely static just to show you the general concepts behind Plotly.
programming
In the HTML, create an empty div, and then give it a template reference variable named chart. Then in the component type script, we'll use view child as well as element ref. Then we're going to build this chart service in the next step once we start using live data from Firebase, so you can ignore that for now. And we'll also use the Lodash library. So to get a hold of the div and the HTML, we use view child and then reference that chart variable that we name there. Then we'll name it l in the TypeScript, which is more or less an Angular convention. Then to actually build a Plotly chart, there are 3 basic variables that you need to be aware of.
First, we have element which is the HTML element that will be replaced by the chart. And then we have data. That's the actual data that's going to be displayed in the chart. Here we have a few numbers on the x and y axis that will create a basic line chart with a curve.
data
data analysis
The third variable is style, which defines the style options that vary from chart to chart. And to put everything together, we just call plotly dot plot and pass it the element data and style. Back in the app, we can see we get this simple line chart, but it's packed with a bunch of features from Plotly such as the ability to zoom in and zoom out.
You can save it as an image and do all kinds of different stuff to it. So that was pretty simple. Now let's build a 3 d chart that uses data from Firebase. So I'm building a basic service here that injects the AngularFire database, then it returns the dataset we want as a Firebase list observable. In this example, my database is a collection of arrays with each array having its own set of data points. These data points correspond to the elevation of a mountain and I'll provide a link to the dataset in the description. Now getting back to the component, we create a new function for this chart, but this time we pass it the data as an argument. Like before we set the element variable, then we format the data specifically for 3 d charts.
databases
data
data analysis
data management
So we pass the data as the z axis and set the type to surface.
Then for the layout or style, we set a few simple parameters here just to make the chart look And again, we call plotly dot plot and pass it these variables. Now we need to pass the chart some data. So we do this during n g on init by subscribing to the dataset in the database. In this example, we don't expect our data to change. So So we're just going to take 1 and then subscribe to it so we don't have a long running subscription, and then we'll pass the data from the subscription to the topo chart function. Back in the app, you can see we get this really cool 3 d interactive chart based on our data in Firebase. And there's a ton of ways you can customize this, so make sure to check out Plotly docs, and the community for more inspiration on what you can do. So the last type of chart that we'll build is a chart that can to update its appearance based on real time data. For this example, I have some user rankings that will rank a user based on their abilities as an analyst, designer, or developer. And we're going to visualize this data on a ternary chart, which is basically just a triangle that compares 3 different types of data. First, we're going to add a function to our service that will allow us to make this update in Firebase. It just references a single data point and updates it with some new data. Then in the component, we're going to subscribe to the data in ng on init. But before we pass the data to the function, we're going to purge the chart existing in that element. Then we'll go ahead and call the function that builds the chart.
data management
data analysis
databases
data
visualization
But before we get there, let's create a function that will just randomize the data for a certain data point. Then you can attach this function to a click event so the user can randomize the data just with a click of a button. Now let's build this ternary chart. We start by passing it the element as usual, then we map each of the 3 categories down to an array of its values. In most cases, you'll need to map your data down to an array for it to work with any kind of data chart. The rest of the code is mostly just presentational, so we just add a few options to give it with some nice looking styles. Plotly has a big library of examples so you can usually find a good starting chart for most situations.
data
data management
databases
visualization
Now back in the app if we Click the button that says Realtime Update, we can see the red circle moving around the screen.
That's because it's actually being updated in the back end in Firebase. That's it for real time charts with Plotly and Firebase. If this video helped you, please like and scribe. And if you want help building your own features, consider becoming a pro subscriber at angularfirebase.com. You'll receive a free copy of my book as well as 1 on 1 project consulting.
youtube
Thanks for watching, and I'll see you next time.
In the age of big data and deep learning, data visualization is an extremely important tool for many applications. In this episode, we're going to combine the Plotly JS library along with Angular and Firebase to create 3 different types of charts that are capable of handling real time data. We'll start by building a basic 2 d line chart, and then we'll build up to a 3 d topographical chart. Then we'll finish up with a ternary chart that's capable of staying in sync with the real time back end on Firebase. The first step is to install the PlotlyJS library, which we can do with npm install plotly.js flag save. Then add it to the script section in the angular dash CLI.json file. It's worth noting that Plotly is a pretty big library. So So if you wanna slim it down a little bit, go to your node modules and find just the script that you need for your app. In this case, we're using the entire library, which is probably overkill for most situations. Then in your typings dot d file, add the Plotly class so it's recognized by TypeScript. Now we can start building our first line chart. This chart will just be completely static just to show you the general concepts behind Plotly. In the HTML, create an empty div, and then give it a template reference variable named chart. Then in the component type script, we'll use view child as well as element ref. Then we're going to build this chart service in the next step once we start using live data from Firebase, so you can ignore that for now. And we'll also use the Lodash library. So to get a hold of the div and the HTML, we use view child and then reference that chart variable that we name there. Then we'll name it l in the TypeScript, which is more or less an Angular convention. Then to actually build a Plotly chart, there are 3 basic variables that you need to be aware of. First, we have element which is the HTML element that will be replaced by the chart. And then we have data. That's the actual data that's going to be displayed in the chart. Here we have a few numbers on the x and y axis that will create a basic line chart with a curve. The third variable is style, which defines the style options that vary from chart to chart. And to put everything together, we just call plotly dot plot and pass it the element data and style. Back in the app, we can see we get this simple line chart, but it's packed with a bunch of features from Plotly such as the ability to zoom in and zoom out. You can save it as an image and do all kinds of different stuff to it. So that was pretty simple. Now let's build a 3 d chart that uses data from Firebase. So I'm building a basic service here that injects the AngularFire database, then it returns the dataset we want as a Firebase list observable. In this example, my database is a collection of arrays with each array having its own set of data points. These data points correspond to the elevation of a mountain and I'll provide a link to the dataset in the description. Now getting back to the component, we create a new function for this chart, but this time we pass it the data as an argument. Like before we set the element variable, then we format the data specifically for 3 d charts. So we pass the data as the z axis and set the type to surface. Then for the layout or style, we set a few simple parameters here just to make the chart look And again, we call plotly dot plot and pass it these variables. Now we need to pass the chart some data. So we do this during n g on init by subscribing to the dataset in the database. In this example, we don't expect our data to change. So So we're just going to take 1 and then subscribe to it so we don't have a long running subscription, and then we'll pass the data from the subscription to the topo chart function. Back in the app, you can see we get this really cool 3 d interactive chart based on our data in Firebase. And there's a ton of ways you can customize this, so make sure to check out Plotly docs, and the community for more inspiration on what you can do. So the last type of chart that we'll build is a chart that can to update its appearance based on real time data. For this example, I have some user rankings that will rank a user based on their abilities as an analyst, designer, or developer. And we're going to visualize this data on a ternary chart, which is basically just a triangle that compares 3 different types of data. First, we're going to add a function to our service that will allow us to make this update in Firebase. It just references a single data point and updates it with some new data. Then in the component, we're going to subscribe to the data in ng on init. But before we pass the data to the function, we're going to purge the chart existing in that element. Then we'll go ahead and call the function that builds the chart. But before we get there, let's create a function that will just randomize the data for a certain data point. Then you can attach this function to a click event so the user can randomize the data just with a click of a button. Now let's build this ternary chart. We start by passing it the element as usual, then we map each of the 3 categories down to an array of its values. In most cases, you'll need to map your data down to an array for it to work with any kind of data chart. The rest of the code is mostly just presentational, so we just add a few options to give it with some nice looking styles. Plotly has a big library of examples so you can usually find a good starting chart for most situations. Now back in the app if we Click the button that says Realtime Update, we can see the red circle moving around the screen. That's because it's actually being updated in the back end in Firebase. That's it for real time charts with Plotly and Firebase. If this video helped you, please like and scribe. And if you want help building your own features, consider becoming a pro subscriber at angularfirebase.com. You'll receive a free copy of my book as well as 1 on 1 project consulting. Thanks for watching, and I'll see you next time.
In
in
the
the
age
age
of
of
big
big
data
data
and
and
deep
deep
learning,
learning
data
data
visualization
visualization
is
is
an
an
extremely
extremely
important
important
tool
tool
for
for
many
many
applications.
applications
In
in
this
this
episode,
episode
we're
we're
going
going
to
to
combine
combine
the
the
Plotly
plotly
JS
js
library
library
along
along
with
with
Angular
angular
and
and
Firebase
firebase
to
to
create
create
3
3
different
different
types
types
of
of
charts
charts
that
that
are
are
capable
capable
of
of
handling
handling
real
real
time
time
data.
data
We'll
we'll
start
start
by
by
building
building
a
a
basic
basic
2
2
d
d
line
line
chart,
chart
and
and
then
then
we'll
we'll
build
build
up
up
to
to
a
a
3
3
d
d
topographical
topographical
chart.
chart
Then
then
we'll
we'll
finish
finish
up
up
with
with
a
a
ternary
ternary
chart
chart
that's
that's
capable
capable
of
of
staying
staying
in
in
sync
sync
with
with
the
the
real
real
time
time
back
back
end
end
on
on
Firebase.
firebase
The
the
first
first
step
step
is
is
to
to
install
install
the
the
PlotlyJS
plotlyjs
library,
library
which
which
we
we
can
can
do
do
with
with
npm
npm
install
install
plotly.js
plotly.js
flag
flag
save.
save
Then
then
add
add
it
it
to
to
the
the
script
script
section
section
in
in
the
the
angular
angular
dash
dash
CLI.json
cli.json
file.
file
It's
it's
worth
worth
noting
noting
that
that
Plotly
plotly
is
is
a
a
pretty
pretty
big
big
library.
library
So
so
So
so
if
if
you
you
wanna
wanna
slim
slim
it
it
down
down
a
a
little
little
bit,
bit
go
go
to
to
your
your
node
node
modules
modules
and
and
find
find
just
just
the
the
script
script
that
that
you
you
need
need
for
for
your
your
app.
app
In
in
this
this
case,
case
we're
we're
using
using
the
the
entire
entire
library,
library
which
which
is
is
probably
probably
overkill
overkill
for
for
most
most
situations.
situations
Then
then
in
in
your
your
typings
typings
dot
dot
d
d
file,
file
add
add
the
the
Plotly
plotly
class
class
so
so
it's
it's
recognized
recognized
by
by
TypeScript.
typescript
Now
now
we
we
can
can
start
start
building
building
our
our
first
first
line
line
chart.
chart
This
this
chart
chart
will
will
just
just
be
be
completely
completely
static
static
just
just
to
to
show
show
you
you
the
the
general
general
concepts
concepts
behind
behind
Plotly.
plotly
In
in
the
the
HTML,
html
create
create
an
an
empty
empty
div,
div
and
and
then
then
give
give
it
it
a
a
template
template
reference
reference
variable
variable
named
named
chart.
chart
Then
then
in
in
the
the
component
component
type
type
script,
script
we'll
we'll
use
use
view
view
child
child
as
as
well
well
as
as
element
element
ref.
ref
Then
then
we're
we're
going
going
to
to
build
build
this
this
chart
chart
service
service
in
in
the
the
next
next
step
step
once
once
we
we
start
start
using
using
live
live
data
data
from
from
Firebase,
firebase
so
so
you
you
can
can
ignore
ignore
that
that
for
for
now.
now
And
and
we'll
we'll
also
also
use
use
the
the
Lodash
lodash
library.
library
So
so
to
to
get
get
a
a
hold
hold
of
of
the
the
div
div
and
and
the
the
HTML,
html
we
we
use
use
view
view
child
child
and
and
then
then
reference
reference
that
that
chart
chart
variable
variable
that
that
we
we
name
name
there.
there
Then
then
we'll
we'll
name
name
it
it
l
l
in
in
the
the
TypeScript,
typescript
which
which
is
is
more
more
or
or
less
less
an
an
Angular
angular
convention.
convention
Then
then
to
to
actually
actually
build
build
a
a
Plotly
plotly
chart,
chart
there
there
are
are
3
3
basic
basic
variables
variables
that
that
you
you
need
need
to
to
be
be
aware
aware
of.
of
First,
first
we
we
have
have
element
element
which
which
is
is
the
the
HTML
html
element
element
that
that
will
will
be
be
replaced
replaced
by
by
the
the
chart.
chart
And
and
then
then
we
we
have
have
data.
data
That's
that's
the
the
actual
actual
data
data
that's
that's
going
going
to
to
be
be
displayed
displayed
in
in
the
the
chart.
chart
Here
here
we
we
have
have
a
a
few
few
numbers
numbers
on
on
the
the
x
x
and
and
y
y
axis
axis
that
that
will
will
create
create
a
a
basic
basic
line
line
chart
chart
with
with
a
a
curve.
curve
The
the
third
third
variable
variable
is
is
style,
style
which
which
defines
defines
the
the
style
style
options
options
that
that
vary
vary
from
from
chart
chart
to
to
chart.
chart
And
and
to
to
put
put
everything
everything
together,
together
we
we
just
just
call
call
plotly
plotly
dot
dot
plot
plot
and
and
pass
pass
it
it
the
the
element
element
data
data
and
and
style.
style
Back
back
in
in
the
the
app,
app
we
we
can
can
see
see
we
we
get
get
this
this
simple
simple
line
line
chart,
chart
but
but
it's
it's
packed
packed
with
with
a
a
bunch
bunch
of
of
features
features
from
from
Plotly
plotly
such
such
as
as
the
the
ability
ability
to
to
zoom
zoom
in
in
and
and
zoom
zoom
out.
out
You
you
can
can
save
save
it
it
as
as
an
an
image
image
and
and
do
do
all
all
kinds
kinds
of
of
different
different
stuff
stuff
to
to
it.
it
So
so
that
that
was
was
pretty
pretty
simple.
simple
Now
now
let's
let's
build
build
a
a
3
3
d
d
chart
chart
that
that
uses
uses
data
data
from
from
Firebase.
firebase
So
so
I'm
i'm
building
building
a
a
basic
basic
service
service
here
here
that
that
injects
injects
the
the
AngularFire
angularfire
database,
database
then
then
it
it
returns
returns
the
the
dataset
dataset
we
we
want
want
as
as
a
a
Firebase
firebase
list
list
observable.
observable
In
in
this
this
example,
example
my
my
database
database
is
is
a
a
collection
collection
of
of
arrays
arrays
with
with
each
each
array
array
having
having
its
its
own
own
set
set
of
of
data
data
points.
points
These
these
data
data
points
points
correspond
correspond
to
to
the
the
elevation
elevation
of
of
a
a
mountain
mountain
and
and
I'll
i'll
provide
provide
a
a
link
link
to
to
the
the
dataset
dataset
in
in
the
the
description.
description
Now
now
getting
getting
back
back
to
to
the
the
component,
component
we
we
create
create
a
a
new
new
function
function
for
for
this
this
chart,
chart
but
but
this
this
time
time
we
we
pass
pass
it
it
the
the
data
data
as
as
an
an
argument.
argument
Like
like
before
before
we
we
set
set
the
the
element
element
variable,
variable
then
then
we
we
format
format
the
the
data
data
specifically
specifically
for
for
3
3
d
d
charts.
charts
So
so
we
we
pass
pass
the
the
data
data
as
as
the
the
z
z
axis
axis
and
and
set
set
the
the
type
type
to
to
surface.
surface
Then
then
for
for
the
the
layout
layout
or
or
style,
style
we
we
set
set
a
a
few
few
simple
simple
parameters
parameters
here
here
just
just
to
to
make
make
the
the
chart
chart
look
look
And
and
again,
again
we
we
call
call
plotly
plotly
dot
dot
plot
plot
and
and
pass
pass
it
it
these
these
variables.
variables
Now
now
we
we
need
need
to
to
pass
pass
the
the
chart
chart
some
some
data.
data
So
so
we
we
do
do
this
this
during
during
n
n
g
g
on
on
init
init
by
by
subscribing
subscribing
to
to
the
the
dataset
dataset
in
in
the
the
database.
database
In
in
this
this
example,
example
we
we
don't
don't
expect
expect
our
our
data
data
to
to
change.
change
So
so
So
so
we're
we're
just
just
going
going
to
to
take
take
1
1
and
and
then
then
subscribe
subscribe
to
to
it
it
so
so
we
we
don't
don't
have
have
a
a
long
long
running
running
subscription,
subscription
and
and
then
then
we'll
we'll
pass
pass
the
the
data
data
from
from
the
the
subscription
subscription
to
to
the
the
topo
topo
chart
chart
function.
function
Back
back
in
in
the
the
app,
app
you
you
can
can
see
see
we
we
get
get
this
this
really
really
cool
cool
3
3
d
d
interactive
interactive
chart
chart
based
based
on
on
our
our
data
data
in
in
Firebase.
firebase
And
and
there's
there's
a
a
ton
ton
of
of
ways
ways
you
you
can
can
customize
customize
this,
this
so
so
make
make
sure
sure
to
to
check
check
out
out
Plotly
plotly
docs,
docs
and
and
the
the
community
community
for
for
more
more
inspiration
inspiration
on
on
what
what
you
you
can
can
do.
do
So
so
the
the
last
last
type
type
of
of
chart
chart
that
that
we'll
we'll
build
build
is
is
a
a
chart
chart
that
that
can
can
to
to
update
update
its
its
appearance
appearance
based
based
on
on
real
real
time
time
data.
data
For
for
this
this
example,
example
I
i
have
have
some
some
user
user
rankings
rankings
that
that
will
will
rank
rank
a
a
user
user
based
based
on
on
their
their
abilities
abilities
as
as
an
an
analyst,
analyst
designer,
designer
or
or
developer.
developer
And
and
we're
we're
going
going
to
to
visualize
visualize
this
this
data
data
on
on
a
a
ternary
ternary
chart,
chart
which
which
is
is
basically
basically
just
just
a
a
triangle
triangle
that
that
compares
compares
3
3
different
different
types
types
of
of
data.
data
First,
first
we're
we're
going
going
to
to
add
add
a
a
function
function
to
to
our
our
service
service
that
that
will
will
allow
allow
us
us
to
to
make
make
this
this
update
update
in
in
Firebase.
firebase
It
it
just
just
references
references
a
a
single
single
data
data
point
point
and
and
updates
updates
it
it
with
with
some
some
new
new
data.
data
Then
then
in
in
the
the
component,
component
we're
we're
going
going
to
to
subscribe
subscribe
to
to
the
the
data
data
in
in
ng
ng
on
on
init.
init
But
but
before
before
we
we
pass
pass
the
the
data
data
to
to
the
the
function,
function
we're
we're
going
going
to
to
purge
purge
the
the
chart
chart
existing
existing
in
in
that
that
element.
element
Then
then
we'll
we'll
go
go
ahead
ahead
and
and
call
call
the
the
function
function
that
that
builds
builds
the
the
chart.
chart
But
but
before
before
we
we
get
get
there,
there
let's
let's
create
create
a
a
function
function
that
that
will
will
just
just
randomize
randomize
the
the
data
data
for
for
a
a
certain
certain
data
data
point.
point
Then
then
you
you
can
can
attach
attach
this
this
function
function
to
to
a
a
click
click
event
event
so
so
the
the
user
user
can
can
randomize
randomize
the
the
data
data
just
just
with
with
a
a
click
click
of
of
a
a
button.
button
Now
now
let's
let's
build
build
this
this
ternary
ternary
chart.
chart
We
we
start
start
by
by
passing
passing
it
it
the
the
element
element
as
as
usual,
usual
then
then
we
we
map
map
each
each
of
of
the
the
3
3
categories
categories
down
down
to
to
an
an
array
array
of
of
its
its
values.
values
In
in
most
most
cases,
cases
you'll
you'll
need
need
to
to
map
map
your
your
data
data
down
down
to
to
an
an
array
array
for
for
it
it
to
to
work
work
with
with
any
any
kind
kind
of
of
data
data
chart.
chart
The
the
rest
rest
of
of
the
the
code
code
is
is
mostly
mostly
just
just
presentational,
presentational
so
so
we
we
just
just
add
add
a
a
few
few
options
options
to
to
give
give
it
it
with
with
some
some
nice
nice
looking
looking
styles.
styles
Plotly
plotly
has
has
a
a
big
big
library
library
of
of
examples
examples
so
so
you
you
can
can
usually
usually
find
find
a
a
good
good
starting
starting
chart
chart
for
for
most
most
situations.
situations
Now
now
back
back
in
in
the
the
app
app
if
if
we
we
Click
click
the
the
button
button
that
that
says
says
Realtime
realtime
Update,
update
we
we
can
can
see
see
the
the
red
red
circle
circle
moving
moving
around
around
the
the
screen.
screen
That's
that's
because
because
it's
it's
actually
actually
being
being
updated
updated
in
in
the
the
back
back
end
end
in
in
Firebase.
firebase
That's
that's
it
it
for
for
real
real
time
time
charts
charts
with
with
Plotly
plotly
and
and
Firebase.
firebase
If
if
this
this
video
video
helped
helped
you,
you
please
please
like
like
and
and
scribe.
scribe
And
and
if
if
you
you
want
want
help
help
building
building
your
your
own
own
features,
features
consider
consider
becoming
becoming
a
a
pro
pro
subscriber
subscriber
at
at
angularfirebase.com.
angularfirebase.com
You'll
you'll
receive
receive
a
a
free
free
copy
copy
of
of
my
my
book
book
as
as
well
well
as
as
1
1
on
on
1
1
project
project
consulting.
consulting
Thanks
thanks
for
for
watching,
watching
and
and
I'll
i'll
see
see
you
you
next
next
time.
time
success
In this video, the speaker discusses how to create a 2 d line chart using the Plotly JS library and Angular and discharged a 3 d top pages chart using the honor file. They explain the process of building a chart using the client's data and setting variables for the chart. The speaker also discusses the use of a graph to update its appearance based on real time data and explains how to use the Re v a update function to randomize data for a certain point.
Realtime Graphs and Charts with Plotly and Firebase
In the age of big data and deep learning, data visualization is an extremely important tool for many applications. In this episode, we're going to combine the Plotly JS library along with Angular and Firebase to create 3 different types of charts that are capable of handling real time data. We'll start by building a basic 2 d line chart, and then we'll build up to a 3 d topographical chart. Then we'll finish up with a ternary chart that's capable of staying in sync with the real time back end on Firebase. The first step is to install the PlotlyJS library, which we can do with npm install plotly.js flag save. Then add it to the script section in the angular dash CLI.json file. It's worth noting that Plotly is a pretty big library. So So if you wanna slim it down a little bit, go to your node modules and find just the script that you need for your app. In this case, we're using the entire library, which is probably overkill for most situations. Then in your typings dot d file, add the Plotly class so it's recognized by TypeScript. Now we can start building our first line chart. This chart will just be completely static just to show you the general concepts behind Plotly. In the HTML, create an empty div, and then give it a template reference variable named chart. Then in the component type script, we'll use view child as well as element ref. Then we're going to build this chart service in the next step once we start using live data from Firebase, so you can ignore that for now. And we'll also use the Lodash library. So to get a hold of the div and the HTML, we use view child and then reference that chart variable that we name there. Then we'll name it l in the TypeScript, which is more or less an Angular convention. Then to actually build a Plotly chart, there are 3 basic variables that you need to be aware of. First, we have element which is the HTML element that will be replaced by the chart. And then we have data. That's the actual data that's going to be displayed in the chart. Here we have a few numbers on the x and y axis that will create a basic line chart with a curve. The third variable is style, which defines the style options that vary from chart to chart. And to put everything together, we just call plotly dot plot and pass it the element data and style. Back in the app, we can see we get this simple line chart, but it's packed with a bunch of features from Plotly such as the ability to zoom in and zoom out. You can save it as an image and do all kinds of different stuff to it. So that was pretty simple. Now let's build a 3 d chart that uses data from Firebase. So I'm building a basic service here that injects the AngularFire database, then it returns the dataset we want as a Firebase list observable. In this example, my database is a collection of arrays with each array having its own set of data points. These data points correspond to the elevation of a mountain and I'll provide a link to the dataset in the description. Now getting back to the component, we create a new function for this chart, but this time we pass it the data as an argument. Like before we set the element variable, then we format the data specifically for 3 d charts. So we pass the data as the z axis and set the type to surface. Then for the layout or style, we set a few simple parameters here just to make the chart look And again, we call plotly dot plot and pass it these variables. Now we need to pass the chart some data. So we do this during n g on init by subscribing to the dataset in the database. In this example, we don't expect our data to change. So So we're just going to take 1 and then subscribe to it so we don't have a long running subscription, and then we'll pass the data from the subscription to the topo chart function. Back in the app, you can see we get this really cool 3 d interactive chart based on our data in Firebase. And there's a ton of ways you can customize this, so make sure to check out Plotly docs, and the community for more inspiration on what you can do. So the last type of chart that we'll build is a chart that can to update its appearance based on real time data. For this example, I have some user rankings that will rank a user based on their abilities as an analyst, designer, or developer. And we're going to visualize this data on a ternary chart, which is basically just a triangle that compares 3 different types of data. First, we're going to add a function to our service that will allow us to make this update in Firebase. It just references a single data point and updates it with some new data. Then in the component, we're going to subscribe to the data in ng on init. But before we pass the data to the function, we're going to purge the chart existing in that element. Then we'll go ahead and call the function that builds the chart. But before we get there, let's create a function that will just randomize the data for a certain data point. Then you can attach this function to a click event so the user can randomize the data just with a click of a button. Now let's build this ternary chart. We start by passing it the element as usual, then we map each of the 3 categories down to an array of its values. In most cases, you'll need to map your data down to an array for it to work with any kind of data chart. The rest of the code is mostly just presentational, so we just add a few options to give it with some nice looking styles. Plotly has a big library of examples so you can usually find a good starting chart for most situations. Now back in the app if we Click the button that says Realtime Update, we can see the red circle moving around the screen. That's because it's actually being updated in the back end in Firebase. That's it for real time charts with Plotly and Firebase. If this video helped you, please like and scribe. And if you want help building your own features, consider becoming a pro subscriber at angularfirebase.com. You'll receive a free copy of my book as well as 1 on 1 project consulting. Thanks for watching, and I'll see you next time.
In this video, the speaker discusses how to create a 2 d line chart using the Plotly JS library and Angular and discharged a 3 d top pages chart using the honor file. They explain the process of building a chart using the client's data and setting variables for the chart. The speaker also discusses the use of a graph to update its appearance based on real time data and explains how to use the Re v a update function to randomize data for a certain point.