1
00:00:00,240 --> 00:00:00,990
Hi, welcome back.

2
00:00:01,020 --> 00:00:07,980
In this video, we are going to create this stream graph so you can find it on the highcahrts.com

3
00:00:07,980 --> 00:00:12,230
website under chart and series types.

4
00:00:12,540 --> 00:00:14,280
So go down to stream graph.

5
00:00:15,370 --> 00:00:23,980
In the x axis of this graph, in this example, we have years, so it's a time x axis categorical data.

6
00:00:23,980 --> 00:00:25,570
On the Y axis

7
00:00:25,570 --> 00:00:34,360
We have the number of medals won by athletes and each color represents a country.

8
00:00:34,750 --> 00:00:42,100
So each country had a particular number of medals won by its athletes for a particular year.

9
00:00:42,310 --> 00:00:44,080
Now we're going to have the same graph.

10
00:00:44,080 --> 00:00:44,970
So you get the idea.

11
00:00:44,980 --> 00:00:52,390
We have the months along the X-axis and each color will represent a course, and then we can have either

12
00:00:52,390 --> 00:00:57,800
the average ratings or the number of ratings in the Y axis.

13
00:00:57,820 --> 00:01:03,280
So before we copy the JavaScript code of this graph, let's go and prepare our environments.

14
00:01:03,610 --> 00:01:09,340
I'm going to duplicate this by copying it and just press control V

15
00:01:09,340 --> 00:01:18,180
to paste it, so I duplicated it and I'm going to rename it to something else, so five.

16
00:01:19,180 --> 00:01:22,930
Let's name it stream. Right.

17
00:01:24,350 --> 00:01:31,130
Then go to the file that we have just created and all we have to change from here is

18
00:01:33,040 --> 00:01:42,960
this chart definition, so delete that and go here, select all that, control A, control C, copy,

19
00:01:43,060 --> 00:01:51,250
go here, control V to paste it and don't forget to remove the unneeded characters, so the semicolon, the

20
00:01:51,250 --> 00:01:51,850
parentheses.

21
00:01:52,420 --> 00:02:00,560
And up here we need charts and we need the curly parentheses before charts.

22
00:02:00,560 --> 00:02:05,710
So everything before that curly bracket is deleted like that.

23
00:02:05,860 --> 00:02:09,790
So let's take a look now at these data.

24
00:02:12,370 --> 00:02:17,900
How the data are constructed, so serious is a list.

25
00:02:17,920 --> 00:02:21,500
It's a big list containing multiple dictionaries.

26
00:02:21,520 --> 00:02:24,490
So, for example, this is the first dictionary, it starts here,

27
00:02:24,790 --> 00:02:32,740
it ends in here and it's made of this pair of key and value, a name and the name of the country,

28
00:02:33,190 --> 00:02:35,770
which will be replaced by the name of a course.

29
00:02:36,190 --> 00:02:40,660
And we have data, which is this list and so on.

30
00:02:40,840 --> 00:02:44,750
These dictionaries then are repeated over and over again with different data.

31
00:02:45,760 --> 00:02:51,150
That means we don't have to change our codes down here.

32
00:02:51,160 --> 00:02:52,480
So we had this code.

33
00:02:52,480 --> 00:02:55,270
We built it already in the previous video.

34
00:02:55,930 --> 00:02:57,420
So that should be fine.

35
00:02:58,030 --> 00:02:59,550
Let's try to execute it.

36
00:02:59,560 --> 00:03:02,350
We are going to get an error and we are going to fix it.

37
00:03:03,100 --> 00:03:05,650
So stop the current process

38
00:03:05,650 --> 00:03:10,890
if there is a process running, make sure you are executing the new file that we created.

39
00:03:11,620 --> 00:03:13,420
So press run.

40
00:03:15,670 --> 00:03:24,010
So this is the error, and when you get this Json decode error that means it's about that JavaScript

41
00:03:24,010 --> 00:03:25,110
code that we have.

42
00:03:25,930 --> 00:03:30,840
So we want to go to the code and you see that it's about colors.

43
00:03:33,950 --> 00:03:45,230
Unknown identifier, because what we have here is these colors and we need to delete those.

44
00:03:46,350 --> 00:03:51,150
And you can delete these entire colors..

45
00:03:54,910 --> 00:04:02,020
So from there to here, including the comma, because Python is not being able to use that colors,

46
00:04:02,320 --> 00:04:06,920
so delete that and that is not going to change any output.

47
00:04:07,930 --> 00:04:09,400
And let me show you.

48
00:04:15,590 --> 00:04:23,330
We have another one 'Ampezzo', so, yeah, so it's here, so we have this kind of JavaScript syntax that

49
00:04:23,720 --> 00:04:25,960
Python is not able to recognize.

50
00:04:26,330 --> 00:04:35,620
So what you could do is since we are replacing these anyway, sorry, you can so you can delete all

51
00:04:35,870 --> 00:04:41,170
the values of the categories list and leave categories an empty list.

52
00:04:41,630 --> 00:04:43,130
So just like that categories.

53
00:04:43,520 --> 00:04:52,610
So categories is being replaced, as you know, down here through this expression, let me stop again

54
00:04:52,610 --> 00:04:53,210
and run.

55
00:04:56,480 --> 00:04:58,830
And this time seems to be working.

56
00:04:59,540 --> 00:05:06,440
So these are actually the number of ratings left for each course, and so it shows you the difference

57
00:05:06,440 --> 00:05:10,460
between this course, 'The Python Mega Course' and the other courses.

58
00:05:10,910 --> 00:05:12,960
And this is something interesting here.

59
00:05:13,730 --> 00:05:22,210
So you see this new course has just been launched not long ago, some time in January 2021st.

60
00:05:22,970 --> 00:05:34,080
So 'The Complete Python Course: Build 10 Professional OOP Apps' and HighCharts is very intelligent to adjust it

61
00:05:34,490 --> 00:05:36,450
inside this stream graph.

62
00:05:37,020 --> 00:05:41,530
Now, you may want to change these labels so you can easily find them.

63
00:05:43,310 --> 00:05:45,320
You can locate them where they are here.

64
00:05:45,320 --> 00:05:46,730
So I can perform a search.

65
00:05:47,660 --> 00:05:51,550
Germany, which is this text here.

66
00:05:51,680 --> 00:05:54,740
So it's part of annotations.

67
00:05:58,060 --> 00:06:04,390
You see, you could see, for example, for example, course launched,

68
00:06:06,070 --> 00:06:08,200
or Python got popular.

69
00:06:09,750 --> 00:06:13,740
Right, if I stop it and run

70
00:06:18,390 --> 00:06:25,560
you should see these labels updated, you can also update their location, so, for example, you see

71
00:06:25,830 --> 00:06:36,000
with the first annotation, it's at x 5.5, y 30, so x 5.5, so zero here.

72
00:06:36,000 --> 00:06:39,930
One, two, three, four, five, six.

73
00:06:39,960 --> 00:06:42,330
So it's between five and six.

74
00:06:43,340 --> 00:06:49,870
5.5; 30 along this y-axis, so 30 should be somewhere in here.

75
00:06:50,840 --> 00:06:55,270
So you get the idea that concludes this video and I'll talk to you in the next ones.