Hello, welcome back. In the previous
video, we made an app with JustPy.
This app contains two components. So
they are referred to as components in
JustPy. So this component here QDiv
and another component QDiv, they both
are added to the main component, which
is the QuasarPage. In this lecture, we
are going to add a third component,
which is going to be a Highchart graph,
which is still a component of JustPy.
So let's do this step by step. I am
going to create a new Python file where
I'll be writing this new app. So let's
name it average-rating-day. So average
rating by day.py, and I'm just
going to copy this code because we need
that and paste it here, and now we just
need to add the Highcharts component. So
let's take things step by step. The very
first step we want to go through is, we
want to find the proper graph that we
need, and there is a very good way to do
that, we can go to the Highcharts
documentation, and look at examples, at
the graph examples that they show on
that page, and then we can pick one of
them. So let's do that. Let's choose a
graph that we need. So go to your
browser, and just look for highcharts
docs on Google. You'll find this page
Highcharts Documentation.
[No audio]
So Highcharts
is also a JavaScript library to produce
plots. So just like Quasar, Quasar was a
JavaScript library. It's all related to
Highcharts, and Python is getting these
two libraries, these two frameworks
together, which is really great for us
Python programmers to use both of these
two modern JavaScript libraries from
Python. So here we are in the Highcharts
Documentation, and we want to go to
Chart and series types, and here, you're
going to see that we have different
types of charts. So in our case, I think
a Spline chart would be appropriate. So
if you go and click over Spline
chart, you're going to see this example
here. So it's about Temperature by
Altitudes. It has this Temperature axis
horizontally and this Altitude axis
vertically. Now, each graph provides the
code, the JavaScript code that produces
that particular graph, and you can see
that you can access it either from via
jsFiddle or CodePen, which are
basically two online code editor. So if
you click jsFiddle, it's going to open
up the code that produces that graph.
[No audio]
And every graph has its own code. So if
you go to a stream graph, you go to jsFiddle
again, it's going to show you the code
for that Stream graph. Anyway, let's go
back. So this is the graph we are
interested about, and here is the code
that produces that graph. So you can
also see a live version of the graph
here. If you change something here, it
will produce at graph. But I'm not saying
that you need to learn JavaScript, all
we need to do is you need to copy the
code that starts after comma of this
container here. So that means from this
curly bracket, you need to select it
[No audio]
and go down, down, until you see this
semicolon and this round parenthesis
and you want to copy up to this curly
bracket. So you want to include that
curly brackets. So press Ctrl C or go
there and copy it, and then go to Python,
and what we need to do is we want to
create a string. Let's create a
variable, let's say chart_definition is
equal to a string, I'm going to use
triple quotes, so six quotes, and I'm going
to split them. So three quotes here,
three quotes in here. Inside here, I'm
going to paste all that code. So again,
you have to be very careful here. This
code starts with this curly brackets
and then it goes chart and so on, and it
ends with this curly bracket. Now,
before I explain you what I'm doing
here, let me first make it work quickly,
and then I come back to the code and
explain you what's going on in here. So
once you have the code definition,
that's one, you want to go here, and let's
say hc for Highcharts, jp.High,
capital C, Charts. So that is the
component we want to use, a equal to wp,
so the standard argument, and now this
HighCharts component expects an options
arguments, which is equal to this
variable, which contains the JavaScript
code, chart_def, in my case.
[No audio]
That's it. Now, if I execute this code,
[No audio]
you see the app is running, Command click or
Ctrl click, and this is the web app
with the graph inside. So this was the
first step, getting the codes from the
Highcharts Documentation and pasting the
code inside your Python program. Now,
let me explain you the first step, what
we just did. So as I explained to you
HighCharts is a JavaScript library,
therefore, this here is JavaScript code.
But in this case, this is JSON, so
JavaScript uses JSON and JSON format is
a familiar format for Python. So it
looks like a dictionary. You can see it
starts with this curly brackets, and
then you have this key. So even though
it's a string, now currently, it's a
Python string, what happens when we do
this here is that JustPy will convert
that into a Python dictionary. So a real
object that Python can read and
manipulate. So JustPy will process this
dictionary, and it will render it as a
graph on the webpage. I can prove you
that Python has successfully read this
string as a dictionary by printing out.
So print
[No audio]
hc.options. So
options, because we pass it here as an
argument, this will become an attribute
of hc, and we can access it like that.
[No audio]
So there I will print out the
dictionary, and down here, I'll print
out also the type
of that hc.options, so
you can see what type it is, and Ctrl C
to interrupt the current instance of the
app, run again, and nothing will happen
now, because I haven't loaded any
instance of the page yet. So if I go to
the page, and then I go back here,
you're going to see that something was
printed out since when I loaded the
page, this app function is executed, and
therefore these two lines are executed.
So let's see. This is the dictionary,
right? It starts there, it ends here, is the
same dictionary that we pasted here as a
string. You also see that the type is
not exactly a dictionary. It's a
different type of dictionary that it is
like a Python dictionary plus, it allows
us to access the dictionary keys using a
'.' notation. So for example, let me
show you what that means. If you go here
to hc.options, and you say '.' again,
[No audio]
you can access all the keys of
this dictionary. For example, let's say
we want to change the title, this
title here, right? So we can access that
title key using .title, and then
this title also has a dictionary on its
own. Here, we can access the text of the
title using the '.' notation again. So
let me do that, .title.text, right.
title.text is a hierarchy. So let
me stop the app instance and run again.
Go and reload the page
[No audio]
and see what we get printed out this time.
You see we got access to the value of that text
key, which was that title.
[No audio]
Now that allows us to change the title to
something else, like Average Rating by
Day. So let me stop the instance, run
again, reload,
[No audio]
and you see that the
title has changed to Average Rating by
Day. What I'm trying to get to is that
you can change everything from this
graph, anything that you like, anything
that you need to change from this graph,
and, of course, our first interest is to
change the data of this graph, because
currently, you see that the graph has a series key,
[No audio]
and this series key
has a name, Temperature, and the data,
these are the data that are being
plotted on the graph. So you see a 0, 15,
10, -50. So you see, for example,
15 is the temperature, 0 is a
kilometers, and then we have, as I said,
10, -50. So 10 kilometers altitude,
and the temperature is around -50.
So those are the data. Let's change
those data to something else.
[No audio]
To do that, we need to get access to
hc.options.series,
[No audio]
right, series. And
series is a list. So you have to be very
careful here, you have to understand
Python data structures and this is an
excellent, actually excellent practice
to really understand and level up your
skills with Python data structures, such
as lists and dictionaries. So series is
a key, and the value of this key is a
list, and that list is made off a
dictionary. So it has only one item,
this list, and that item is the
dictionary, then this dictionary has two
keys, a name key and a data key. The
name key has as value Temperature, the
data key has as value this list. So
it's one list with multiple values as
lists, as items. It's a list of lists. So
the second list, the third list, and so
on. And so far this gives us this
list, right? And out of that list, we
want the first item, so that will be
item with index 0, right? So we is the
the dictionary, that means this far
we have a dictionary.
[No audio]
Out of the dictionary, we want .data.
So that now is that list. We have access to that
list, and we can change that, we can set
a new value, a new list to that list. For example,
[No audio]
let me create some dummy data, 3, 4,
[No audio]
6, 7,
[No audio]
8, 9. So we have three points. Let me
stop the app, run again,
[No audio]
reload, and this is a new graph.
[No audio]
So again, the data were 3, 4, 6, 7, 8, 9.
3, 4, so 3 is the
x. So this is an reverse graph,
actually. So 3 is the y, 4 is the
x. If you want to reverse this graph, if
you don't feel comfortable with that,
you can go here and change that to false,
and you could also change this
data directly here without having to
change them here through the dictionary.
But later on, we are going to inject
DataFrames, so columns from DataFrames,
and this is a proper way to do
that. So this one here, because it
allows us to work with a dictionary
instead of working with a string and
the string is not a data structure
designed to hold data inside. But
anyway, for simple things like that, you
can just change the values directly
here. So inverted out, set it to false
and stop and run, reload,
[No audio]
and now the graph is different. So you see the
Altitude is down here, the Temperature
is in the y axis now. All right, so I
manually typed down some data here. But
this is not what real life looks like.
So in real life, you'll not have the data
in this form, as usually you have them
in a DataFrame in a csv file, just
like we have them in our app. So we have
the data in the reviews.csv and
server format will be slightly
different. Usually, we're going to have
something like an x array for the x axis,
and we should look, let's say, 3,
6, and 8, and then we have y equal
to 4, 7, and 9. So not like
that. Therefore, our goal is to turn
that those two lists into this list. How
do we do that? We do that using the zip
object, which basically produces that
kind of list. So in this format with
pairs of lists, and that expects x and y. So
two lists. However, this is not a list
yet. This is a zip object, I can show
you that you in a Python Shell.
[No audio]
So let's say we have this list,
and we have that list,
[No audio]
and zip x, y is going to
still be a zip object. You want to
convert that zip object into a list
using the list function, so x and y.
[No audio]
Now we get that list that we were expecting,
therefore, we can get that list and use
it there. Now, if I go to the other
Terminal, here I stop the app, run it again,
[No audio]
reload, and we still get the same
graph, so with those data.
[No audio]
Now, what if
these are coming from a DataFrame? So
that brings us to our app with our
reviews data. So let me go over to the
code we were working on Jupyter,
[No audio]
which is this one in here. So we load
the DataFrame with that code. I'm going
to copy that and paste it here on top
after importing JustPy. Right? We have
this data DataFrame now. And what
else did we have to calculate the
average rating? Here we had this day_average
DataFrame, which was an
aggregated version of the data DataFrame.
[No audio]
So I'm going to copy these two
lines, and I'm going to paste them in
here. So day_average is the DataFrame we
are interested about, and it has an
index, which is going to be the date and
a rating column, which has the average
ratings for every day. So you can, just
to refresh your memory, it looks like this.
Right? Now, instead of x, we would
have day_average the DataFrame
.index. So that will be used as the x
axis, and then for y, we would have day_average
[No audio]
Rating, so that column. So
these are treated as two lists by zip
and zip, then we'll pair them up. So it
will create a pair of date and rating.
So for example, it will, on the
background, it will look like a list of
lists as I explained to you. So the
first date would be like 2021-3-3,
and the rating 4.51, let's say and so on,
the next date, and you get
the idea. So let's try this out.
[No audio]
It will not work and I'll tell you why.
[No audio]
So as I told you, we get an empty graph and
no errors. The reason this doesn't work
is that Highcharts considers the date,
so those kinds of data, it considers
them as categories types of data,
not numbers, and in that case, you need
to provide this data in another way, and
that is through
options.xAxis.categories.
So what is that? Well, x axis is actually here,
[No audio]
and we are doing
xAxis.categories. Now, you don't
see a categories key here, but we are
creating that key,
[No audio]
and that is going to be equal to
list day_average.index.
So, we are converting that to a list and
providing that list to that categories.
This is a list of date, and then for
data, all we have to do is convert to a
list, the rating column. Right. Let me
stop the script and see what we will get this time.
[No audio]
Refresh and boom, we get the
graph that we were expecting. The graph
is interactive, but you see that we
have some of the labels here and some titles
for the axis which are from the old
example, so Altitude and Temperature,
but we can change them. So, I'll
suggest you can change them directly in
the JavaScript code. So you can change
the text of the title from here, you can
change the subtitle from there. So, I
believe that is easy to do in the code.
Just to give you a quick summary, what
we did is we load the DataFrame here
that we need, so day_average is the DataFrame
that contains our data. Then here
we have the HighCharts JavaScript code.
Then we have the function that renders
the webpage, we have the webpage
component, we have these two components,
normal components text, so QDiv, and
then we have the HighCharts component,
which contains now this chart_def json
as a dictionary. So we can access that
dictionary through options since that is
stored in options. So now hc.options
is the dictionary, and therefore,
we can access then properties from the
dictionary and change them as we wish.
And the most important use of that is to
set the data. So you saw that for data
that contain categories, not numbers.
You can use that x axis and set that
categories property to a list, which is
the list of dates, and then data is equal to
a simple list of Ratings. This is the
app, thanks for following, and this was a
long video, both of the next apps are
going to take much less time because you
now know the process and with some
practice, you'll be able to make any
graph you like. Thank you.