1 00:00:00,030 --> 00:00:07,109 Hey! Hello again, and so we were able to build this Bokeh chart which is a candlestick 2 00:00:07,109 --> 00:00:13,740 chart and we were able to get data from the Pandas Data Reader Library, so the 3 00:00:13,740 --> 00:00:22,590 final product is an HTML file. Now if this output is enough for you, you can 4 00:00:22,590 --> 00:00:29,210 skip the next lectures, but if you want your plot to be seen by a wider audience 5 00:00:29,210 --> 00:00:38,010 so you'd have to actually host the URL of your plot in a live website so, and you 6 00:00:38,010 --> 00:00:45,090 also want to embed this plot in a web page, so you may want to have other 7 00:00:45,090 --> 00:00:49,710 elements and a website header with menus and so on. And then below you'll have 8 00:00:49,710 --> 00:00:55,980 the plot, so if you want to do that, then you need to follow the next lectures of 9 00:00:55,980 --> 00:01:01,590 this section because here what we will be doing is we will embed this chart in 10 00:01:01,590 --> 00:01:07,189 the website that we built with Flask some sections ago in this course. 11 00:01:07,189 --> 00:01:14,880 And in the section where we build this website with Flask you were able to 12 00:01:14,880 --> 00:01:19,590 deploy the website online so we have this URL and so in this section we will 13 00:01:19,590 --> 00:01:27,470 be embedding the plot that you see here in this webpage. So let me close this and 14 00:01:27,470 --> 00:01:33,030 let's do that. Now before we go ahead and write the code I'd like to talk about 15 00:01:33,030 --> 00:01:39,540 the concept behind embedding Bokeh charts in Flask, so if you go to the view 16 00:01:39,540 --> 00:01:46,350 page source or even better if you go to inspect element, so here you see the 17 00:01:46,350 --> 00:01:52,770 source code as you do with page source, but this is more organized, so what we 18 00:01:52,770 --> 00:02:00,240 got here is the body and now this HTML code here is responsible for rendering 19 00:02:00,240 --> 00:02:07,799 the chartt area and then you have the JavaScript code which is this one here 20 00:02:07,799 --> 00:02:12,209 and this holds the data that are being rendered in the chart, so you have 21 00:02:12,209 --> 00:02:19,560 HTML and JavaScript. And you also have two other 22 00:02:19,560 --> 00:02:25,770 things here the first one is the CSS which actually is being hosted in this 23 00:02:25,770 --> 00:02:32,160 website and you also have the script, the JavaScript which basically constructs 24 00:02:32,160 --> 00:02:38,820 all the elements of the chart. So this are inside the head tag, but this is what 25 00:02:38,820 --> 00:02:45,900 we're interested about, and this is a particular JavaScript code for Bokeh. 26 00:02:45,900 --> 00:02:53,160 So what we need to embed a Bokeh plot in Flask is we need this JavaScript code 27 00:02:53,160 --> 00:03:03,000 that you see here, and we need the code for the division so this one here and 28 00:03:03,000 --> 00:03:10,350 also these two links of the CSS and the JavaScript files, so 4 things. So you 29 00:03:10,350 --> 00:03:17,310 need to find a way to grab those 4 files out of your chart and then send 30 00:03:17,310 --> 00:03:24,390 them to the Flask web app. So for instance this is this is the source code 31 00:03:24,390 --> 00:03:31,440 of a web app that built that flask website and here are the virtual 32 00:03:31,440 --> 00:03:37,070 environment file so this has to do with Python and you know what virtual env is, 33 00:03:37,070 --> 00:03:41,130 so you'll learnt how to create virtual environment in the section where we 34 00:03:41,130 --> 00:03:48,000 build the Flask website and but this is what contains the scripts 35 00:03:48,000 --> 00:03:50,390 of the website. So now let's see how we can grab those 36 00:03:54,069 --> 00:04:00,010 four elements that I mentioned earlier. The first thing you need to know is you 37 00:04:00,010 --> 00:04:04,930 will not need these two lines anymore. These two are only to output a file 38 00:04:04,930 --> 00:04:12,970 locally so CSS HTML and that is saved in the local directory in your 39 00:04:12,970 --> 00:04:18,790 computer, and then you show that with the show method, so you don't need 40 00:04:18,790 --> 00:04:25,510 to do this anymore. So let me comment those so they are not 41 00:04:25,510 --> 00:04:32,220 executed and then what you need instead is you need to function called 42 00:04:32,220 --> 00:04:43,960 components. That function is part of the embed interface of Bokeh, so Bokeh 43 00:04:43,960 --> 00:04:52,419 dot embed import components. Now to generate the HTML and the script of your 44 00:04:52,419 --> 00:05:00,789 Bokeh chart you'd do something like you need to call the components function and 45 00:05:00,789 --> 00:05:08,560 then here you need to pass your figure object which is P, so in P we have stored 46 00:05:08,560 --> 00:05:16,630 the figure of our chart. So if I execute that now you see that we got some source 47 00:05:16,630 --> 00:05:22,050 code being generated which is actually a tuple so it starts with a round 48 00:05:22,050 --> 00:05:32,039 bracket in here, here and then it has the source code for the JavaScript 49 00:05:32,039 --> 00:05:38,410 and then you have a coma here, so the first element ends here and then the 50 00:05:38,410 --> 00:05:43,650 next element is the HTML code. This one here. 51 00:05:43,650 --> 00:05:47,789 So this is a tuple. So it's a tuple and it has a length of 2. 52 00:05:55,750 --> 00:06:02,479 That means you can now make use of this and say script1 the first variable 53 00:06:02,479 --> 00:06:10,479 and division1, let's call them like that, equals 2 components of the P figure. 54 00:06:10,479 --> 00:06:21,650 Now if you execute that and you go to the next line and print script1 what 55 00:06:21,650 --> 00:06:33,110 you get is a JavaScript only and then if you print out the div1 variable, you get 56 00:06:33,110 --> 00:06:38,349 the HTML, so that great but what does that mean? Well that means you can send, 57 00:06:38,349 --> 00:06:44,060 I have made a typo here, this shouldn't be there. Let me execute this 58 00:06:44,060 --> 00:06:50,319 again, and you get the same output anyway. So you have this two source codes now 59 00:06:50,319 --> 00:06:59,900 which actually if you try out the type, so this is a string, and this is also 60 00:06:59,900 --> 00:07:09,710 a string so these two strings now you have to send them to your HTML templates 61 00:07:09,710 --> 00:07:16,130 so for instance here. You can either put them in between the head tags and that's 62 00:07:16,130 --> 00:07:22,099 the special syntax where you embed those script1 and div1 variables inside your 63 00:07:22,099 --> 00:07:29,060 templates, HTML template, so we'll do that in just a bit. Now this were the two 64 00:07:29,060 --> 00:07:35,330 elements, but we also have two other elements which were the ones in here. 65 00:07:35,330 --> 00:07:41,930 So is the link to the CSS stylesheet and the link to the JavaScript file, so 66 00:07:41,930 --> 00:07:51,020 you can you can either copy this and paste them here in your HTML template so 67 00:07:51,020 --> 00:07:59,089 you'll have here and as static strings. Or a better way to do this would be to 68 00:07:59,089 --> 00:08:02,960 actually generate this dynamically with Bokeh. 69 00:08:02,960 --> 00:08:06,949 The reason you want to generate and dynamically is that you know you can 70 00:08:06,949 --> 00:08:14,419 see that this is Bokeh version 0.11. Now if you leave these links in your web app 71 00:08:14,419 --> 00:08:20,030 and later you upgrade Bokeh to a newer version then you might get some problems 72 00:08:20,030 --> 00:08:26,120 because these links also need to be updated. That's why you should generate 73 00:08:26,120 --> 00:08:32,419 those two links in your Bokeh script so that if you upgrade back here these links 74 00:08:32,419 --> 00:08:39,260 are also will be updated. And to do that you first of all you need to import from 75 00:08:39,260 --> 00:08:49,270 Bokeh.resources impoirt cdn, so cdn stands for content delivery network. 76 00:08:49,270 --> 00:08:55,490 And then what you want to do here is you want to create two variables. Let's say 77 00:08:55,490 --> 00:09:07,520 cdn JavaScript and that will be equal to cdn.gs_files and then again cdn, 78 00:09:07,520 --> 00:09:23,120 let's say CSS for the CSS file, cdn.css_files, so let me execute that, and so 79 00:09:23,120 --> 00:09:29,020 cdn, let's see what we got, gs. Actually is not cnd, cdn. Sorry! Gs. 80 00:09:36,350 --> 00:09:43,940 So as you can see this is a list of three links. Now the first one is the link that we are 81 00:09:43,940 --> 00:09:49,700 looking for, this other one is it's about Bokeh widgets if you want to add widgets 82 00:09:49,700 --> 00:09:56,480 in your Bokeh chart, so that's quite an advanced functionality of Bokeh, and you 83 00:09:56,480 --> 00:10:00,620 also have the JavaScript for the Bokeh compiler, but all you need so focus on 84 00:10:00,620 --> 00:10:06,170 this one only, so to get that what we'll be doing is just JavaScript 0, 85 00:10:06,170 --> 00:10:12,440 so we get the first item of that list and we get the string of this URL. 86 00:10:12,440 --> 00:10:20,569 Similarly you have CDN for CSS which is also a list and it has the CSS for the 87 00:10:20,569 --> 00:10:27,680 general Bokeh and for widgets, so this is what we need in this case too, and yeah. 88 00:10:27,680 --> 00:10:33,439 That's it, so we have four elements that I was talking about. The script for our 89 00:10:33,439 --> 00:10:39,110 particular Bokeh chart, and the HTML for our Bokeh chart which is, which happens to 90 00:10:39,110 --> 00:10:45,589 be a division, and then we have the cdn JavaScript, and cdn CSS, so with these 91 00:10:45,589 --> 00:10:52,490 four elements we are now ready to go to our Flask files and that's fairly easy. 92 00:10:52,490 --> 00:10:58,100 You just need to add a few things in your Flask Python files and HTML templates and 93 00:10:58,100 --> 00:11:03,470 you should be able to have your plot embedded in your web pages. So let's do 94 00:11:03,470 --> 00:11:04,000 that in the next lecture then.