1
00:00:00,660 --> 00:00:01,090
Hello.

2
00:00:01,110 --> 00:00:06,300
In this video, we are going to create a pie chart, just like the one you're looking at so you can

3
00:00:06,300 --> 00:00:12,810
find this from highcharts.com, go to Chart and Series types and go to pie chart.

4
00:00:14,060 --> 00:00:20,310
This one here shows the percentage of users for the major Internet browsers.

5
00:00:20,450 --> 00:00:22,830
So, for example, Chrome has the majority.

6
00:00:23,570 --> 00:00:29,200
You see this big slice here and each slice is associated with the percentage.

7
00:00:29,480 --> 00:00:35,220
In our case, what we're going to have is we did this analysis earlier on.

8
00:00:35,270 --> 00:00:38,180
So we have these data for each course.

9
00:00:38,180 --> 00:00:40,820
We have a number of rating left for that cause.

10
00:00:41,780 --> 00:00:44,600
Therefore, we were going to end up with something like this.

11
00:00:45,110 --> 00:00:50,720
But interactive, as you can see in here, let's go and prepare our environment.

12
00:00:51,620 --> 00:00:55,430
So I'm going to create a new file, ratings by course.

13
00:00:57,310 --> 00:01:07,000
It's a pie. And as usual, I'll use this template, this JustPy template and then add

14
00:01:12,710 --> 00:01:24,020
a HighCharts component which belonges to wp, and it will render this JavaScript code switch we have

15
00:01:24,020 --> 00:01:25,010
to paste in here.

16
00:01:28,450 --> 00:01:38,260
So inside here goes the code of this chart, so that one in there. 
Control A, copy it and pasted there.

17
00:01:38,290 --> 00:01:45,880
And don't forget to delete the semicolon, the parenthesis and on top here, delete everything that is

18
00:01:45,880 --> 00:01:49,000
before that curly brackets.

19
00:01:50,520 --> 00:01:57,780
I'd like to try out the code before I make any changes, but I have this error, there are four quotes.

20
00:01:57,780 --> 00:02:00,540
I have to remove one and then run.

21
00:02:07,550 --> 00:02:12,080
And so we get the pie chart visualized correctly.

22
00:02:12,530 --> 00:02:22,370
Next, I want to get that code pasted on top here and also

23
00:02:25,260 --> 00:02:33,690
we want to have this aggregation of the data from where we are basically counting how many ratings are

24
00:02:33,720 --> 00:02:35,260
for each course.

25
00:02:35,490 --> 00:02:39,920
So, course name, rating, counter that. Right.

26
00:02:39,930 --> 00:02:44,400
Then next, we have to look at the structure of the data.

27
00:02:44,430 --> 00:02:47,040
So as you can see, this is a big list

28
00:02:49,640 --> 00:02:56,230
with dictionaries, so here is the first dictionary, but be careful here.

29
00:02:59,030 --> 00:03:08,120
From what I see, what we have here is this dictionary which has these key and value, this key and

30
00:03:08,120 --> 00:03:14,660
value and then this key and that value, which is a list.

31
00:03:15,890 --> 00:03:18,860
So it ends in here.

32
00:03:20,330 --> 00:03:31,190
Therefore, this time, what we need to do is access, hc.options.series

33
00:03:31,430 --> 00:03:31,820
dot data.

34
00:03:33,000 --> 00:03:44,360
So unlike the other times where we did hc.options.series because the dots were directly

35
00:03:46,340 --> 00:03:47,270
after serious.

36
00:03:47,270 --> 00:03:48,880
So serious was the list.

37
00:03:50,060 --> 00:03:51,080
But this time

38
00:03:54,320 --> 00:04:03,590
series has a data key, and that Delta Key contains the actual data which is made of dictionaries,

39
00:04:03,590 --> 00:04:05,990
so the first dictionary with name and y.

40
00:04:05,990 --> 00:04:09,830
The second dictionary with name and y again.

41
00:04:09,830 --> 00:04:16,430
The first dictionary also has these other properties such as sliced true and selected true,

42
00:04:16,700 --> 00:04:21,260
which indicates that this chrome is a slice.

43
00:04:21,260 --> 00:04:24,590
You see, it's separated by the other slices of the pie.

44
00:04:24,620 --> 00:04:29,730
So that's for chrome. The other ones don't have those properties, which is fine.

45
00:04:30,590 --> 00:04:32,600
So I'm just going to leave it like that.

46
00:04:32,810 --> 00:04:41,780
But every one of them has a name and a Y, therefore these will be equal to something and that something

47
00:04:41,780 --> 00:04:45,110
is something we need to construct now.

48
00:04:45,320 --> 00:04:49,070
So hc data will be that.

49
00:04:52,160 --> 00:04:56,030
That list, it's a list of dictionaries, right.

50
00:04:58,340 --> 00:05:08,900
A list of dictionaries which have a name equal to, let's find a name for a variable, v1, right.

51
00:05:09,740 --> 00:05:10,400
And then.

52
00:05:12,700 --> 00:05:23,050
So name and Y the the label of the are other value is Y.
Let's have a V to variable.

53
00:05:23,620 --> 00:05:29,500
So since these always change, 'Opera' here, 'QQ' here, 'Sogu Explorer' there,

54
00:05:30,250 --> 00:05:36,790
that means we need a variable after the name and also a variable after Y since these values are also

55
00:05:36,790 --> 00:05:37,330
changing.

56
00:05:37,660 --> 00:05:42,840
And what we're doing is we are constructing a list comprehension.

57
00:05:42,850 --> 00:05:48,090
So for V1 and V2 in...

58
00:05:48,460 --> 00:05:50,410
So where do we get this?

59
00:05:50,950 --> 00:05:53,020
Basically we need, for v1

60
00:05:53,020 --> 00:05:59,410
we need the names for each course, the titles of the courses and for v2 we need the rate, the

61
00:05:59,410 --> 00:06:01,380
number of ratings for the course.

62
00:06:01,960 --> 00:06:07,140
So let's take a look at the data frame, how it looks like. Share.

63
00:06:07,480 --> 00:06:10,660
So I think the index has the course name.

64
00:06:11,320 --> 00:06:17,410
Let me show actually that you. I'll execute that cell and execute that as well.

65
00:06:17,420 --> 00:06:25,030
So we get this, but share.index is basically a list-like object, which contains all the names

66
00:06:25,030 --> 00:06:29,830
of the courses and share actually list

67
00:06:29,830 --> 00:06:30,400
share

68
00:06:33,730 --> 00:06:35,810
contains the number of ratings.

69
00:06:36,070 --> 00:06:48,910
So what we're going to do is we are doing for v1, v2 zip share.index, share, print

70
00:06:49,450 --> 00:06:50,980
v1, v2..

71
00:06:51,910 --> 00:06:58,750
And what's happening here is that in the first iteration that is going to print out V1, the title of

72
00:06:58,750 --> 00:07:03,340
the first course, and the number of rating left for that course.

73
00:07:03,880 --> 00:07:09,010
So v1, v2 then, v1, v2 again, and again and again.

74
00:07:10,050 --> 00:07:11,950
That's what we need here.

75
00:07:12,810 --> 00:07:19,170
So for v1, v2 in zip share, sorry share.index and share.

76
00:07:20,820 --> 00:07:30,570
So those values are going to be injected into here and here in this dictionary, and then we assign

77
00:07:30,570 --> 00:07:35,700
that to this and then we stop the scripts and we run it again to see where we are.

78
00:07:39,270 --> 00:07:47,550
So we get an error. AttributeError: list object has no attribute data, so let's go take a look at

79
00:07:47,550 --> 00:07:51,870
where the error occurred, line 84, which is here.

80
00:07:53,160 --> 00:07:59,880
And it says list object has no attribute data, which means that this is the list object and this

81
00:07:59,880 --> 00:08:03,370
is a data attribute, since that is a list

82
00:08:03,540 --> 00:08:09,020
of course, it doesn't have this data attribute because we thought this was a dictionary somehow.

83
00:08:09,030 --> 00:08:10,970
I thought maybe you didn't.

84
00:08:11,430 --> 00:08:12,360
So series.

85
00:08:12,870 --> 00:08:13,190
Hmm.

86
00:08:13,590 --> 00:08:15,800
Series is really a list.

87
00:08:16,140 --> 00:08:18,480
So that was a logic mistake from my part.

88
00:08:18,660 --> 00:08:20,620
But that is what errors are about.

89
00:08:20,940 --> 00:08:22,710
So they explain to you what's going on.

90
00:08:22,890 --> 00:08:24,750
You read that and you fix the issue.

91
00:08:25,190 --> 00:08:29,190
So since series is a list, it means it has items.

92
00:08:29,200 --> 00:08:32,100
And in this case it has only one item.

93
00:08:32,110 --> 00:08:38,940
So it's the big dictionary which has this key and value that's key and value and that key and value.

94
00:08:39,690 --> 00:08:42,410
So the series list has only one item.

95
00:08:42,420 --> 00:08:46,140
Therefore, we need to access that one item

96
00:08:47,680 --> 00:08:48,510
from series.

97
00:08:48,840 --> 00:08:54,460
So the item with index zero. That, then will give us this dictionary and out of that dictionary we

98
00:08:54,470 --> 00:08:58,490
extract the data key of that dictionary.

99
00:08:58,750 --> 00:09:05,060
So by extracting data, by accessing the data key, we get the list of the data Key.

100
00:09:06,040 --> 00:09:08,350
So now we should be fine.

101
00:09:15,580 --> 00:09:17,220
Yeah, it looks good.

102
00:09:18,240 --> 00:09:23,790
And that ends this video as well, and that was a series of graphs that we developed throughout the

103
00:09:23,800 --> 00:09:28,860
sections, I'd like to thank you for following and I'll talk to you in the next videos! See you!