1 00:00:00,000 --> 00:00:02,009 Hello, welcome back. In the previous 2 00:00:02,010 --> 00:00:05,100 video, we made an app with JustPy. 3 00:00:05,910 --> 00:00:09,120 This app contains two components. So 4 00:00:09,120 --> 00:00:11,910 they are referred to as components in 5 00:00:11,910 --> 00:00:14,370 JustPy. So this component here QDiv 6 00:00:14,370 --> 00:00:17,040 and another component QDiv, they both 7 00:00:17,070 --> 00:00:19,350 are added to the main component, which 8 00:00:19,350 --> 00:00:21,840 is the QuasarPage. In this lecture, we 9 00:00:21,840 --> 00:00:24,330 are going to add a third component, 10 00:00:24,330 --> 00:00:27,750 which is going to be a Highchart graph, 11 00:00:27,780 --> 00:00:31,500 which is still a component of JustPy. 12 00:00:32,040 --> 00:00:35,520 So let's do this step by step. I am 13 00:00:35,520 --> 00:00:38,490 going to create a new Python file where 14 00:00:38,490 --> 00:00:41,670 I'll be writing this new app. So let's 15 00:00:41,670 --> 00:00:46,830 name it average-rating-day. So average 16 00:00:46,830 --> 00:00:50,970 rating by day.py, and I'm just 17 00:00:50,970 --> 00:00:53,010 going to copy this code because we need 18 00:00:53,010 --> 00:00:55,710 that and paste it here, and now we just 19 00:00:55,710 --> 00:00:59,220 need to add the Highcharts component. So 20 00:00:59,220 --> 00:01:02,430 let's take things step by step. The very 21 00:01:02,430 --> 00:01:05,820 first step we want to go through is, we 22 00:01:05,820 --> 00:01:09,120 want to find the proper graph that we 23 00:01:09,120 --> 00:01:11,970 need, and there is a very good way to do 24 00:01:11,970 --> 00:01:14,100 that, we can go to the Highcharts 25 00:01:14,130 --> 00:01:18,150 documentation, and look at examples, at 26 00:01:18,150 --> 00:01:20,820 the graph examples that they show on 27 00:01:20,820 --> 00:01:23,130 that page, and then we can pick one of 28 00:01:23,130 --> 00:01:25,440 them. So let's do that. Let's choose a 29 00:01:25,440 --> 00:01:29,010 graph that we need. So go to your 30 00:01:29,010 --> 00:01:32,520 browser, and just look for highcharts 31 00:01:32,765 --> 00:01:35,915 docs on Google. You'll find this page 32 00:01:35,940 --> 00:01:37,287 Highcharts Documentation. 33 00:01:37,311 --> 00:01:40,686 [No audio] 34 00:01:40,711 --> 00:01:42,150 So Highcharts 35 00:01:42,210 --> 00:01:46,230 is also a JavaScript library to produce 36 00:01:46,230 --> 00:01:49,950 plots. So just like Quasar, Quasar was a 37 00:01:49,950 --> 00:01:52,620 JavaScript library. It's all related to 38 00:01:52,650 --> 00:01:56,130 Highcharts, and Python is getting these 39 00:01:56,155 --> 00:01:58,525 two libraries, these two frameworks 40 00:01:58,620 --> 00:02:01,290 together, which is really great for us 41 00:02:01,290 --> 00:02:03,870 Python programmers to use both of these 42 00:02:03,900 --> 00:02:07,050 two modern JavaScript libraries from 43 00:02:07,050 --> 00:02:09,900 Python. So here we are in the Highcharts 44 00:02:09,900 --> 00:02:12,150 Documentation, and we want to go to 45 00:02:12,150 --> 00:02:15,030 Chart and series types, and here, you're 46 00:02:15,030 --> 00:02:17,100 going to see that we have different 47 00:02:17,100 --> 00:02:22,050 types of charts. So in our case, I think 48 00:02:23,269 --> 00:02:27,649 a Spline chart would be appropriate. So 49 00:02:27,900 --> 00:02:30,120 if you go and click over Spline 50 00:02:30,145 --> 00:02:34,290 chart, you're going to see this example 51 00:02:34,290 --> 00:02:37,170 here. So it's about Temperature by 52 00:02:37,170 --> 00:02:40,650 Altitudes. It has this Temperature axis 53 00:02:40,680 --> 00:02:43,740 horizontally and this Altitude axis 54 00:02:43,770 --> 00:02:47,520 vertically. Now, each graph provides the 55 00:02:47,520 --> 00:02:51,360 code, the JavaScript code that produces 56 00:02:51,360 --> 00:02:53,550 that particular graph, and you can see 57 00:02:53,550 --> 00:02:56,460 that you can access it either from via 58 00:02:56,490 --> 00:02:59,370 jsFiddle or CodePen, which are 59 00:02:59,370 --> 00:03:02,250 basically two online code editor. So if 60 00:03:02,250 --> 00:03:05,460 you click jsFiddle, it's going to open 61 00:03:05,460 --> 00:03:08,520 up the code that produces that graph. 62 00:03:08,544 --> 00:03:11,885 [No audio] 63 00:03:11,910 --> 00:03:14,160 And every graph has its own code. So if 64 00:03:14,160 --> 00:03:17,828 you go to a stream graph, you go to jsFiddle 65 00:03:17,853 --> 00:03:19,320 again, it's going to show you the code 66 00:03:19,320 --> 00:03:24,785 for that Stream graph. Anyway, let's go 67 00:03:24,810 --> 00:03:27,420 back. So this is the graph we are 68 00:03:27,420 --> 00:03:29,670 interested about, and here is the code 69 00:03:29,670 --> 00:03:31,950 that produces that graph. So you can 70 00:03:31,950 --> 00:03:34,410 also see a live version of the graph 71 00:03:34,410 --> 00:03:36,990 here. If you change something here, it 72 00:03:36,990 --> 00:03:40,050 will produce at graph. But I'm not saying 73 00:03:40,050 --> 00:03:42,510 that you need to learn JavaScript, all 74 00:03:42,510 --> 00:03:46,560 we need to do is you need to copy the 75 00:03:46,560 --> 00:03:51,090 code that starts after comma of this 76 00:03:51,090 --> 00:03:54,960 container here. So that means from this 77 00:03:54,960 --> 00:03:57,948 curly bracket, you need to select it 78 00:03:57,972 --> 00:04:00,110 [No audio] 79 00:04:00,135 --> 00:04:03,180 and go down, down, until you see this 80 00:04:03,683 --> 00:04:06,443 semicolon and this round parenthesis 81 00:04:06,480 --> 00:04:09,630 and you want to copy up to this curly 82 00:04:09,630 --> 00:04:11,970 bracket. So you want to include that 83 00:04:11,970 --> 00:04:16,860 curly brackets. So press Ctrl C or go 84 00:04:16,860 --> 00:04:19,380 there and copy it, and then go to Python, 85 00:04:20,190 --> 00:04:22,715 and what we need to do is we want to 86 00:04:22,740 --> 00:04:27,330 create a string. Let's create a 87 00:04:27,330 --> 00:04:31,110 variable, let's say chart_definition is 88 00:04:31,110 --> 00:04:34,020 equal to a string, I'm going to use 89 00:04:34,020 --> 00:04:37,830 triple quotes, so six quotes, and I'm going 90 00:04:37,830 --> 00:04:41,010 to split them. So three quotes here, 91 00:04:41,100 --> 00:04:44,130 three quotes in here. Inside here, I'm 92 00:04:44,130 --> 00:04:48,480 going to paste all that code. So again, 93 00:04:48,510 --> 00:04:51,060 you have to be very careful here. This 94 00:04:51,060 --> 00:04:53,160 code starts with this curly brackets 95 00:04:53,190 --> 00:04:56,490 and then it goes chart and so on, and it 96 00:04:56,520 --> 00:05:00,335 ends with this curly bracket. Now, 97 00:05:00,360 --> 00:05:02,160 before I explain you what I'm doing 98 00:05:02,160 --> 00:05:04,890 here, let me first make it work quickly, 99 00:05:04,890 --> 00:05:06,930 and then I come back to the code and 100 00:05:06,930 --> 00:05:09,090 explain you what's going on in here. So 101 00:05:09,360 --> 00:05:11,220 once you have the code definition, 102 00:05:11,220 --> 00:05:16,140 that's one, you want to go here, and let's 103 00:05:16,140 --> 00:05:21,330 say hc for Highcharts, jp.High, 104 00:05:21,750 --> 00:05:25,650 capital C, Charts. So that is the 105 00:05:25,650 --> 00:05:29,044 component we want to use, a equal to wp, 106 00:05:29,069 --> 00:05:32,850 so the standard argument, and now this 107 00:05:32,850 --> 00:05:37,710 HighCharts component expects an options 108 00:05:37,800 --> 00:05:41,880 arguments, which is equal to this 109 00:05:41,880 --> 00:05:44,160 variable, which contains the JavaScript 110 00:05:44,160 --> 00:05:46,792 code, chart_def, in my case. 111 00:05:46,816 --> 00:05:48,816 [No audio] 112 00:05:48,837 --> 00:05:52,202 That's it. Now, if I execute this code, 113 00:05:52,226 --> 00:05:55,437 [No audio] 114 00:05:55,462 --> 00:05:58,350 you see the app is running, Command click or 115 00:05:58,350 --> 00:06:00,810 Ctrl click, and this is the web app 116 00:06:00,840 --> 00:06:03,780 with the graph inside. So this was the 117 00:06:03,780 --> 00:06:07,710 first step, getting the codes from the 118 00:06:07,890 --> 00:06:10,740 Highcharts Documentation and pasting the 119 00:06:10,740 --> 00:06:15,570 code inside your Python program. Now, 120 00:06:15,570 --> 00:06:17,550 let me explain you the first step, what 121 00:06:17,550 --> 00:06:20,910 we just did. So as I explained to you 122 00:06:20,910 --> 00:06:22,830 HighCharts is a JavaScript library, 123 00:06:23,010 --> 00:06:25,950 therefore, this here is JavaScript code. 124 00:06:26,100 --> 00:06:28,440 But in this case, this is JSON, so 125 00:06:28,470 --> 00:06:31,470 JavaScript uses JSON and JSON format is 126 00:06:31,470 --> 00:06:34,890 a familiar format for Python. So it 127 00:06:34,890 --> 00:06:37,380 looks like a dictionary. You can see it 128 00:06:37,380 --> 00:06:39,600 starts with this curly brackets, and 129 00:06:39,600 --> 00:06:43,500 then you have this key. So even though 130 00:06:43,500 --> 00:06:45,780 it's a string, now currently, it's a 131 00:06:45,780 --> 00:06:48,900 Python string, what happens when we do 132 00:06:48,900 --> 00:06:53,280 this here is that JustPy will convert 133 00:06:53,280 --> 00:06:58,980 that into a Python dictionary. So a real 134 00:06:59,010 --> 00:07:01,710 object that Python can read and 135 00:07:01,710 --> 00:07:04,740 manipulate. So JustPy will process this 136 00:07:04,740 --> 00:07:07,290 dictionary, and it will render it as a 137 00:07:07,290 --> 00:07:12,120 graph on the webpage. I can prove you 138 00:07:12,120 --> 00:07:15,150 that Python has successfully read this 139 00:07:15,150 --> 00:07:19,350 string as a dictionary by printing out. 140 00:07:19,703 --> 00:07:20,721 So print 141 00:07:20,745 --> 00:07:22,929 [No audio] 142 00:07:22,954 --> 00:07:27,330 hc.options. So 143 00:07:27,360 --> 00:07:30,090 options, because we pass it here as an 144 00:07:30,090 --> 00:07:33,210 argument, this will become an attribute 145 00:07:33,260 --> 00:07:37,116 of hc, and we can access it like that. 146 00:07:37,140 --> 00:07:39,140 [No audio] 147 00:07:39,169 --> 00:07:41,490 So there I will print out the 148 00:07:41,490 --> 00:07:44,280 dictionary, and down here, I'll print 149 00:07:44,280 --> 00:07:45,602 out also the type 150 00:07:47,274 --> 00:07:49,865 of that hc.options, so 151 00:07:49,890 --> 00:07:53,190 you can see what type it is, and Ctrl C 152 00:07:53,190 --> 00:07:55,860 to interrupt the current instance of the 153 00:07:55,860 --> 00:07:59,100 app, run again, and nothing will happen 154 00:07:59,100 --> 00:08:01,890 now, because I haven't loaded any 155 00:08:01,890 --> 00:08:05,190 instance of the page yet. So if I go to 156 00:08:05,190 --> 00:08:08,190 the page, and then I go back here, 157 00:08:08,369 --> 00:08:09,960 you're going to see that something was 158 00:08:09,960 --> 00:08:12,120 printed out since when I loaded the 159 00:08:12,120 --> 00:08:16,230 page, this app function is executed, and 160 00:08:16,230 --> 00:08:18,600 therefore these two lines are executed. 161 00:08:19,140 --> 00:08:22,590 So let's see. This is the dictionary, 162 00:08:23,075 --> 00:08:25,325 right? It starts there, it ends here, is the 163 00:08:25,350 --> 00:08:27,570 same dictionary that we pasted here as a 164 00:08:27,570 --> 00:08:30,690 string. You also see that the type is 165 00:08:30,690 --> 00:08:32,970 not exactly a dictionary. It's a 166 00:08:32,970 --> 00:08:35,370 different type of dictionary that it is 167 00:08:35,370 --> 00:08:38,640 like a Python dictionary plus, it allows 168 00:08:38,640 --> 00:08:42,600 us to access the dictionary keys using a 169 00:08:42,600 --> 00:08:46,920 '.' notation. So for example, let me 170 00:08:46,920 --> 00:08:49,770 show you what that means. If you go here 171 00:08:49,770 --> 00:08:54,255 to hc.options, and you say '.' again, 172 00:08:54,280 --> 00:08:56,594 [No audio] 173 00:08:56,619 --> 00:08:59,220 you can access all the keys of 174 00:08:59,220 --> 00:09:02,400 this dictionary. For example, let's say 175 00:09:02,400 --> 00:09:05,880 we want to change the title, this 176 00:09:05,880 --> 00:09:09,570 title here, right? So we can access that 177 00:09:10,320 --> 00:09:13,620 title key using .title, and then 178 00:09:13,620 --> 00:09:16,260 this title also has a dictionary on its 179 00:09:16,260 --> 00:09:18,900 own. Here, we can access the text of the 180 00:09:18,900 --> 00:09:21,720 title using the '.' notation again. So 181 00:09:21,745 --> 00:09:26,425 let me do that, .title.text, right. 182 00:09:27,365 --> 00:09:31,055 title.text is a hierarchy. So let 183 00:09:31,080 --> 00:09:34,690 me stop the app instance and run again. 184 00:09:36,517 --> 00:09:38,522 Go and reload the page 185 00:09:38,546 --> 00:09:40,546 [No audio] 186 00:09:40,547 --> 00:09:42,721 and see what we get printed out this time. 187 00:09:42,745 --> 00:09:47,460 You see we got access to the value of that text 188 00:09:47,490 --> 00:09:50,288 key, which was that title. 189 00:09:50,312 --> 00:09:52,896 [No audio] 190 00:09:52,921 --> 00:09:59,495 Now that allows us to change the title to 191 00:09:59,525 --> 00:10:04,415 something else, like Average Rating by 192 00:10:04,440 --> 00:10:09,000 Day. So let me stop the instance, run 193 00:10:09,000 --> 00:10:10,963 again, reload, 194 00:10:10,987 --> 00:10:13,310 [No audio] 195 00:10:13,335 --> 00:10:14,460 and you see that the 196 00:10:14,460 --> 00:10:17,730 title has changed to Average Rating by 197 00:10:17,755 --> 00:10:20,995 Day. What I'm trying to get to is that 198 00:10:21,180 --> 00:10:24,330 you can change everything from this 199 00:10:24,330 --> 00:10:27,030 graph, anything that you like, anything 200 00:10:27,030 --> 00:10:28,680 that you need to change from this graph, 201 00:10:29,165 --> 00:10:32,645 and, of course, our first interest is to 202 00:10:32,670 --> 00:10:35,070 change the data of this graph, because 203 00:10:35,070 --> 00:10:39,960 currently, you see that the graph has a series key, 204 00:10:39,984 --> 00:10:41,984 [No audio] 205 00:10:42,009 --> 00:10:43,230 and this series key 206 00:10:43,230 --> 00:10:47,160 has a name, Temperature, and the data, 207 00:10:47,190 --> 00:10:49,170 these are the data that are being 208 00:10:49,199 --> 00:10:52,720 plotted on the graph. So you see a 0, 15, 209 00:10:52,750 --> 00:10:56,015 10, -50. So you see, for example, 210 00:10:56,040 --> 00:10:58,800 15 is the temperature, 0 is a 211 00:10:58,800 --> 00:11:03,000 kilometers, and then we have, as I said, 212 00:11:03,240 --> 00:11:08,130 10, -50. So 10 kilometers altitude, 213 00:11:08,550 --> 00:11:11,040 and the temperature is around -50. 214 00:11:12,000 --> 00:11:15,060 So those are the data. Let's change 215 00:11:15,060 --> 00:11:17,388 those data to something else. 216 00:11:17,412 --> 00:11:21,759 [No audio] 217 00:11:21,784 --> 00:11:24,248 To do that, we need to get access to 218 00:11:24,273 --> 00:11:30,491 hc.options.series, 219 00:11:30,515 --> 00:11:32,726 [No audio] 220 00:11:32,751 --> 00:11:34,860 right, series. And 221 00:11:34,860 --> 00:11:38,370 series is a list. So you have to be very 222 00:11:38,370 --> 00:11:40,260 careful here, you have to understand 223 00:11:40,560 --> 00:11:43,050 Python data structures and this is an 224 00:11:43,050 --> 00:11:45,300 excellent, actually excellent practice 225 00:11:45,780 --> 00:11:48,930 to really understand and level up your 226 00:11:48,930 --> 00:11:51,960 skills with Python data structures, such 227 00:11:51,960 --> 00:11:55,710 as lists and dictionaries. So series is 228 00:11:55,710 --> 00:11:59,280 a key, and the value of this key is a 229 00:11:59,280 --> 00:12:03,120 list, and that list is made off a 230 00:12:03,120 --> 00:12:07,020 dictionary. So it has only one item, 231 00:12:07,650 --> 00:12:10,020 this list, and that item is the 232 00:12:10,020 --> 00:12:13,050 dictionary, then this dictionary has two 233 00:12:13,050 --> 00:12:16,470 keys, a name key and a data key. The 234 00:12:16,470 --> 00:12:20,310 name key has as value Temperature, the 235 00:12:20,310 --> 00:12:24,300 data key has as value this list. So 236 00:12:24,300 --> 00:12:27,900 it's one list with multiple values as 237 00:12:29,195 --> 00:12:33,635 lists, as items. It's a list of lists. So 238 00:12:33,660 --> 00:12:35,850 the second list, the third list, and so 239 00:12:35,850 --> 00:12:40,800 on. And so far this gives us this 240 00:12:40,800 --> 00:12:44,010 list, right? And out of that list, we 241 00:12:44,010 --> 00:12:46,890 want the first item, so that will be 242 00:12:47,135 --> 00:12:52,220 item with index 0, right? So we is the 243 00:12:52,250 --> 00:12:55,175 the dictionary, that means this far 244 00:12:55,200 --> 00:12:56,987 we have a dictionary. 245 00:12:57,011 --> 00:12:59,154 [No audio] 246 00:12:59,179 --> 00:13:03,355 Out of the dictionary, we want .data. 247 00:13:03,683 --> 00:13:09,485 So that now is that list. We have access to that 248 00:13:09,510 --> 00:13:12,930 list, and we can change that, we can set 249 00:13:12,960 --> 00:13:16,355 a new value, a new list to that list. For example, 250 00:13:16,379 --> 00:13:18,410 [No audio] 251 00:13:18,435 --> 00:13:22,862 let me create some dummy data, 3, 4, 252 00:13:22,886 --> 00:13:25,275 [No audio] 253 00:13:25,300 --> 00:13:26,488 6, 7, 254 00:13:26,512 --> 00:13:29,583 [No audio] 255 00:13:29,614 --> 00:13:35,230 8, 9. So we have three points. Let me 256 00:13:35,880 --> 00:13:38,266 stop the app, run again, 257 00:13:38,290 --> 00:13:40,393 [No audio] 258 00:13:40,431 --> 00:13:43,603 reload, and this is a new graph. 259 00:13:43,627 --> 00:13:48,725 [No audio] 260 00:13:48,750 --> 00:13:52,820 So again, the data were 3, 4, 6, 7, 8, 9. 261 00:13:53,720 --> 00:13:57,780 3, 4, so 3 is the 262 00:13:57,810 --> 00:14:00,930 x. So this is an reverse graph, 263 00:14:00,930 --> 00:14:03,930 actually. So 3 is the y, 4 is the 264 00:14:03,930 --> 00:14:06,480 x. If you want to reverse this graph, if 265 00:14:06,480 --> 00:14:08,191 you don't feel comfortable with that, 266 00:14:08,351 --> 00:14:13,236 you can go here and change that to false, 267 00:14:14,863 --> 00:14:16,200 and you could also change this 268 00:14:16,200 --> 00:14:18,180 data directly here without having to 269 00:14:18,180 --> 00:14:21,300 change them here through the dictionary. 270 00:14:22,560 --> 00:14:25,890 But later on, we are going to inject 271 00:14:25,919 --> 00:14:29,587 DataFrames, so columns from DataFrames, 272 00:14:29,612 --> 00:14:31,350 and this is a proper way to do 273 00:14:31,350 --> 00:14:33,540 that. So this one here, because it 274 00:14:33,540 --> 00:14:35,400 allows us to work with a dictionary 275 00:14:35,400 --> 00:14:38,280 instead of working with a string and 276 00:14:38,280 --> 00:14:41,010 the string is not a data structure 277 00:14:41,100 --> 00:14:46,380 designed to hold data inside. But 278 00:14:46,410 --> 00:14:48,480 anyway, for simple things like that, you 279 00:14:48,480 --> 00:14:50,130 can just change the values directly 280 00:14:50,130 --> 00:14:53,130 here. So inverted out, set it to false 281 00:14:53,155 --> 00:14:59,096 and stop and run, reload, 282 00:14:59,120 --> 00:15:01,611 [No audio] 283 00:15:01,636 --> 00:15:05,700 and now the graph is different. So you see the 284 00:15:05,700 --> 00:15:09,000 Altitude is down here, the Temperature 285 00:15:09,000 --> 00:15:13,110 is in the y axis now. All right, so I 286 00:15:13,110 --> 00:15:15,450 manually typed down some data here. But 287 00:15:15,450 --> 00:15:18,450 this is not what real life looks like. 288 00:15:18,450 --> 00:15:20,700 So in real life, you'll not have the data 289 00:15:20,700 --> 00:15:22,830 in this form, as usually you have them 290 00:15:22,860 --> 00:15:25,710 in a DataFrame in a csv file, just 291 00:15:25,710 --> 00:15:28,770 like we have them in our app. So we have 292 00:15:28,770 --> 00:15:31,410 the data in the reviews.csv and 293 00:15:31,410 --> 00:15:33,510 server format will be slightly 294 00:15:33,510 --> 00:15:36,120 different. Usually, we're going to have 295 00:15:36,570 --> 00:15:40,710 something like an x array for the x axis, 296 00:15:41,070 --> 00:15:43,440 and we should look, let's say, 3, 297 00:15:44,040 --> 00:15:47,940 6, and 8, and then we have y equal 298 00:15:47,940 --> 00:15:53,910 to 4, 7, and 9. So not like 299 00:15:53,940 --> 00:15:58,230 that. Therefore, our goal is to turn 300 00:15:58,260 --> 00:16:02,100 that those two lists into this list. How 301 00:16:02,125 --> 00:16:06,625 do we do that? We do that using the zip 302 00:16:07,020 --> 00:16:10,410 object, which basically produces that 303 00:16:10,410 --> 00:16:13,530 kind of list. So in this format with 304 00:16:13,530 --> 00:16:18,600 pairs of lists, and that expects x and y. So 305 00:16:18,995 --> 00:16:22,115 two lists. However, this is not a list 306 00:16:22,140 --> 00:16:26,400 yet. This is a zip object, I can show 307 00:16:26,400 --> 00:16:28,620 you that you in a Python Shell. 308 00:16:28,645 --> 00:16:31,674 [No audio] 309 00:16:31,699 --> 00:16:35,888 So let's say we have this list, 310 00:16:36,443 --> 00:16:38,121 and we have that list, 311 00:16:38,145 --> 00:16:42,013 [No audio] 312 00:16:42,038 --> 00:16:44,670 and zip x, y is going to 313 00:16:44,670 --> 00:16:48,000 still be a zip object. You want to 314 00:16:48,000 --> 00:16:51,090 convert that zip object into a list 315 00:16:51,090 --> 00:16:55,437 using the list function, so x and y. 316 00:16:55,461 --> 00:16:57,499 [No audio] 317 00:16:57,524 --> 00:17:00,360 Now we get that list that we were expecting, 318 00:17:00,630 --> 00:17:04,050 therefore, we can get that list and use 319 00:17:04,050 --> 00:17:08,010 it there. Now, if I go to the other 320 00:17:08,010 --> 00:17:13,388 Terminal, here I stop the app, run it again, 321 00:17:13,412 --> 00:17:17,491 [No audio] 322 00:17:17,516 --> 00:17:19,890 reload, and we still get the same 323 00:17:20,520 --> 00:17:23,021 graph, so with those data. 324 00:17:23,045 --> 00:17:26,155 [No audio] 325 00:17:26,180 --> 00:17:28,020 Now, what if 326 00:17:29,790 --> 00:17:32,490 these are coming from a DataFrame? So 327 00:17:32,490 --> 00:17:35,880 that brings us to our app with our 328 00:17:35,880 --> 00:17:39,990 reviews data. So let me go over to the 329 00:17:39,990 --> 00:17:42,540 code we were working on Jupyter, 330 00:17:42,564 --> 00:17:45,995 [No audio] 331 00:17:46,020 --> 00:17:49,200 which is this one in here. So we load 332 00:17:49,200 --> 00:17:52,470 the DataFrame with that code. I'm going 333 00:17:52,470 --> 00:17:56,160 to copy that and paste it here on top 334 00:17:56,190 --> 00:18:00,180 after importing JustPy. Right? We have 335 00:18:00,180 --> 00:18:03,780 this data DataFrame now. And what 336 00:18:03,780 --> 00:18:06,750 else did we have to calculate the 337 00:18:06,750 --> 00:18:10,055 average rating? Here we had this day_average 338 00:18:10,726 --> 00:18:12,300 DataFrame, which was an 339 00:18:12,300 --> 00:18:15,158 aggregated version of the data DataFrame. 340 00:18:15,182 --> 00:18:17,182 [No audio] 341 00:18:17,207 --> 00:18:18,720 So I'm going to copy these two 342 00:18:18,720 --> 00:18:24,545 lines, and I'm going to paste them in 343 00:18:24,570 --> 00:18:29,040 here. So day_average is the DataFrame we 344 00:18:29,040 --> 00:18:31,110 are interested about, and it has an 345 00:18:31,110 --> 00:18:35,100 index, which is going to be the date and 346 00:18:35,550 --> 00:18:37,950 a rating column, which has the average 347 00:18:37,950 --> 00:18:42,210 ratings for every day. So you can, just 348 00:18:42,210 --> 00:18:44,168 to refresh your memory, it looks like this. 349 00:18:45,955 --> 00:18:50,730 Right? Now, instead of x, we would 350 00:18:50,765 --> 00:18:54,332 have day_average the DataFrame 351 00:18:54,357 --> 00:18:58,080 .index. So that will be used as the x 352 00:18:58,105 --> 00:19:05,171 axis, and then for y, we would have day_average 353 00:19:05,195 --> 00:19:07,260 [No audio] 354 00:19:07,285 --> 00:19:09,870 Rating, so that column. So 355 00:19:09,870 --> 00:19:12,240 these are treated as two lists by zip 356 00:19:12,240 --> 00:19:15,150 and zip, then we'll pair them up. So it 357 00:19:15,150 --> 00:19:18,690 will create a pair of date and rating. 358 00:19:18,690 --> 00:19:21,990 So for example, it will, on the 359 00:19:21,990 --> 00:19:24,180 background, it will look like a list of 360 00:19:24,180 --> 00:19:26,040 lists as I explained to you. So the 361 00:19:26,040 --> 00:19:31,563 first date would be like 2021-3-3, 362 00:19:32,477 --> 00:19:36,994 and the rating 4.51, let's say and so on, 363 00:19:37,989 --> 00:19:40,835 the next date, and you get 364 00:19:40,860 --> 00:19:43,410 the idea. So let's try this out. 365 00:19:43,434 --> 00:19:45,434 [No audio] 366 00:19:45,437 --> 00:19:48,188 It will not work and I'll tell you why. 367 00:19:48,212 --> 00:19:51,608 [No audio] 368 00:19:51,633 --> 00:19:56,280 So as I told you, we get an empty graph and 369 00:19:56,280 --> 00:19:59,100 no errors. The reason this doesn't work 370 00:19:59,100 --> 00:20:02,640 is that Highcharts considers the date, 371 00:20:02,885 --> 00:20:06,005 so those kinds of data, it considers 372 00:20:06,030 --> 00:20:09,150 them as categories types of data, 373 00:20:09,150 --> 00:20:12,570 not numbers, and in that case, you need 374 00:20:12,570 --> 00:20:15,900 to provide this data in another way, and 375 00:20:15,925 --> 00:20:17,255 that is through 376 00:20:18,556 --> 00:20:24,641 options.xAxis.categories. 377 00:20:24,963 --> 00:20:29,300 So what is that? Well, x axis is actually here, 378 00:20:29,324 --> 00:20:31,575 [No audio] 379 00:20:31,600 --> 00:20:33,540 and we are doing 380 00:20:34,260 --> 00:20:36,630 xAxis.categories. Now, you don't 381 00:20:36,630 --> 00:20:39,990 see a categories key here, but we are 382 00:20:39,990 --> 00:20:41,720 creating that key, 383 00:20:41,744 --> 00:20:45,539 [No audio] 384 00:20:45,564 --> 00:20:47,955 and that is going to be equal to 385 00:20:48,852 --> 00:20:53,789 list day_average.index. 386 00:20:54,030 --> 00:20:56,160 So, we are converting that to a list and 387 00:20:56,160 --> 00:20:58,650 providing that list to that categories. 388 00:20:58,740 --> 00:21:01,950 This is a list of date, and then for 389 00:21:01,950 --> 00:21:06,750 data, all we have to do is convert to a 390 00:21:06,750 --> 00:21:13,290 list, the rating column. Right. Let me 391 00:21:13,290 --> 00:21:16,488 stop the script and see what we will get this time. 392 00:21:16,512 --> 00:21:19,595 [No audio] 393 00:21:19,620 --> 00:21:21,840 Refresh and boom, we get the 394 00:21:21,990 --> 00:21:24,360 graph that we were expecting. The graph 395 00:21:24,360 --> 00:21:27,300 is interactive, but you see that we 396 00:21:27,300 --> 00:21:30,090 have some of the labels here and some titles 397 00:21:30,570 --> 00:21:33,570 for the axis which are from the old 398 00:21:33,600 --> 00:21:35,880 example, so Altitude and Temperature, 399 00:21:36,035 --> 00:21:38,555 but we can change them. So, I'll 400 00:21:38,580 --> 00:21:40,980 suggest you can change them directly in 401 00:21:41,040 --> 00:21:45,030 the JavaScript code. So you can change 402 00:21:45,030 --> 00:21:47,760 the text of the title from here, you can 403 00:21:47,760 --> 00:21:50,520 change the subtitle from there. So, I 404 00:21:50,520 --> 00:21:53,350 believe that is easy to do in the code. 405 00:21:54,930 --> 00:21:57,780 Just to give you a quick summary, what 406 00:21:57,780 --> 00:22:00,840 we did is we load the DataFrame here 407 00:22:01,145 --> 00:22:03,688 that we need, so day_average is the DataFrame 408 00:22:03,712 --> 00:22:06,210 that contains our data. Then here 409 00:22:06,210 --> 00:22:09,180 we have the HighCharts JavaScript code. 410 00:22:10,470 --> 00:22:12,360 Then we have the function that renders 411 00:22:12,360 --> 00:22:14,280 the webpage, we have the webpage 412 00:22:14,280 --> 00:22:17,430 component, we have these two components, 413 00:22:17,430 --> 00:22:20,520 normal components text, so QDiv, and 414 00:22:20,520 --> 00:22:22,680 then we have the HighCharts component, 415 00:22:23,165 --> 00:22:27,785 which contains now this chart_def json 416 00:22:27,829 --> 00:22:31,399 as a dictionary. So we can access that 417 00:22:31,650 --> 00:22:34,980 dictionary through options since that is 418 00:22:35,005 --> 00:22:38,783 stored in options. So now hc.options 419 00:22:38,812 --> 00:22:40,830 is the dictionary, and therefore, 420 00:22:40,830 --> 00:22:43,470 we can access then properties from the 421 00:22:43,470 --> 00:22:45,690 dictionary and change them as we wish. 422 00:22:45,960 --> 00:22:49,020 And the most important use of that is to 423 00:22:49,020 --> 00:22:52,950 set the data. So you saw that for data 424 00:22:52,950 --> 00:22:56,250 that contain categories, not numbers. 425 00:22:56,790 --> 00:23:00,300 You can use that x axis and set that 426 00:23:00,330 --> 00:23:03,480 categories property to a list, which is 427 00:23:03,505 --> 00:23:07,705 the list of dates, and then data is equal to 428 00:23:07,955 --> 00:23:11,225 a simple list of Ratings. This is the 429 00:23:11,250 --> 00:23:14,460 app, thanks for following, and this was a 430 00:23:14,460 --> 00:23:17,100 long video, both of the next apps are 431 00:23:17,100 --> 00:23:20,190 going to take much less time because you 432 00:23:20,190 --> 00:23:22,410 now know the process and with some 433 00:23:22,410 --> 00:23:24,570 practice, you'll be able to make any 434 00:23:24,595 --> 00:23:26,800 graph you like. Thank you.