1
00:00:00,240 --> 00:00:01,100
Hello, welcome back.

2
00:00:01,420 --> 00:00:09,960
In the previous video we made an app with JustPy. This app contains two components, so they are referred

3
00:00:09,960 --> 00:00:12,470
to as components in JustPy.

4
00:00:12,750 --> 00:00:19,140
So this component here QDiv and another component QDiv, both are added to the main component,

5
00:00:19,140 --> 00:00:20,610
which is the Quasar page.

6
00:00:21,030 --> 00:00:27,750
In this lecture, we are going to add a third component, which is going to be a HighCharts graph,

7
00:00:27,750 --> 00:00:31,420
which is still a component of JustPy.

8
00:00:32,070 --> 00:00:34,440
So let's do this step by step.

9
00:00:34,950 --> 00:00:40,920
I am going to create a new Python file where I'll be writing this new app.

10
00:00:41,220 --> 00:00:46,130
So let's name it average rating day.

11
00:00:46,230 --> 00:00:49,440
So average rating by day dot py.

12
00:00:50,250 --> 00:00:55,320
And I'm just going to copy this code because we need that and paste it here and now,

13
00:00:55,320 --> 00:00:58,620
we just need to add the HighCharts component.

14
00:00:59,020 --> 00:01:01,470
So let's take things step by step.

15
00:01:02,040 --> 00:01:09,660
The very first step we want to go through is we want to find the proper graph that we need.

16
00:01:09,870 --> 00:01:12,350
And there is a very good way to do that.

17
00:01:12,360 --> 00:01:20,610
We can go to the HighCharts documentation and look at the examples, at of a graph examples that they show

18
00:01:20,610 --> 00:01:23,420
on that page and then we can pick one of them.

19
00:01:23,430 --> 00:01:24,390
So let's do that.

20
00:01:24,570 --> 00:01:32,430
Let's choose a graph that we need, so go to your browser and just look for highcharts

21
00:01:32,790 --> 00:01:37,230
docs on Google, you'll find this page highchairts documentation.

22
00:01:40,970 --> 00:01:50,690
So HighCharts is also a JavaScript library to produce plots, so just like Quasar. Quasar was a JavaScript

23
00:01:50,690 --> 00:01:53,390
library, it's unrelated to HighCharts.

24
00:01:53,630 --> 00:02:00,950
And Python is getting these two libraries, these two frameworks together, which is really great for

25
00:02:00,950 --> 00:02:07,550
us Python programmers to use both of these two modern JavaScript libraries from Python.

26
00:02:08,180 --> 00:02:13,940
So here we are in the HighCharts documentation and we want to go to chart and series types.

27
00:02:14,420 --> 00:02:18,650
And here you're going to see that we have different types of charts.

28
00:02:19,560 --> 00:02:26,440
So in our case, I think a spline chart would be appropriate.

29
00:02:27,230 --> 00:02:30,710
So if you go and click spline chart.

30
00:02:32,450 --> 00:02:34,530
You're going to see this example here.

31
00:02:34,560 --> 00:02:37,850
So it's about temperature by altitude.

32
00:02:37,880 --> 00:02:44,420
It has this temperature axis horizontally and this altitude axis vertically.

33
00:02:45,260 --> 00:02:52,570
Now, each graph provides the code, the JavaScript code that produces that particular graph.

34
00:02:52,820 --> 00:03:00,170
And you can see that you can access it either from a jsFiddle, or CodePen, which are basically two

35
00:03:00,710 --> 00:03:01,920
on line code editor.

36
00:03:01,940 --> 00:03:08,450
So if you click jsFiddle, it's going to open up the code that produces that graph.

37
00:03:11,860 --> 00:03:13,900
And every graph has its own code.

38
00:03:13,940 --> 00:03:19,810
So if you go to a stream graph, you go to jsFiddle again, it's going to show you the code for that

39
00:03:20,080 --> 00:03:21,730
stream graph.

40
00:03:23,470 --> 00:03:25,220
Anyway, let's go back.

41
00:03:25,600 --> 00:03:30,760
So this is a graph we are interested about, and here is the code that produces that graph.

42
00:03:31,540 --> 00:03:34,690
So you can also see a live version of the graph here.

43
00:03:35,080 --> 00:03:37,960
If you change something here, it will produce that graph.

44
00:03:38,080 --> 00:03:41,920
But I'm not seeing that you need to learn JavaScript.

45
00:03:42,250 --> 00:03:52,280
All we need to do is you need to copy the code that starts after comma of this container here.

46
00:03:52,930 --> 00:03:57,940
So that means from this curly bracket, you need to select it

47
00:04:00,070 --> 00:04:08,470
and go down, down until you see this semicolon and this round parentheses and you want to copy up to

48
00:04:08,860 --> 00:04:12,820
this curly bracket, so you want to include that curly bracket.

49
00:04:13,390 --> 00:04:19,270
So press control C, or go there and copy it and then go to Python.

50
00:04:20,110 --> 00:04:30,010
And what we need to do is we want to create a string.
Let's create a variable, let's say chart definition

51
00:04:30,820 --> 00:04:33,300
is equal to a string.

52
00:04:33,310 --> 00:04:38,700
I'm going to use triple quotes, six quotes, and I'm going to split them.

53
00:04:39,610 --> 00:04:43,990
So three quotes here, three quotes in here. Inside here

54
00:04:43,990 --> 00:04:46,820
I'm going to paste all that code.

55
00:04:47,560 --> 00:04:53,530
So, again, you have to be very careful here of this code starts with this curly bracket and then

56
00:04:53,530 --> 00:04:58,300
it goes charts and so on, and it ends with this curly bracket.

57
00:05:00,230 --> 00:05:02,520
Now, before I explain you what I'm doing here.

58
00:05:02,670 --> 00:05:08,180
Let me first make it work quickly and then I come back to the code and explain you what's going on

59
00:05:08,180 --> 00:05:08,500
in here.

60
00:05:08,720 --> 00:05:19,820
So once you have the code definition, that one,
you want to go here and let's say hc for HighCharts,

61
00:05:20,120 --> 00:05:24,190
jp dot high capital C Charts.

62
00:05:24,830 --> 00:05:29,050
So that is the component we want to use, a equal to wp.

63
00:05:29,060 --> 00:05:39,680
So the standard argument and now this HighCharts component expects an options argument which is equal

64
00:05:39,680 --> 00:05:46,820
to this variable which contains the JavaScript code chart_def in my case.

65
00:05:48,800 --> 00:05:49,220
That's it.

66
00:05:50,580 --> 00:05:52,200
Now, if I execute this code.

67
00:05:55,590 --> 00:06:02,010
You see, the app is running, commands click or control click, and this is the Web app with the graph

68
00:06:02,010 --> 00:06:02,520
inside.

69
00:06:03,090 --> 00:06:11,370
So this was the first step getting the codes from the HighCharts documentation and pasting the code

70
00:06:12,510 --> 00:06:14,760
inside your Python program.

71
00:06:15,420 --> 00:06:18,270
Now, let me explain you the first step, what we just did.

72
00:06:19,490 --> 00:06:25,460
So as I explained to you, HighCharts is a JavaScript library, therefore this here is JavaScript

73
00:06:25,460 --> 00:06:32,870
code, but in this case, this is Json, so JavaScript uses Json and Json format is a familiar format

74
00:06:32,870 --> 00:06:33,770
for Python.

75
00:06:34,460 --> 00:06:36,400
So it looks like a dictionary.

76
00:06:36,800 --> 00:06:41,240
You can see it starts with this curly brackets and then you have this key.

77
00:06:42,840 --> 00:06:46,600
So even though it's a string now, it currently it's a python string.

78
00:06:47,280 --> 00:06:56,340
What happens when we do this here is that JustPy will convert that into a Python dictionary.

79
00:06:57,990 --> 00:07:02,540
So a real object that Python can read and and manipulate.

80
00:07:02,910 --> 00:07:09,470
So JustPy will process this dictionary and it will render it as a graph on the Web page.

81
00:07:11,060 --> 00:07:19,290
I can prove you that Python has successfully read this string as a dictionary by printing out.

82
00:07:19,780 --> 00:07:20,690
So print

83
00:07:22,900 --> 00:07:32,560
hc.options, so options because we passed it here as an argument, this will become an

84
00:07:32,560 --> 00:07:37,120
attribute of hc, and we can access it like that.

85
00:07:39,120 --> 00:07:49,740
So there I will print out the dictionary and down here I'll print out also the type of that hc option,

86
00:07:49,740 --> 00:07:51,330
so that you can see what type it is.

87
00:07:51,750 --> 00:07:57,030
And control C to interrupt the current instance of the app, run again.

88
00:07:57,570 --> 00:08:04,170
And nothing will happen now because I haven't loaded any instance of the page yet.

89
00:08:04,300 --> 00:08:10,510
So if I go to the page and then I go back here, you're going to see that something was printed out

90
00:08:10,510 --> 00:08:12,540
since when I loaded the page

91
00:08:13,560 --> 00:08:18,560
this app function is executed and therefore these two lines are executed.

92
00:08:19,140 --> 00:08:20,030
So let's see.

93
00:08:20,760 --> 00:08:23,480
This is the dictionary, right?

94
00:08:23,550 --> 00:08:24,240
It starts there.

95
00:08:24,240 --> 00:08:24,870
It ends here.

96
00:08:25,050 --> 00:08:28,070
It's the same dictionary that we pasted here as a string.

97
00:08:28,620 --> 00:08:32,330
You also see the type is not exactly a dictionary.

98
00:08:32,670 --> 00:08:36,660
It's a different type of dictionary that it is like a python dictionary.

99
00:08:36,660 --> 00:08:44,060
Plus it allows us to access the dictionary keys using a dot notation.

100
00:08:44,700 --> 00:08:48,630
So, for example, let me show you what that means.

101
00:08:48,630 --> 00:08:54,180
If you go here to hc.options and you say dot again.

102
00:08:56,680 --> 00:09:04,210
You can access all the keys of this dictionary, for example, let's say we want to change the title,

103
00:09:05,560 --> 00:09:12,790
this title here, right, so we can access that title key using dot title.

104
00:09:13,180 --> 00:09:16,560
And then this title also has a dictionary on its own.

105
00:09:17,090 --> 00:09:20,720
We can access the text of the title using the dot notation again.

106
00:09:21,340 --> 00:09:25,940
So let me do that, the title dot text.

107
00:09:25,990 --> 00:09:27,850
Right.

108
00:09:27,850 --> 00:09:29,440
Title dot text is a hierarchy.

109
00:09:30,720 --> 00:09:34,660
So let me stop the app instance and run again.

110
00:09:36,580 --> 00:09:42,130
Go and reload the page and see what we get, to print it out

111
00:09:42,140 --> 00:09:42,580
this time.

112
00:09:42,740 --> 00:09:50,260
You see, we got access to the value of that text key, which was that title.

113
00:09:52,900 --> 00:10:04,970
Now, that allows us to change the title to something else, like average rating by day.

114
00:10:05,680 --> 00:10:10,870
So let me stop, for instance, run again, reload.

115
00:10:13,360 --> 00:10:20,890
And you see that the title has changed to average rating by day, where I'm trying to get to is that

116
00:10:21,220 --> 00:10:28,000
you can change everything from this graph, anything that you like, anything that you need to change

117
00:10:28,000 --> 00:10:28,680
from this graph.

118
00:10:29,110 --> 00:10:36,370
And of course, our first interest is to change the data of this graph, because currently you see

119
00:10:36,370 --> 00:10:40,030
that the graph has the series key.

120
00:10:42,010 --> 00:10:49,780
And this series, he has a name, temperature and the data.
These are the data that are being plotted

121
00:10:49,960 --> 00:10:54,490
on the graph, so you see a 0, 15, 10, minus 50.

122
00:10:54,730 --> 00:10:59,470
So you see, for example, 15 is the temperature, zero is the kilometers.

123
00:10:59,890 --> 00:11:05,520
And then we have, as I said, 10 minus 50.

124
00:11:05,530 --> 00:11:10,990
So at 10 kilometers altitude at the temperature is around minus 50.

125
00:11:12,020 --> 00:11:17,240
So those are the data. Let's change those data to something else.

126
00:11:21,920 --> 00:11:30,500
To do that, we need to get access to hc.options.serious.

127
00:11:32,690 --> 00:11:33,040
Right.

128
00:11:33,210 --> 00:11:41,060
Series and series is a list, so you have to be very careful here, you have to understand python

129
00:11:41,330 --> 00:11:48,800
data structures and this is an excellent, actually an excellent practice to really understand and level up

130
00:11:48,800 --> 00:11:53,560
your skills with Python data structures such as lists and dictionaries.

131
00:11:53,900 --> 00:11:59,870
So serious is a key and the value of this key is a list.

132
00:12:00,140 --> 00:12:04,060
And that list is made of a dictionary.

133
00:12:04,850 --> 00:12:08,480
So it has only one item on this list.

134
00:12:08,480 --> 00:12:15,950
And that item is the dictionary. This dictionary has two keys, a name Key and the Delta Key.

135
00:12:16,250 --> 00:12:19,160
The name Key has as value temperature.

136
00:12:20,090 --> 00:12:23,420
The data key has as value this list.

137
00:12:24,080 --> 00:12:30,820
So it's one lists with multiple values as lists as items.

138
00:12:30,830 --> 00:12:32,160
It's a list of lists.

139
00:12:33,200 --> 00:12:36,110
So the second list, the third list and so on.

140
00:12:37,140 --> 00:12:45,870
And so so far, this gives us this list, right, and out of that list, we want the first item,

141
00:12:45,870 --> 00:12:49,920
so that'll be item with index zero, right?

142
00:12:50,940 --> 00:12:52,800
So which is in the dictionary.

143
00:12:53,670 --> 00:12:56,910
That means this for we have a dictionary.

144
00:12:59,190 --> 00:13:09,840
Out of the dictionary, we want dot data so that now is that the list, we have access to that list

145
00:13:09,840 --> 00:13:12,030
and we can change that.

146
00:13:12,030 --> 00:13:15,290
We can set a new value and new list to that list.

147
00:13:15,600 --> 00:13:22,830
For example, let me create some dummy data, three four.

148
00:13:25,320 --> 00:13:26,430
Six, seven.

149
00:13:29,560 --> 00:13:32,890
Eight, nine, so we have three points.

150
00:13:34,710 --> 00:13:43,530
Let me stop the app, run again, reload, and this is a new graph.

151
00:13:48,790 --> 00:13:58,210
So, again, the data were three, four, six, seven, eight, nine, three, four, three is the X,

152
00:13:58,460 --> 00:14:01,480
so this is a reverse graph actually.

153
00:14:01,510 --> 00:14:04,210
So three is Y, four is the X.

154
00:14:04,390 --> 00:14:12,070
If you want to reverse this graph, if you don't feel comfortable with that, you can go here and change

155
00:14:12,070 --> 00:14:13,030
that to false.

156
00:14:14,860 --> 00:14:21,280
And you could also change this data directly here without having to change them here through the dictionary.

157
00:14:22,720 --> 00:14:30,820
But later on, we are going to inject data frames so columns from the data frames and this is a proper

158
00:14:30,820 --> 00:14:31,540
way to do that.

159
00:14:31,550 --> 00:14:37,900
So this one here, because it allows us to work with a dictionary instead of working with a string.

160
00:14:38,020 --> 00:14:44,640
And the string is not a data structure designed to hold data inside.

161
00:14:46,090 --> 00:14:50,400
But anyway, for simple things like that, you can just change the values directly here.

162
00:14:50,530 --> 00:14:53,710
So inverted set it to false.

163
00:14:55,330 --> 00:14:59,050
Stop and run, reload.

164
00:15:01,620 --> 00:15:09,600
And now the graph is different, so you see the altitude's is down here, the temperature is in the

165
00:15:09,600 --> 00:15:10,650
Y axis now.

166
00:15:12,290 --> 00:15:18,780
All right, so I manually typed down some data here, but this is not what real life looks like,

167
00:15:18,800 --> 00:15:21,700
so in real life, you'll not have data in this format.

168
00:15:21,710 --> 00:15:27,940
Usually you have the data frame, in a csv file, just like we have them in our app.

169
00:15:28,130 --> 00:15:34,210
So we have the data in the reviews.csv and the format will be slightly different.

170
00:15:34,610 --> 00:15:42,560
And usually we are going to have something like an x ray for the x axis, which should look, let's

171
00:15:42,560 --> 00:15:45,830
say three, six and eight.

172
00:15:45,830 --> 00:15:54,460
And then we have Y equals to four, seven and nine, so not like that.

173
00:15:55,670 --> 00:16:01,820
Therefore, our goal is to turn that those two lists into this list.

174
00:16:01,830 --> 00:16:02,960
How do we do that?

175
00:16:03,350 --> 00:16:11,570
We do that using the zip object, which basically produces that kind of list.

176
00:16:12,020 --> 00:16:18,020
So in this format with pairs of lists and that expects X and Y.

177
00:16:18,230 --> 00:16:19,640
So two lists.

178
00:16:20,180 --> 00:16:22,620
However, this is not a list yet.

179
00:16:23,480 --> 00:16:25,850
This is a zip object.

180
00:16:25,850 --> 00:16:28,640
I can show you that in a python shell.

181
00:16:32,020 --> 00:16:38,050
So let's say we have this list and we have that list.

182
00:16:42,040 --> 00:16:51,490
And zip(x, y) is going to still be a zip object, you want to convert that zip object into a list using

183
00:16:51,490 --> 00:16:53,500
the list function.

184
00:16:53,890 --> 00:17:00,340
So X and Y now we get to that list that we were expecting.

185
00:17:00,610 --> 00:17:04,600
Therefore, we can get that list and use it there.

186
00:17:05,590 --> 00:17:13,270
Now, if I go to the other terminal here, I stop the app, run it again.

187
00:17:17,660 --> 00:17:22,640
Reloads, and we still get the same graphs with those data.

188
00:17:26,180 --> 00:17:27,950
Now, what if

189
00:17:29,810 --> 00:17:36,740
these are coming from a data frame? So that brings us to our app with our reviews data.

190
00:17:37,780 --> 00:17:42,520
So let me go over to the codes we were working on, on Jupyter.

191
00:17:46,020 --> 00:17:54,900
Which is this one in here, so we load the data frame with that code, I'm going to copy that and paste

192
00:17:54,900 --> 00:17:58,110
it's here on top after importing JustPy.

193
00:17:59,760 --> 00:18:01,740
We have this data frame now.

194
00:18:03,120 --> 00:18:07,940
And what else did we have to calculate the average rating?

195
00:18:07,990 --> 00:18:15,210
Yeah, we had this the average data frame, which was an aggregated version of the data data frame.

196
00:18:17,160 --> 00:18:24,890
So I'm going to copy these two lines and I'm going to paste them in here.

197
00:18:25,920 --> 00:18:33,060
So day_average is the data frame we are interested about and it has an index, which is going to be

198
00:18:33,060 --> 00:18:39,920
the date and a rating column, which has the average ratings for every day.

199
00:18:40,830 --> 00:18:47,310
So you can just... To refresh your memory, it looks like this. Right.

200
00:18:47,430 --> 00:18:55,260
Now instead of X, we would have day_average, the data framed dot index.

201
00:18:56,130 --> 00:18:58,710
So that will be used as the x axis.

202
00:18:59,460 --> 00:19:07,890
And then for Y we would have day_average rating.

203
00:19:08,130 --> 00:19:09,040
So that column.

204
00:19:09,630 --> 00:19:12,820
So these are treated as two lists by zip and zip

205
00:19:12,840 --> 00:19:18,720
then we'll pair them up so it will create a pair of date and rating.

206
00:19:18,720 --> 00:19:22,440
So, for example, it will... On the background

207
00:19:22,440 --> 00:19:25,420
it will look like a list of lists, as I explained to you.

208
00:19:25,440 --> 00:19:35,070
So the first date would be like 2021-3-3 and the rating 

209
00:19:35,070 --> 00:19:35,370
4.51.

210
00:19:35,650 --> 00:19:36,080
Let's say.

211
00:19:36,120 --> 00:19:41,330
And so one the next date and you get you get the idea.

212
00:19:41,910 --> 00:19:43,380
So let's try this out.

213
00:19:45,390 --> 00:19:46,800
It will not work.

214
00:19:46,800 --> 00:19:48,030
And I'll tell you why.

215
00:19:51,610 --> 00:19:57,190
So as I told you, we get an empty graph and no errors.

216
00:19:57,850 --> 00:20:02,530
The reason this doesn't work is that HighCharts considers the date

217
00:20:02,920 --> 00:20:07,750
so those kinds of dots are it considers them as categories

218
00:20:08,020 --> 00:20:10,350
types of dots, not numbers.

219
00:20:10,690 --> 00:20:20,290
And in that case, you need to provide this data in another way, and that is through options dot

220
00:20:20,500 --> 00:20:24,620
xAxis.categories.

221
00:20:25,000 --> 00:20:25,970
So what is that?

222
00:20:26,380 --> 00:20:34,930
Well, X-axis is actually here and we are doing x-axis

223
00:20:34,930 --> 00:20:35,880
dot categories.

224
00:20:36,040 --> 00:20:41,560
No, you don't see a categories key here, but we are creating that key.

225
00:20:45,550 --> 00:20:56,710
And that is going to be equal to list(day_average.index), so we are converting that to a list and providing

226
00:20:56,710 --> 00:20:58,570
that list to that category.

227
00:20:58,730 --> 00:21:00,280
This is a list of dates.

228
00:21:01,240 --> 00:21:10,340
And then for data on, all we have to do is convert to a list, the rating column.

229
00:21:11,680 --> 00:21:12,040
Right.

230
00:21:12,940 --> 00:21:16,420
Let me stop the script and see what we will get this time.

231
00:21:19,610 --> 00:21:26,840
Refresh and boom, we get the graph that we were expecting, the graph is interactive, but you see

232
00:21:26,840 --> 00:21:34,360
that we have some of the labels here and some titles for the Axis, which are from the old example.

233
00:21:34,380 --> 00:21:37,210
So altitude and temperature, but we can change them.

234
00:21:38,150 --> 00:21:46,400
So I would suggest you can change them directly in the JavaScript code so you can change the text of

235
00:21:46,400 --> 00:21:47,500
the title from here.

236
00:21:47,510 --> 00:21:49,310
You can change that subtitle from there.

237
00:21:50,180 --> 00:21:53,240
So I believe that is easy to do in the code.

238
00:21:55,010 --> 00:22:02,480
Just to give you a quick summary, what we did is we load the data frame here that we need,

239
00:22:02,480 --> 00:22:06,200
so day_average is the data frame that contains our data, then here

240
00:22:06,200 --> 00:22:09,110
we have the HighCharts JavaScript code.

241
00:22:10,490 --> 00:22:14,880
Then we have the function that renders the webpage, we have the webpage component.

242
00:22:14,900 --> 00:22:19,940
We have these two components, normal components, text, so QDiv.

243
00:22:20,300 --> 00:22:29,900
And then we have the HighCharts component, which contains no this chart_def Json as a dictionary so

244
00:22:29,900 --> 00:22:36,410
we can access that dictionary through options since that is stored in options.

245
00:22:36,680 --> 00:22:43,970
So now hc.options is the dictionary and therefore we can access the properties from the dictionary

246
00:22:43,970 --> 00:22:45,620
and change them as we wish.

247
00:22:45,870 --> 00:22:50,100
And the most important use of that is to set the data.

248
00:22:51,260 --> 00:22:56,150
So you saw that four dots are that contain categories, not numbers.

249
00:22:56,810 --> 00:23:06,230
You can use that x-axis and set that categories property to a list, which is a list of dates, and then

250
00:23:06,230 --> 00:23:10,190
data is equal to a simple list of ratings.

251
00:23:10,640 --> 00:23:11,620
This is the app.

252
00:23:11,630 --> 00:23:15,250
Thanks for following and this was a long video,

253
00:23:15,260 --> 00:23:22,400
but the next apps are going to take much less time because you now know the process and with some

254
00:23:22,400 --> 00:23:25,370
practice you'll be able to make any graph you like.

255
00:23:25,880 --> 00:23:26,300
Thank you.