1
00:00:00,000 --> 00:00:02,193
Hi, welcome back. In this video, we are

2
00:00:02,219 --> 00:00:05,249
going to create this stream graph. So

3
00:00:05,249 --> 00:00:07,949
you can find it on the highcharts.com

4
00:00:07,949 --> 00:00:12,359
websites, under Chart and series types.

5
00:00:12,507 --> 00:00:15,807
So go down to Stream graph. In the x

6
00:00:15,839 --> 00:00:19,049
axis of this graph in this example, we

7
00:00:19,074 --> 00:00:23,004
have the Years. So it's a time x axis

8
00:00:23,282 --> 00:00:26,219
categorical data. On the y axis, we have

9
00:00:26,345 --> 00:00:29,975
the number of medals won by athletes,

10
00:00:30,389 --> 00:00:35,009
and each color represent a country. So

11
00:00:35,009 --> 00:00:37,829
each country had a particular number of

12
00:00:37,829 --> 00:00:40,739
medals won by its athletes for a

13
00:00:40,739 --> 00:00:43,469
particular year. Now we're going to have

14
00:00:43,469 --> 00:00:45,089
the same graph. So you get the idea, we

15
00:00:45,089 --> 00:00:48,089
have the months along the x axis, and

16
00:00:48,149 --> 00:00:50,459
each color will represent a course, and

17
00:00:50,579 --> 00:00:53,069
then we can have either the average

18
00:00:53,069 --> 00:00:56,669
ratings or the number of ratings in the

19
00:00:56,729 --> 00:00:59,729
y axis. So before we copy the JavaScript

20
00:00:59,729 --> 00:01:01,502
code of this graph, let's go and

21
00:01:01,527 --> 00:01:04,289
prepare our environment. I'm going to

22
00:01:04,289 --> 00:01:08,339
duplicate this by copying it, and just

23
00:01:08,554 --> 00:01:11,824
press Ctrl V to paste it. So I

24
00:01:11,849 --> 00:01:13,889
duplicate it, and I'll go, I'm going to

25
00:01:13,889 --> 00:01:18,239
rename it to something else. So 5,

26
00:01:19,129 --> 00:01:25,519
let's name it stream. Right. Then go to

27
00:01:25,589 --> 00:01:28,499
the file that we have just created, and

28
00:01:28,529 --> 00:01:31,083
all we have to change from here is

29
00:01:31,107 --> 00:01:33,107
[No audio]

30
00:01:33,123 --> 00:01:38,429
this chart_definition, so delete that and go

31
00:01:38,429 --> 00:01:41,849
here, select all that, Ctrl A, Ctrl C,

32
00:01:41,879 --> 00:01:45,454
copy, go here, Ctrl V to paste it, and

33
00:01:45,479 --> 00:01:49,289
don't forget to remove the unneeded

34
00:01:49,314 --> 00:01:51,239
characters, so the semicolon, the

35
00:01:51,239 --> 00:01:56,279
parenthesis, and up here, we need

36
00:01:56,344 --> 00:01:58,774
charts, and we needed the curly

37
00:01:58,799 --> 00:02:01,529
parenthesis before charts. So everything

38
00:02:01,529 --> 00:02:04,649
before that curly bracket is deleted.

39
00:02:05,224 --> 00:02:08,734
Like that. So let's take a look now at

40
00:02:08,759 --> 00:02:09,833
these data.

41
00:02:09,857 --> 00:02:11,912
[No audio]

42
00:02:11,937 --> 00:02:13,169
Yeah, how the data are

43
00:02:13,169 --> 00:02:18,329
constructed? So series is a list, its a

44
00:02:18,329 --> 00:02:20,969
big list containing multiple

45
00:02:20,969 --> 00:02:22,859
dictionaries. So for example, this is

46
00:02:22,859 --> 00:02:25,109
the first dictionary, it starts here, it

47
00:02:25,139 --> 00:02:29,489
ends in here, and it's made of this pair

48
00:02:29,519 --> 00:02:32,249
of key and values, a name and the name of

49
00:02:32,249 --> 00:02:34,469
the country, which will be replaced by the

50
00:02:34,469 --> 00:02:37,319
name of a course, and we have data,

51
00:02:37,559 --> 00:02:41,339
which is this list, and so on. These

52
00:02:41,339 --> 00:02:42,989
dictionaries then are repeated over and

53
00:02:42,989 --> 00:02:46,049
over again with different data. That

54
00:02:46,049 --> 00:02:47,863
means we don't have to change

55
00:02:47,887 --> 00:02:49,887
[No audio]

56
00:02:49,902 --> 00:02:52,919
our code down here. So we had this code, we build

57
00:02:52,919 --> 00:02:56,129
it already in the previous video. So

58
00:02:56,129 --> 00:02:58,859
that should be fine. Let's try to

59
00:02:58,859 --> 00:03:00,299
execute this, we're going to get an

60
00:03:00,299 --> 00:03:03,479
error, and we're going to fix it. So

61
00:03:03,509 --> 00:03:06,209
stop the current process, if there is a

62
00:03:06,209 --> 00:03:08,459
process running. Make sure you are

63
00:03:08,489 --> 00:03:10,379
executing the new file that we

64
00:03:10,379 --> 00:03:13,455
created. So press run.

65
00:03:13,479 --> 00:03:15,696
[No audio]

66
00:03:15,721 --> 00:03:16,859
So this is the

67
00:03:16,859 --> 00:03:20,521
error, and when you get this JSONDecodeError,

68
00:03:20,545 --> 00:03:23,279
that means it's about the

69
00:03:23,279 --> 00:03:26,459
JavaScript code that we have. So we want

70
00:03:26,459 --> 00:03:29,909
to go to the codes and you see that it's

71
00:03:29,909 --> 00:03:30,980
about colors and

72
00:03:31,005 --> 00:03:33,926
[No audio]

73
00:03:33,951 --> 00:03:35,489
Unknown identifier,

74
00:03:36,089 --> 00:03:39,359
because what we have here is this

75
00:03:39,899 --> 00:03:46,799
colors, and we need to delete those, and

76
00:03:46,979 --> 00:03:51,255
you can delete this entire colors.

77
00:03:51,279 --> 00:03:54,689
[No audio]

78
00:03:54,714 --> 00:03:58,049
So from there to here, including the comma,

79
00:03:58,169 --> 00:04:01,319
because Python is not being able to use

80
00:04:01,319 --> 00:04:05,159
that colors, so delete that, and that is

81
00:04:05,159 --> 00:04:07,221
not going to change any output,

82
00:04:07,836 --> 00:04:09,449
and let me show you

83
00:04:09,473 --> 00:04:15,575
[No audio]

84
00:04:15,600 --> 00:04:18,180
we have another one Ampezzo. Yeah, so

85
00:04:18,180 --> 00:04:21,780
it's here. So we have this kind of

86
00:04:21,900 --> 00:04:24,780
JavaScript syntax that Python is not

87
00:04:24,810 --> 00:04:27,780
able to recognize. So what you could do

88
00:04:27,780 --> 00:04:30,900
is since we are replacing these anyway,

89
00:04:31,950 --> 00:04:35,340
you can, sorry, you can delete all the

90
00:04:35,340 --> 00:04:38,910
values of the categories list and

91
00:04:38,910 --> 00:04:42,120
leave categories an empty list. So just

92
00:04:42,120 --> 00:04:44,850
like that categories, so categories is

93
00:04:44,875 --> 00:04:47,785
being replaced as you know down here

94
00:04:48,425 --> 00:04:52,145
through this expression. Let me stop

95
00:04:52,170 --> 00:04:53,255
again and run,

96
00:04:53,279 --> 00:04:56,420
[No audio]

97
00:04:56,445 --> 00:04:58,290
and this time seems to be

98
00:04:58,290 --> 00:05:01,140
working. So these are actually the

99
00:05:01,140 --> 00:05:04,050
number of ratings left for each course,

100
00:05:04,050 --> 00:05:06,420
and so it shows you the difference

101
00:05:06,420 --> 00:05:08,970
between this course, The Python Mega

102
00:05:08,970 --> 00:05:11,580
Course and the other courses, and this

103
00:05:11,580 --> 00:05:14,190
is something interesting here, and so you

104
00:05:14,190 --> 00:05:17,130
see this new course has just been

105
00:05:17,130 --> 00:05:20,670
launched, not long ago, sometime in

106
00:05:20,670 --> 00:05:25,260
January 2021. So The Complete Python

107
00:05:25,260 --> 00:05:28,330
Course, Built 10 Professional OOP

108
00:05:28,385 --> 00:05:33,155
Apps, and Highcharts is very intelligent

109
00:05:33,180 --> 00:05:35,970
to adjust it inside this stream

110
00:05:35,970 --> 00:05:39,090
graph. Now, you may want to change these

111
00:05:39,090 --> 00:05:43,500
labels, so you can easily find them. You

112
00:05:43,500 --> 00:05:45,480
can locate them where they are here. So

113
00:05:45,480 --> 00:05:50,280
I can perform a search Germany, which is

114
00:05:50,280 --> 00:05:53,490
this text here, so it's part of

115
00:05:53,520 --> 00:05:54,821
annotations.

116
00:05:54,846 --> 00:05:57,983
[No audio]

117
00:05:58,008 --> 00:06:01,080
You see you could say for example, Course

118
00:06:01,812 --> 00:06:04,521
Launched or

119
00:06:06,105 --> 00:06:10,242
Python got popular, right.

120
00:06:10,865 --> 00:06:13,876
If I stop it and re-run,

121
00:06:13,900 --> 00:06:18,268
[No audio]

122
00:06:18,293 --> 00:06:22,710
we should see these labels updated. You can also

123
00:06:22,710 --> 00:06:25,140
update their location. So for example,

124
00:06:25,140 --> 00:06:28,230
you see with the first annotation, it's

125
00:06:28,259 --> 00:06:34,126
at x 5.5, y 30. So x 5.5,

126
00:06:34,452 --> 00:06:35,975
so 0 here,

127
00:06:36,046 --> 00:06:42,496
1, 2, 3, 4, 5, 6, so it's between 5 and 6,

128
00:06:43,295 --> 00:06:48,515
5.5, 30 along this y axis. So 30 should

129
00:06:48,553 --> 00:06:51,823
be somewhere in here. So you get the idea.

130
00:06:51,905 --> 00:06:54,215
That concludes this video and I'll

131
00:06:54,240 --> 00:06:55,573
talk to you in the next one.