Hi, welcome back. In this video, we are
going to create this stream graph. So
you can find it on the highcharts.com
websites, under Chart and series types.
So go down to Stream graph. In the x
axis of this graph in this example, we
have the Years. So it's a time x axis
categorical data. On the y axis, we have
the number of medals won by athletes,
and each color represent a country. So
each country had a particular number of
medals won by its athletes for a
particular year. Now we're going to have
the same graph. So you get the idea, we
have the months along the x axis, and
each color will represent a course, and
then we can have either the average
ratings or the number of ratings in the
y axis. So before we copy the JavaScript
code of this graph, let's go and
prepare our environment. I'm going to
duplicate this by copying it, and just
press Ctrl V to paste it. So I
duplicate it, and I'll go, I'm going to
rename it to something else. So 5,
let's name it stream. Right. Then go to
the file that we have just created, and
all we have to change from here is
[No audio]
this chart_definition, so delete that and go
here, select all that, Ctrl A, Ctrl C,
copy, go here, Ctrl V to paste it, and
don't forget to remove the unneeded
characters, so the semicolon, the
parenthesis, and up here, we need
charts, and we needed the curly
parenthesis before charts. So everything
before that curly bracket is deleted.
Like that. So let's take a look now at
these data.
[No audio]
Yeah, how the data are
constructed? So series is a list, its a
big list containing multiple
dictionaries. So for example, this is
the first dictionary, it starts here, it
ends in here, and it's made of this pair
of key and values, a name and the name of
the country, which will be replaced by the
name of a course, and we have data,
which is this list, and so on. These
dictionaries then are repeated over and
over again with different data. That
means we don't have to change
[No audio]
our code down here. So we had this code, we build
it already in the previous video. So
that should be fine. Let's try to
execute this, we're going to get an
error, and we're going to fix it. So
stop the current process, if there is a
process running. Make sure you are
executing the new file that we
created. So press run.
[No audio]
So this is the
error, and when you get this JSONDecodeError,
that means it's about the
JavaScript code that we have. So we want
to go to the codes and you see that it's
about colors and
[No audio]
Unknown identifier,
because what we have here is this
colors, and we need to delete those, and
you can delete this entire colors.
[No audio]
So from there to here, including the comma,
because Python is not being able to use
that colors, so delete that, and that is
not going to change any output,
and let me show you
[No audio]
we have another one Ampezzo. Yeah, so
it's here. So we have this kind of
JavaScript syntax that Python is not
able to recognize. So what you could do
is since we are replacing these anyway,
you can, sorry, you can delete all the
values of the categories list and
leave categories an empty list. So just
like that categories, so categories is
being replaced as you know down here
through this expression. Let me stop
again and run,
[No audio]
and this time seems to be
working. So these are actually the
number of ratings left for each course,
and so it shows you the difference
between this course, The Python Mega
Course and the other courses, and this
is something interesting here, and so you
see this new course has just been
launched, not long ago, sometime in
January 2021. So The Complete Python
Course, Built 10 Professional OOP
Apps, and Highcharts is very intelligent
to adjust it inside this stream
graph. Now, you may want to change these
labels, so you can easily find them. You
can locate them where they are here. So
I can perform a search Germany, which is
this text here, so it's part of
annotations.
[No audio]
You see you could say for example, Course
Launched or
Python got popular, right.
If I stop it and re-run,
[No audio]
we should see these labels updated. You can also
update their location. So for example,
you see with the first annotation, it's
at x 5.5, y 30. So x 5.5,
so 0 here,
1, 2, 3, 4, 5, 6, so it's between 5 and 6,
5.5, 30 along this y axis. So 30 should
be somewhere in here. So you get the idea.
That concludes this video and I'll
talk to you in the next one.