1
00:00:00,000 --> 00:00:02,243
Hello, in this video, we are going to

2
00:00:02,249 --> 00:00:04,499
create a pie chart just like the one

3
00:00:04,499 --> 00:00:06,899
you're looking at. So you can find this

4
00:00:06,899 --> 00:00:10,079
from highcharts.com, go to Chart and

5
00:00:10,079 --> 00:00:14,219
series types and go to Pie chart. This

6
00:00:14,219 --> 00:00:17,849
one here shows the percentage of users

7
00:00:18,089 --> 00:00:20,849
for the major internet browsers. So for

8
00:00:20,849 --> 00:00:23,759
example, Chrome has the majority, you

9
00:00:23,759 --> 00:00:27,089
see this big slice here, and each slice

10
00:00:27,179 --> 00:00:29,849
is associated with a percentage. In our

11
00:00:29,849 --> 00:00:32,669
case, what we're going to have is, we

12
00:00:32,669 --> 00:00:36,329
did this analysis earlier. So we have

13
00:00:36,359 --> 00:00:38,519
these data, for each course, we have a

14
00:00:38,519 --> 00:00:40,859
number of rating left for that course.

15
00:00:41,789 --> 00:00:43,619
Therefore, we're going to end up with

16
00:00:43,619 --> 00:00:46,169
something like this. But interactive, as

17
00:00:46,169 --> 00:00:48,929
you can see in here. Let's go and

18
00:00:48,929 --> 00:00:52,229
prepare our environment. So I'm going to

19
00:00:52,254 --> 00:00:55,398
create a new file ratings by course.

20
00:00:55,422 --> 00:00:57,422
[No audio]

21
00:00:57,431 --> 00:00:58,519
It's a pie.

22
00:00:58,544 --> 00:01:00,620
[No audio]

23
00:01:00,645 --> 00:01:02,099
And as usual, I'll

24
00:01:02,099 --> 00:01:03,959
use this template, this JustPy

25
00:01:04,043 --> 00:01:07,193
template, and then add

26
00:01:07,217 --> 00:01:12,755
[No audio]

27
00:01:12,780 --> 00:01:17,538
a HighCharts component which belong to wp and

28
00:01:18,622 --> 00:01:22,950
e to the render this JavaScript

29
00:01:22,975 --> 00:01:25,083
code, which we have to paste in here.

30
00:01:25,112 --> 00:01:28,435
[No audio]

31
00:01:28,480 --> 00:01:32,480
So inside here it goes the code of this chart.

32
00:01:32,957 --> 00:01:36,732
So that one in there, Ctrl A, copy it,

33
00:01:37,110 --> 00:01:39,240
and paste it there, and don't forget to

34
00:01:39,240 --> 00:01:42,150
delete the semicolon, the parenthesis,

35
00:01:42,455 --> 00:01:45,515
and on top here delete everything that

36
00:01:45,540 --> 00:01:51,000
is before that curly brackets. I'd like

37
00:01:51,000 --> 00:01:53,910
to try out the code before I make any

38
00:01:53,910 --> 00:01:57,000
changes. I have this error here. There

39
00:01:57,025 --> 00:01:59,245
are four quotes, I have to remove one,

40
00:01:59,527 --> 00:02:00,660
and then run.

41
00:02:00,684 --> 00:02:07,565
[No audio]

42
00:02:07,590 --> 00:02:11,460
And so we get the pie charts visualized

43
00:02:11,490 --> 00:02:16,650
correctly. Next, I want to get that code

44
00:02:16,674 --> 00:02:18,675
[No audio]

45
00:02:18,700 --> 00:02:22,388
paste it on top here, and also,

46
00:02:22,412 --> 00:02:25,311
[No audio]

47
00:02:25,336 --> 00:02:29,855
we want to have this aggregation of the DataFrame

48
00:02:29,880 --> 00:02:32,670
where we are basically counting how many

49
00:02:32,670 --> 00:02:35,760
ratings are for each course. So

50
00:02:35,760 --> 00:02:39,870
Course Name, Rating, count that. Right,

51
00:02:39,900 --> 00:02:42,540
then next we have to look at the

52
00:02:42,540 --> 00:02:45,060
structure of the data. So as you can

53
00:02:45,060 --> 00:02:47,088
see this is a big list

54
00:02:47,112 --> 00:02:49,617
[No audio]

55
00:02:49,642 --> 00:02:53,820
with dictionaries, so here is the first

56
00:02:53,820 --> 00:02:56,255
dictionary, but be careful here.

57
00:02:56,279 --> 00:02:59,005
[No audio]

58
00:02:59,030 --> 00:03:04,290
From what I see what we have here is this

59
00:03:04,290 --> 00:03:06,120
dictionary, which has this key and

60
00:03:06,120 --> 00:03:09,870
value, this key and value, and then this

61
00:03:09,870 --> 00:03:16,140
key and that value, which is a list. So

62
00:03:16,140 --> 00:03:21,900
it ends in here. Therefore, this time,

63
00:03:22,565 --> 00:03:24,788
what we need to do is

64
00:03:26,083 --> 00:03:32,194
access hc.options.series.data.

65
00:03:32,826 --> 00:03:36,376
So unlike the other times, when we did

66
00:03:36,643 --> 00:03:38,610
hc.options.series

67
00:03:40,080 --> 00:03:44,349
because the data were directly

68
00:03:44,373 --> 00:03:46,397
[No audio]

69
00:03:46,422 --> 00:03:49,155
after series, so series was the list.

70
00:03:49,942 --> 00:03:51,192
But this time

71
00:03:51,216 --> 00:03:54,260
[No audio]

72
00:03:54,285 --> 00:03:57,840
series has a data key and

73
00:03:57,840 --> 00:04:00,390
that data key contains the actual data,

74
00:04:01,530 --> 00:04:03,690
which is made of dictionary. So the

75
00:04:03,690 --> 00:04:06,960
first dictionary with name and y, the

76
00:04:06,960 --> 00:04:09,810
second dictionary with name and y

77
00:04:09,810 --> 00:04:11,940
again. The first dictionary also has

78
00:04:11,940 --> 00:04:15,120
this other properties such as sliced

79
00:04:15,155 --> 00:04:17,075
true and selected true, which

80
00:04:17,100 --> 00:04:21,330
indicates that this chrome is sliced, you

81
00:04:21,330 --> 00:04:23,820
see it's separated by the other slices

82
00:04:23,820 --> 00:04:26,040
of the pie. So that's for Chrome. The

83
00:04:26,040 --> 00:04:28,740
other ones don't have those properties,

84
00:04:28,980 --> 00:04:31,500
which is fine. So I'm just going to

85
00:04:31,500 --> 00:04:34,230
leave it like that. But every one of

86
00:04:34,230 --> 00:04:38,820
them has a name and a y. Therefore, these

87
00:04:38,850 --> 00:04:41,220
will be equal to something and that

88
00:04:41,220 --> 00:04:43,320
something is something we need to

89
00:04:43,752 --> 00:04:49,210
construct now. So hc_data will be that,

90
00:04:49,234 --> 00:04:52,113
[No audio]

91
00:04:52,138 --> 00:04:54,510
that's a list. It's a list of

92
00:04:54,545 --> 00:04:56,101
dictionaries, right.

93
00:04:56,131 --> 00:04:58,336
[No audio]

94
00:04:58,361 --> 00:05:00,665
A list of dictionaries

95
00:05:00,690 --> 00:05:05,820
which have a name equal to, let's find

96
00:05:05,845 --> 00:05:10,521
a name for a variable v1, right. And then

97
00:05:10,545 --> 00:05:12,676
[No audio]

98
00:05:12,701 --> 00:05:15,570
so name and y, the label

99
00:05:15,595 --> 00:05:21,055
of their other value is y. Let's

100
00:05:21,575 --> 00:05:25,115
have a v2 variable. So since these

101
00:05:25,140 --> 00:05:28,098
always change, Opera here, QQ here,

102
00:05:28,143 --> 00:05:31,415
Sogou Explorer there. That means we need

103
00:05:31,440 --> 00:05:33,960
a variable after the name and also a

104
00:05:33,960 --> 00:05:36,030
variable after y. Since these values

105
00:05:36,030 --> 00:05:38,280
are also changing. And what we're

106
00:05:38,280 --> 00:05:42,270
doing is we are constructing a list

107
00:05:42,295 --> 00:05:47,125
comprehension. So for v1 and v2 in,

108
00:05:48,450 --> 00:05:51,510
so what do we get this? Basically, we

109
00:05:51,510 --> 00:05:54,540
need, for v1, we need the names for

110
00:05:54,565 --> 00:05:56,605
each course, the titles of the courses.

111
00:05:56,915 --> 00:05:59,735
And for v2, we need the rate, the number

112
00:05:59,765 --> 00:06:03,095
of ratings for the course. So let's

113
00:06:03,120 --> 00:06:05,790
take a look at the DataFrame, how it

114
00:06:05,790 --> 00:06:09,060
looks like, share. So I think the index

115
00:06:09,120 --> 00:06:11,940
has the course name. Let me show

116
00:06:11,940 --> 00:06:13,830
actually that to you, I'll execute that

117
00:06:13,830 --> 00:06:17,940
cell and execute that as well. So we get

118
00:06:17,940 --> 00:06:22,055
this but share.index is basically

119
00:06:22,080 --> 00:06:24,720
a list like object which contains all the

120
00:06:24,720 --> 00:06:29,400
names of the courses. And share, actually

121
00:06:29,400 --> 00:06:30,481
list share

122
00:06:30,518 --> 00:06:33,649
[No audio]

123
00:06:33,674 --> 00:06:35,370
contains the number of

124
00:06:35,370 --> 00:06:38,130
ratings. So what we're going to do is we

125
00:06:38,130 --> 00:06:44,854
are doing for v1, v2 in zip share.index,

126
00:06:45,837 --> 00:06:51,384
share, print v1, v2.

127
00:06:51,784 --> 00:06:53,970
And what's happening here is that

128
00:06:54,000 --> 00:06:56,280
in the first iteration, that is going to

129
00:06:56,280 --> 00:06:59,100
print out v1, the title of the first

130
00:06:59,100 --> 00:07:02,010
course, and the number of rating left

131
00:07:02,010 --> 00:07:05,100
for that course. So v1, v2, then

132
00:07:05,100 --> 00:07:08,700
v1, v2 again, and again, and

133
00:07:08,700 --> 00:07:13,260
again. That's what we need here. So for

134
00:07:13,260 --> 00:07:18,188
v1, v2 in zip, share, sorry, share.index,

135
00:07:18,445 --> 00:07:21,900
and share. So those values are

136
00:07:21,900 --> 00:07:26,160
going to be injected into here and here

137
00:07:26,820 --> 00:07:30,570
in this dictionary, and then we assign

138
00:07:30,570 --> 00:07:32,580
that to this, and then we stop the

139
00:07:32,580 --> 00:07:35,661
script, and we run it again to see where we are.

140
00:07:35,685 --> 00:07:39,210
[No audio]

141
00:07:39,235 --> 00:07:41,550
So we get an error, attribute

142
00:07:41,550 --> 00:07:44,970
list object has no attribute data. So

143
00:07:44,970 --> 00:07:48,240
let's go, take a look at where the error

144
00:07:48,270 --> 00:07:53,550
occurred, at line 84, which is here. And it

145
00:07:53,575 --> 00:07:55,645
says list object has no attribute data,

146
00:07:56,340 --> 00:07:58,500
which means that this is the list

147
00:07:58,525 --> 00:08:01,075
object and this is the data attributes,

148
00:08:01,892 --> 00:08:04,145
series that is a list. Of course it

149
00:08:04,170 --> 00:08:06,030
doesn't have this data attribute because

150
00:08:06,275 --> 00:08:08,615
we thought this was a dictionary,

151
00:08:08,640 --> 00:08:11,640
somehow I thought, maybe you didn't. So

152
00:08:11,640 --> 00:08:16,380
series, series is really a list, so

153
00:08:16,380 --> 00:08:18,540
that was a logic mistake for my part.

154
00:08:18,660 --> 00:08:21,180
But that is what errors are about. So

155
00:08:21,180 --> 00:08:23,070
they explain to you what's going on, you

156
00:08:23,070 --> 00:08:25,380
read that, and you fix the issue. So

157
00:08:25,380 --> 00:08:28,440
since series is a list, it means it

158
00:08:28,440 --> 00:08:31,590
has items, and in this case, it has only

159
00:08:31,590 --> 00:08:33,960
one item. So it is the big dictionary,

160
00:08:33,990 --> 00:08:37,350
which has this key and value, that's key

161
00:08:37,350 --> 00:08:40,020
and value, and that's key and value. So

162
00:08:40,050 --> 00:08:42,420
the series list has only one item,

163
00:08:42,420 --> 00:08:45,480
therefore, we need to access that one

164
00:08:45,505 --> 00:08:49,950
item from series. So the item with index

165
00:08:49,950 --> 00:08:52,380
0, that then will give us this

166
00:08:52,380 --> 00:08:54,270
dictionary, and out of that dictionary,

167
00:08:54,270 --> 00:08:57,420
we extract the data key of that

168
00:08:57,840 --> 00:09:00,660
dictionary. So by extracting data by

169
00:09:00,660 --> 00:09:03,300
accessing the data key, we get the list

170
00:09:03,630 --> 00:09:08,555
of the data key. So now we should be fine.

171
00:09:08,579 --> 00:09:15,545
[No audio]

172
00:09:15,570 --> 00:09:19,680
It looks good. And that ends this video

173
00:09:19,680 --> 00:09:22,350
as well. And that was the series of graphs

174
00:09:22,350 --> 00:09:23,760
that we developed throughout the

175
00:09:23,760 --> 00:09:26,040
sections. I'd like to thank you for

176
00:09:26,040 --> 00:09:28,020
following and I'll talk to you in the next

177
00:09:28,020 --> 00:09:29,600
videos, see you.