Getting Started with Interactive Reporting: Building Dashboards, Visualizations & Self-Service Apps

Hello and welcome to my talk on getting started with interactive reporting. Building dashboards. My name is Anthony Zupnick and I'm a software developer at Wolfram. And I've had many different roles over my 10 years here. Part of those roles have been creating user interfaces, a lot of end things that end up being what you might call a dashboard or a report. So it seems like a good fit for me to deliver a presentation like this. So I'm kind of, I don't, I don't know like this. The skill level of everyone here, it's been marketed as a beginner level. So I'm gonna, I'm gonna keep things, try and keep things relatively simple, but also shows some interesting tips that might be useful for different. For more advanced users. So hopefully this isn't going to be too boring for intermediate users either. So my aim is to show a multitude of things. Now if you have any questions, you know, if you're, please ask away and I will answer them during the course of the presentation. This is a interactive presentation. It's more like a sort of like a course in a way. Well, a short one at that. So let's get started. I decided to deliver this presentation outside of the presentation view so it's not going to look as nice. But when it comes to coding, I much prefer like to have a long notebook to work in. The presentation mode is just sugar for, for stylistic purposes. So, so yeah, let's, let's. Let me tell you what we're going to go through. You know, we're going to outline what a dashboard is. Get, get short talk about the kind of data that we can get natively through the Wolfram language or through external sources. Talk about layouts for your dashboard, because that's primary, A primary concern to a lot of people is how do you lay these things out? Briefly, I'll show you some sty styling choices that you can make. There's, There's a. There's a lot of style styling you can do to your dashboards to make them look really nice. So I will be keeping it relatively brief as I imagine that time will be a factor there. We'll talk about deploying. These have links static content and dynamic content. Part of the benefits of the Wolfram language is that with Wolfram Desktop or the Wolfram Cloud, you are able to create dynamic content, which is, which is quite, which is quite nice. But some people prefer static content. So we do static content as well. We'll talk about different types of delivery for reports. Now report is going to be a very general term here. We, we have our own software for report generation which isn't covered in this, in this talk. It's going to be covered in another talk next week which I'll mention at the end of this talk. But we'll talk about some basic type reporting so that you know, you can, you can get started a little bit on troubleshooting. And provided that we have time, we will go through an advanced example which uses some more advanced programming techniques to create a little, a little dashboard. So, so first of all, what is a dashboard now? You know, it's, it's a very, it's a very broad term. I mean if we can go on Google and, and Google what a dashboard is, I mean what we can see is, you know, basically what we've got here is we've got a, a grid of, of, of stylized plots and charts and stuff. Doesn't have to be plots and charts. It's just any bits of information that are displayed in a nice user friendly way. So important skills to be able to create a, a dashboard is to do, add, put arrange things in grids and to, to stylize it. So those are the main things. And then you know, when you want to add dynamic content, you may want to add some interactivity to these, to these, to these charts. This, this is a, I don't know if this is an interactive chart. I'm not sure. Just using this as an example. So you know, in the Wolfram language, let's say we've got, you know, we can have a, a static chart. So here we have a date list plot which looks at ge, which I think is General Electric, the stock price from the year 2000 to date. This is a static chart. It does actually have, I say it's static but in the recent version of Wolfram language we've actually added these, these tooltip chips which are automatic. I guess you still can't count as the static. But it's quite nice to be able to hover over, hover over this, over this chart and actually see what the, what the number is the x and the y axis value. And now we can make the, the charts dynamic with interactive shading chart. Now this is a very specialized dynamic piece of content specific to well, trading. You know, it's, if you look at the documentation for interactive trading chart it will show you a bunch of examples which use, you know, use our financial data to generate some stuff. So here we have, you know, we can scroll along, change the size of our plot. We can highlight over and you can see at the top that we get the high, low, low values, et cetera, et cetera. And it's quite, it's quite a nice little, it's a quite nice little chart. And what we can do as well is, you know, so this is like our static, our dynamic content. Now we need some kind of deployment options. And one of the things that I mentioned at the start was the Wolfram Cloud being able to deploy dynamic or static content to a, well, to a website essentially, which you can, which you can go to, we call them cloud objects. If I run this, we're going to deploy our dateless plot to, to this URL and if I click on this URL, and now I've added no sugar here. So it's, it's a very plain, plain chart. But we have our chart that we had from the before in a, in basically on a website. So, so word on getting data. Now, the, one of the advantages of the Wolfram language is that we are able to. Well, you know, we, we have. One of our, one of our slogans is where computation meets data. In fact, if you probably go on the Wolfram webpage, you'll probably say that and quite, quite big big somewhere. And the reason why this is important is because we care, you know, we care about creating a language, but we also want to make life easier for, for people. So one of the things you obviously, when you're creating a programming language is you make a bunch of utilities for people to be able to make, make content themselves, make program themselves. You make more advanced functions to be able to solve problems problems. But you can also make algorithms which, which are like a number of functions put together to, to solve a specific problem. And the algorithmic data that we've got is quite strong, but we also have general data to be able to, to, to, for you to be able to use within your, within your functional, within your functions themselves as well. One of these things is, is example data. So this is, this is probably one of, the first, one of the first functions that we ever made, which, which, you know, create, which created was a repository of data for people to be able to access to, to test their functions with. So if we look at example data, we can get aerial images. For example, I'll just copy this out and go for aerial image. And we can see that there's just a handful. Let's see how many there actually are. There's 38 examples of images and we can get an image of Earth if we want to. So here we have our example data of Earth. And you know, the good thing about this is we can assign this to some kind of variable and then we can. Is it binarize? I'm just trying to think of an image manipulation function where we can grab data from our example data repository and then we can do some kind of manipulation on it. So there's lots of different examples here in example data. But this was just the beginning for us. We started to, To, for, you know, to organize the data in a user friendly way. We, we released WolframAlpha which allowed us to, to grab, to grab data and do some kind of manipulation of that data. So for example, this is just a Wolfram Alpha cell. I press the equals sign, brings up a Wolfram Alpha cell and I can say, you know, number of cows in the UK and oh, this is, sorry, this is a, this cause Wolfram Alpha and then it gives us a. It converts my natural language into a piece of code which is quite, which is quite useful. So now I've got piece of code where I can look at these. This piece of, this piece of code here is an entity, the entity being United Kingdom. And then I can get a property from that entity which is the livestock population, specifically the livestock type being cattle. Now when I click on that, it converts into, into, into code. So one thing you can do is press Command Shift I on the Mac and I think it's like Control Shift I on Windows and it will convert this a form which doesn't have any sugar. So that entity property thing now has been converted into raw code so that this is something that you could write yourself. So you know, so yeah, now I can change this to France if I wanted to and it would return the number of cattle in, in France. So a lot of the data that we get from Wolfram Alpha can be converted into the. Well is in this entity form which is more curated data which is organized in a way that you can start to do more robust calculations with. So yeah, and WolframAlpha. Yeah, WolframAlpha. I don't know if you've used Wolfram Alpha before, but if you press equals twice on in Mathematica you're able to get a full Wolfram Alpha query and what was it? Number of cattle in the uk. If I run this, what we'll find is we get a full WolframAlpha query within a notebook. And we can extract this data out. And you know, it does, it's made a plot for us, it's given us additional information in case we were interested in additional information. But if you use the single equals, then you can basically, the single equals is very nice. If you're unfamiliar with Wolfram language, it can be, it can be a lifesaver to be able to generate a piece of code for you, you know, if you don't know how to do it. So for example, if I wanted to solve the equation 5x squared plus 2x plus 3 equals 0, We get, well, we get the solution, but we also get the piece of code so that I no longer have to do a Wolfram Wolfram Alpha query. Because if you're using a WolframAlpha query, it has to process that natural language first and then do do a. And then do the calculation. Now if I click on this, it will remove the. It'll remove the Wolfram Alpha the natural language part and just leave the code. Anyway, I have, I digress. So. So those are, those are like the. I mean we also have all these repositories as well. We have the function repository, the neural net repository. We have all sorts of ways of getting data into, into the, into a Wolfram language notebook. But you may not want to use our stuff. You may have your own stuff. So we have many different ways to interact with other data from other sources. One of them is import. So this is important. An Excel file which just has some, a bit of a strange piece of data, but it was a list of gibberish words in some kind of comma separated way. So yeah, you can import all sorts of files, nat nat directly into the Wolfram language. If you're interested in what the. What formats we can import, you can just use dollar import formats and you'll get a list of the types of data that you can actually import. And likewise, we will talk about this in a bit later. Export formats gives a list of export formats. So you can natively translate a Wolfram language expression and export it into the format of your choice. Now, we've got a number of ways that you can use our Wolfram products to store data. One of them is using the, using the Wolfram Cloud with. Well, cloud put for example. So we have this Lorem Ipsen text and we are putting this into a file called example file. And if I, I'll just run these separately just so you can see when I run this, we are storing this information into a cloud object and I'm just now pulling that information back and it'll be the same thing because I haven't changed the data in any, in any kind of way. What I can do as well is there are these Things called cloud symbols where you can set a value and like a variable, but a global variable which exists on your cloud. Where I've set the cloud symbol x to 12 factorial and if I call this back I will get 12 factorial. So this cloud symbol is stored in the cloud. There's also this thing called the Cloud Expression Store which allows you to. Store data in cloud expressions which are much faster accessing if you care about speed of accessing data. The cloud Expression store can be quite useful if you're interested in large number of small bits of data. We've also got the Wolfram data bin which allows you to, to create a data bin. Let's just create. How do I do this? Create data bin DB equals data bin and then we can data bin. Add a piece of data to that data bin, random integer and let's just add a few bits of data to this. Just run it a few times and you can see we've got five entries. And now if I get this data, we should find a list of the zeros and ones with a bunch of information of when, when the data was recorded, where it came from, things like that. You see it came from the Wolfram client, things like that. So if you're looking for, you know, like you have a sensor and you're, you're pushing data to a sensor, this can be quite. This, the data bins can be quite useful. You can use import to, you know, I used it to, up here I used import to import an Excel file, but you can use it to import website information. So it knows how to handle this. So here if I import our Wolfram language symbol, I can just use import for that. There are various. Each import type has different types of, different types of things you can get out of it. So for example, I'm going to import wolfram.com but I'm going to import the data from wolfram.com and it's done some processing to convert this into, into a bunch of lists of lists of lists. But I won't go into too much detail there. You know, if you really care about you know, import like fine tuning how you, how you get your data from websites. There's a function called URL Read URL read allows you to send a, an HTTP request to a URL and get, and get some, and get get a return. So this allows you to do get post requests, things like that. It's quite useful. I use, this is the main function I would use when I want to grab data from a website. It allows you can fine tune this a lot better than import. But import is useful if you are a beginner. So let's talk about layouts now. So you know, I've, I've talked about the data, how we could get data and now let's, let's take a step back to, you know, what I said before about what a dashboard is and what a dashboard to me and a lot of people I think is basically data laid out in a nice user friendly way. And to do that we basically need grids and we need to fill out those grids with stuff. So we have a number of functions to be able to do this. We have the grid function which makes our grid. So here we have a grid which has four strings in them and they're laid out in a grid. It's a matrix and we can do a column. Column cat is just obviously a single column of data. And row. Here we've created, we're creating a row with, with, with a spacer which I can increase the size of if I, if I want to, which is fine. Now a note on this. It's, it's and it's, and it's interesting. I mean I would tend to choose to use grids for pretty much anything, everything unless, unless grid doesn't really supply the relevant information. The reason why is because grids are the main function that we use for laying out data. Row is interesting. Now we can look at the contents of this data. What we call this is kind of like this typeset form of this data. The underlying language to display this cell is. I don't remember what we call, I mean I call it box data. And if I press Command shift E on the Mac I can see. How this result is displayed. We can see that there's a grid box with, with our example 1, 2, 3, 4 and it's got a number of, a number of other settings to help just describe the typesetting of this, of this grid function. So you see that this uses a grid box. Column uses a grid box. Now row is a strange one. It uses a template box with row with separator. So it's kind of using a different, different language to, to describe a similar thing. Because you know, a row could just be a grid with, you know, with just one, you know, with just one list in it and it will look relatively similar. And if we want to do the spaces, I'll show you how to do spacings in a minute. So close these and we'll look at, look at grids. We'll use a Mixture of grids and columns here just to show you. But my recommendation is try and use grids as much as possible and only use column and row is more of a last resort. And that's my thoughts on the subject. So we can add options to grids. So the core, the core values of the core value of grid is this list of lists. Whereas if you want to add additional optional data that's supplementary at the end, we can add various different options and these can be ordered in any, in any way. Oops. And they just apply, they just apply the options to this, to this grid. So what do I want to mention here? So this, so this data can be anything. You know, this data can be, it can be an expression of some description. I mean, it can be a random image, it can be a number, it can be, it can, it can basically be anything. And it will. Grid works in a way where it will automatically fit the boxes. Fit the content to the boxes, unless you specify otherwise, which we'll talk about in some detail, because you may not, you may not want the grid to automatically resize in certain situations. Now, one thing we can do with grids is we can nest grids, we can nest grids with any expression and it all works fine. So here we have an example where we've got our example one, example two before, but we've added a row with some values, which is our row from above or similar, and we've added a column as well. And yeah, we've used this frame ghost wall to kind of show how this, how these, how these boxes are actually made. So when we run this, and we've added frame tool to each of the row, the column and the grid, we can see that, you know, example one is this row with this, with this 1.2, 1 point, 1.2 here and our column. And we can, we can add more data to this if we want, and it will expand accordingly. We can increase the spacer here and we'll see that the grid expands accordingly. So what we can do is we can, you know, use these grids or columns in the next example, using grids of grids to create some kind of like web page, like structure or dashboard, like structure, I suppose, to arrange, arrange our content. So what we have here is we have a header, we have a grid with a, with a kind of menu. If you wanted to have a menu where you could click some items to change dynamic content. We have a right menu area and then we have a footer. Now we use these things called span from left and there's span from above as well, which basically means let's say I have 1, 2, 3, 4, 5, 6, 7, 8, 9. Let's say I wanted to have one in one in this space in the center. Now what I would do is I would get rid of this value here. But if I get rid of this value, what's going to happen is it's going to fit, it's going to take, it's going to take this, it's going to take the spot of where four was. Whereas if I use span from above, what that means is look at the content above and kind of like merge it together like merging cells in Excel. So we'll see that we merged the cell and if I, if I go frame goes to all, we'll see that there's an individual. Well, they, there's, there's no, it's just one cell. And then if I change this to span from above, then we will, you know, we'll, we'll get rid of that, we'll get rid of that six, that seven and, and link, and link these cells together. Likewise, you can use span from span from left to, to link to two cells that are next to each other. The other thing you can do is let's get rid of this one and convert this back to seven and get rid of. We want to get rid of the, we want to get rid of the five. We can span from both which spans from left and above and we change the two to a span from left as well. And that will merge the, that, that, that'll, that'll make like a 4 by 4 cell here. Now if I wanted this to be centered, I can use the item function expression to designate that this is an item within a grid. It's implicit. But if you want to add some additional options to that item, you need to wrap it with item. And then I can add additional options. I can now say alignment goes to center. And now we have a one which is center to the whole bridge it. So when I run this code, we can just see what it looks like we've made. You know this, as I said before, kind of a web, web page based sort of structure where you have a header footer, you might have a menu and then you, and then you have, you have some content. Now this is kind of small. It's kind of what, what the Wolfram language is doing is it's kind of, it's kind of got some default settings for how, how to, how to space things out. So there's, so there's Some padding and some, some spacing options that are automatic to a, to a grid. So really it's just trying to create a grid in the smallest amount of space possible with, with some padding. Because obviously if you make it too small, I mean, this could be done a bit smaller, but it would look horrendous because things with no padding just don't look very good. And actually I wonder if I can just do padding goes to zero. Just trying to think what the options were here and we can see potentially how. Padding, padding, padding, padding, padding, padding. I think you can definitely do item. No spacings goes to zero. Okay, so that's, that's, that's made them a bit, that's made them a bit smaller from before. There's some other options as well. Just so you can see. I'm just looking at the documentation for, for grid where you can see that there's options for, for spacing. And I'll talk about this in a bit more detail in a minute. Anyway, so anyway, I just set sizes. We can, we can use things like, well, I've already discussed item. We can also use Pane. Now Pane allows you to fix a size for a piece of data. You know, if your data ends up being, you know, too big or something like that and you want to add scroll bars or whatever, you can use pane. So let's say we've got pain with 100 factorial. Well, it doesn't really do anything at the moment because we haven't specified any options for pain. So let's, let's do this autocomplete thing here. So when you, just so you know, you know, if you're unfamiliar with this, you can type in a function, a function name, and then you can press Command shift K or control Control shift K. On Windows it brings up some templates, which allows you to fill out a template. So here we can see we've got Pane, which makes a pane with a width W and a height of H. And we've got our 100 factorial here. And I can tab through change my width to 100 and my height to 100 and we'll see it's kind of compressed this into a 100. I don't think it's 100 pixels. I think it said what it was in the description, which is, it's in points. Points I think is similar to the points that are used in, in, in text. So I could add scroll bars, for example. Scroll bars go to True. And then we've got a scrolling, a scrolling structure where actually we can resize this which is kind of nice as well. So here we have a grid and we have a very similar structure to what we had before. But we've added some additional item information. So we've. For this grid we've added a, We've added, we've, we've wrapped item around this, around our X and we've specified the size to be five by five. We've. Did we add some alignment issues or. The alignment issues were already there. We've also added some alignment issues. We aligned to center. We've also created a pane around this, around this grid so that we are specifying the size and we're, we're using image size in this case and image size works in pixels so we're making it 250 pixels wide here. We've got a, a framed pane. So we, we're using the framed option expression which basically wraps a frame around any expression. And this in this case is wrapping it around a pane. In our pane we are making a full sized image. So to fit the, you know, fully fit the content that it's a, that's in the, that it's, that it's trying to display, we're center aligning it and then we're adding some margins making them 50 points wide and that's it. So when we run this what we'll find is oh, image size full. Sorry, that just fills up the rest of the rest of the rest of the, the, the, the full space of the notebook. So if I change the size of this we will see that. It fits the content which is kind of nice. So yeah, and so frame margins. If we were to change this, we're changing the margins of the pane so that changes the margins in all directions. You can only see it in the vertical direction because were already like maximum padded out based on the image size being full. And what we can do actually just to show you another way to do these things is let's say we have a grid of 1, 2, 3 and you wanted to specify the width of an item. You can change. Spacings. Is it. Let me remind myself of what, of what, what the option is for item. Item size. Item size goes to full and that should. And I need to wrap another list around this. Never mind. I think this is what I wanted to do. Spacings goes to. So if I say scaled. Okay, never mind. I forgot how to do this. Basically you can use scaled in certain ways. To, to specify the size of something based on. Well, you can do it based on points, but you can also do it based on the size of the notebook. Anyway, I don't want to run out of time here, so let's move on. We've got our grid here and we're gonna, we're gonna simplify a little bit. We're gonna remove this left menu and double footer. We're just gonna add a, a single footer and a header and some content and we're gonna fill it up with data. So a grid can be filled up with any form of expression. Now what you can do. I'm not sure if I recommend this or not, but it can be a useful guide if you're, if you're just getting started with Wolfram language. Let's say, you know, you've got your content, you've got your content here. Now one of the things you can do is you can just replace this string with some, with your content. So let's say I Change this to sine x1 10 and it will fill it. You know, it fills the content with that, with my plot. But, but what you can do as well is let's. What was this called before? It was called content. If there's, you can use this, this, this expression or function called replace all, which is this, you know, this slash dot and you can feed it a list of, a list of, of stuff that you want to change. So what I can do is I can change content. Now it change everything with the string content. So you know, this is a, this really, you should only be using this for, for testing purposes. In a way. Let's just change this to random image. And it will, it will change, you know, my string content to random image. And the reason why this, you should be careful is of course, if something else is called content, it's going to change it in, in, in. In every single place that, that that happens. However, if you could treat these as variables and you give them, you know, you know, very specific names that you're never going to use anywhere else, then you can change this to random image here and there we go. We've, we've, we've replaced our content and you can just give this a list of, a list of changes. So we've got right menu, let's change the greet there. Right menu goes to. Now just change this to hello World and we'll see we've changed multiple things using this, using this replace all function. Now obviously what you can do is you can just replace the Content and this is what we've done here. We've, we've. We've taken our, our grid and we've added a pane which takes. Tells me when this expression last loaded. It contains a column which can. Contains some stock information. So it uses our. So we've got this with statement which basically just says we're basically declaring some variables and putting those variables inside these, inside these values. So we've got current stock being GE General Electric and the date being the 1st of January 2000. And we're basically feeding those variables into, into this grid. And what we've got here is we've got a pane with which is just some text data which gives us stock price. It gives us the start date which we're converting this date into a date string so that it's user readable. We're getting a date list plot with the financial data which is what we did very close to the start of this presentation. And then we're adding some additional stylistic options. You know, we're framing everything so that you can see how, how things are laid out in this, in this grid. And we're adding some exchange rate, the current exchange rate for pounds to dollars and we're also getting the current stock data. So when I run this, you know it's got to grab all this financial data from, from the Internet, import it and then display it. You can see what we've got. So we've got, you know, this was our header, our two footers and then our internal information where we show the stock information and we could change this. So we could change this if we want to. Something like Is Apple appl? Is those going to work? Nope. Probably because I can't remember what Apple trades on Apple stock price. And this is the beautiful thing about being able to use these, these things. I should probably just be able to give it this financial entity Apple actually. Nasdaq apple. So I can just give it this. I think it'll be fine. Okay, so there we go. We've got a plot of. Of NASDAQ Apple. We also see in this stateless plot that the. There's some of this, some clipping here at the top. And to change that we can go. I think we change plot range goes to full and that you know it has some automatic plot ranging here which can, which can result in some clipping. But if you use, you can define your plot range yourself. If you use full then it will show you the, the full amount. Right now tab views are quite useful to being able to create More dynamic data. Because right now what we've got, we've got a static plot really with, with nothing to interact with. So tab views allow you to, to create some semi dynamic content. So Command shift, okay, Tab view, tab view, command shift K and what we can see is we can give it a list of labels with expressions. So we can have label 1B A label 2B B and we can add additional stuff. This is what this dot dot means I'm just going to delete that. And we've got this little tab view where 1 is A and 2 is, is is is, is is B. But obviously we could have done our RA and one is now random image and two is still B. And what you'll see in tab view as well is that there's automatic resizing based on the content of the data. Now if you look at the documentation for tab view, you'll find that there are other options to be able to specify the size for tab view. And if they aren't sufficient then you can start to wrap things out in panes and grids and things like that to, to have greater control. So what we've got now is we are creating a. We're using very similar code to what we had before, although this time we're in our with statement. We are just using, using the date and we are grabbing a list of financial, financial stocks. We've got a function here which does a plot of a, of a stock given, given a date and we are doing a tab view which, which loops across using map. General Electric, Apple and Tesla. Did I just have to write Apple? Okay, well I thought I did write Apple, but okay fine. So we run this and so yeah we've designated a function inside a module. So module is like a self contained, allows you to declare localized variables and those localized variables can be basically be functions. So we've made a localized function plot where we're going to pull up. We use that plot function to do a plot of the three variables. The three stocks, General Electric, Apple and Tesla. When I run this yeah start date 2000 I can click Apple and I can click and I can click Tesla. And you can see that it's given me this, this. This column which contains the plot and the. And the current value which I think yeah we defined in the, in the function. So the plot function gave a column of date list plot and a pain with. With the current value of the, of the, of the stock with a bit of text. So this is, you know, this is just to show you some layout stuff. I'M haven't really, I'm not really going to go into much detail about styling at all unfortunately, as there isn't enough time to talk about these things. But in actual fact I'm. I thought I would have plenty of time to deliver this. So I, I was going in a bit more, I was going in a bit more detail in, in different places and it turns out that I'm only halfway through the presentation and 50 minutes in. So let me speed things up a little bit. So style wise. So yeah, so I'll briefly talk about different styling options that they are for, for grids and items and things like that. So. So what we have here is we've added. We are. We are using various different things. So style is its own, its own function which you can apply to a, to an expression. In this case it's going to be a string and style 20 will set the size. So we can. The first option is size. I think if we look at the documentation it's a little bit bigger. There are various different things that you can add to the. As supplementary options. It gives you some examples here. So if I change this to bold, then it will make it bold, but it will make it small because I've gotten rid of this, rid of the size. So what you can do is you can, you can change this to font size goes to 100 and then you can say font family goes to whatever. You can probably change background as well goes to red, things like that. The other thing you can do as well is you can give it a pre existing style. So for example, this, this thing, this, this cell here has a designated style to it. If you want to see what style it is, I think you can go to format style and it tells you that it's a section. It's a section type cell. The other way you can do it is you can look inside the cell which is command shift E on, on the Mac and we can see that we get the styling is is section. The second parameter to the cell is the style of that cell. So what was the style again? It was section. So the second parameter of style can also be the. So it was it. Well, whatever can you see, let's use subsection. The second parameter can be the styles. So if you, if you like the styles that already exist in your style sheet or you know, you've, you've created the style sheet specifically and then you want to access those styles within, within Wolfram language expressions and not just the, the RAW cell, then you can, then you can use the Style function. Anyway, we've got a grid and in our grid we are adding, adding some background information. So I'm going to expand this out so that you can see. Now this is just a grid with that, with like let's say a menu. And in this menu we've got a header and some items. Now the header we want to be a specific color. So we've in background you can. Using this. There's, there's. The specification is. Is. Is. Is kind of. It depends on like width and I think the first, the first parameter is relates to rows. Sorry, relates to columns and the second parameter relates to, to rows. Yeah, first parameter column, Second parameter rows. And what we're saying is we are alternating between this orange and lighter orange. And. And we specifying that the first column is red. Now if you don't like this kind of styling, which I'm much more of a fan of just seeing the raw code because I see everything is code, then you can use, I mean, I use Command Shift I to convert these things into, into their, their Wolfram language form and it ends up being the same. So we can, if we wanted to change the third column, for example, we can just change this to a three. It still does this alternating coloring thing with the exception of specif of the. Of the third value being being red. And if I wanted to change more, then I can change this to. I can add another one and. Oh, do I have to give it into a list? Probably. So I add this now. So now I'm saying I change the third column and the second column to be. To be, to be this red color. But yeah, the alternating colors of this, this are. This list here. And you can give that more. You know, it's going to just alternate between, between those two. But you can give it more alternating colors and it will alternate as it goes through the, through the rows. Each of those, each of those values. Right. What else have we done here? So we, in our right. Menu, we're. We're creating some italic content which has a gray and dashed border. And then in the whole grid, We are coloring the dividers, the two. The dividers of the second and third column in gray. And we are, We're setting a base style to be text because what we, what we have here is this, this font is the, the is a, is, is a general font, is like a coding font style, and it's a little bit ugly. So what we're saying in our, with all of our text items is that the base style is going to be text and it's going to be aerial as well. Oh yeah. So what we've done here is we've, well, we've create, we've created a bit more of a, a stylized layout where we can then feed things key content in if we want to. So, so there we go. There's our, there's a, there's a brief. Oh, we've, we've, we've added some rounded corners here as well. So rounding radius. It takes corners and, and, and rounds, and rounds them off by some value. So we can make them more rounded I suppose by increasing this value or less rounded by decreasing it. And we're making that, that style red. So let's talk about some deployment options now. So this is kind of like, we kind of what hopefully you'll understand now is have some basic building blocks to be able to create grids, set them out in a specific way, add additional content, add dynamic content and. Add dynamic content and then, but we don't know, we don't know how to deploy it yet. So there, so, so at the moment you're only seeing that information inside a notebook. But let's, let's talk about other deployment options now. I've shown you the cloud and probably show you the cloud again. But first of all, let's, you know, we've got our financial dashboard. I think I signed it to a variable up here somewhere. This thing here I signed to Financial Dashboard so I can call it up again here if I want to just to remind you what it looks like. And this was our, the last time I called this. It was the, it was for at the Apple stock. Now if I want to, you know, push this to a, a new document because this is, this is like my coding document. I can use Create Document Create Document with the Financial Doc Dashboard with this deployed to true means that you can't edit the content. That's what it means by being deployed. It's finalized, finalized content. I deploy this and I'll just change the size here we now have a deployed, well, piece of, piece of content in a notebook. Now I can save this notebook if I want to somewhere and that's fine. But what about, you know, how do I, how do I get people who do not have a copy of Mathematica or more from desktop? How do I get them to access that, how that access that data? Now one of the options is we can deploy this, this thing as a cdf. So this is, we have our Create document from before and we're using the export function to export to a to a file which is called staticscreen CDF and and when I run this and I open it using the system Open function, we are creating a piece of static content that is saved as a CDF which can be opened with Wolfram Player. So the Wolfram Player is a. If we go click on this link in in the notebook that you have access to. Although I guess if you, you have access to the notebook but you don't have to have access to Wolfram Desktop, then you can open it in the Wolfram Player. So you can go to wolfram.com player you can download a version of the Wolfram Player which allows you to access access deployed notebooks and their interactive parts. The Wolfram Player doesn't allow you to evaluate new pieces of code in cells, but it does allow you to access dynamic content and static content. But you may not want to download something. So if you don't want to download something, then we can use the cloud to be able to create. To create a dashboard. So you to. To have our dashboard and deploy it for people to be able to see. So we just use Rap cloud deploy. Then we set a URL and then it will go to a specific. It will go to in my account which is AZ to Dashboard slash Financial Dashboards. And currently if you go on to that link, you will not be able to access this. So if I go onto an incognito window and type this in, what you'll find is that I need to sign in. So and that's because it is a. It is not available for public for public use. So even if I, if I signed in with another account it would tell me that I do not have access to it. So what I can do is I can change the options with permissions and I can just say permissions to public. And what I should have now is I should have a deployed dashboard which, which is. Which is available for. For the public to. To. To to see. So let's just go to this link now and we're. This that this, this page. This page loads right? So one thing you can also do is you know, if you, if you. There are a number of options for styling and things like that and you can put this in an iframe and you can place this on your own website or insight injected into your own website or whatever. You may not like this, you know this branding here so you can remove it. So appearance elements goes to none will change the branding. I will remove the branding. You know, this is, this is your, this is your product. This is the thing you made and you know, this, this kind of thing to deploy and stuff like that uses a cloud credit. So you're essentially paying for this thing yourself. So why not be able to remove the, remove any sign that the Wolfram language is being used and you can do so like. So you see it's, it's disappeared from the top. So I guess I haven't really shown like super dynamic content, right. As of right now. I've. I've shown you Tab view, which is like I called like semi dynamic. I showed you the interactive, I guess the interactive trading chart was quite an interactive, interactive piece of, piece of information. But we're going to go in and use form pages to create a interactive, an inter. An interactive page which, which creates a, a dashboard on the fly. So, so what this does form page, it takes a, a variable which I've called location. It takes an interpreter, A, basically an interpreter converts, usually it's a string converts a string into a piece of, a piece of data often curated like, like an entity or something like that. I'll show you an example here. So if we say city, let's have a city interpreter and we type in London, it's going to give us this entity back. So what it does is it does some additional computation here. It processes the string and it then tries to find a city which aligns with that string. Which is what I, what I've, what I've put here. Now interpreters can get very complicated. You can add, you can add restrictions, you can add all sorts of stuff. I mean the interpreters can also do some compute computation. So it can do computed number. Let's see. So I say computed currency. I like computer currency amount. So what this can do is this, that's another layer of computation where you know, interpreter city really is just trying to, you know. Well, it's trying to interpret your string into what in. You know, into something that exists in our database where a computed currency amount is saying I want to do an additional computation on that data. So this can take let's say US$2 plus 10 British pounds divided by. I don't know if what I did divide by, but let's say plus €10 and then I can even specify the amount and I want it to be in yen. So these four, three currencies added together in and then converted into Yen is you know, 3700 yet. So this is pretty cool that it's, it's looking for currencies and then it's, and then it's converting those currencies with the current exchange rate which is quite good. Anyway, this form page takes a city where it's going to have a default input of Oxford and then we've got our, our dashboard where we are basically giving, yeah, having our last date loaded just to show you that it's, it's up to date. And we are getting the weather data of that location. We're getting the temperature, the precipitation, the wind speed, the cloud cover fraction, whatever. I guess that's the percentage that of, of that place which is covered by cloud. We're adding a title which is weather data in a location. We're adding a description and when I run this we get a little box, you know, weather date, you know, this is our title and description. We add the location. When I submit this asks me to review my choice because there are many cities which, which are called Oxford, although I think most of them are in the usa. In actual fact there's one Oxford in Canada, the rest of them in the USA and then there's one in the uk, the original Oxford. And we'll submit this and we've got our little dashboard where you know, Oxford is currently 17 degrees, 15 kilometers per hour wind cover. And I, I could change these, you know, if I don't like kilometers per hour, you know, we've got this unit convert function which allows you to convert, you know, which allows you to convert one, let's just say one British pound here into US dollars. Can I say. Yeah, and unit convert. Can convert is, is, is quite a versatile function which allows you to convert all sorts of things into all sorts of other things, currencies being one of them. But obviously kilometers to miles per hour, Celsius to Fahrenheit if you use Fahrenheit anyway, so this form page is pretty cool. It really was designed to be used in the cloud. So while there is this kind of display form in Wolfram language, very good for testing deployment wise the best kind of deployment is the cloud. So if I cloud deploy this form, we run this, we should get the same thing. And if we, if we type in something like Oxford 2 for example, it's not going to find a city interpretation. If I run Oxford we should get the same thing as before with our drop down where we can select our specific Oxford. Let's go for Oxford, Ohio this time. And it's running the computation and we got a little result which is 12.2 degrees there with 7.5 kilometers per hour wind and the cloud cover is one where does that mean that it's like Fully covered in clouds or fully not covered in clouds, I don't know, but you can look that up. So, so this is kind of like a, you know, like this is an interactive form that we've got. I mean you can make them very complicated where there's that, you know, one result is dependent on the next. So if you gave it Oxford, it might give you a list of, of parameters relating to the uk or if you gave it somewhere else, it might give you something else. So it's quite, it's, it's. There's a lot of work being put into, into form pages and they're very robust. Now if you want to make dynamic interfaces yourself and not rely on four pages, the original functions for doing so were dynamic module. Dynamic module basically means. Well, it's like module but instead of variables, like variables which are relatively static, you have dynamic variables which would be updated on the fly. So what we have is we specified a dynamic variable current stock which starts at the unh. I don't know what you, what stock UNH is, but we're going to get a list of a list of stocks starting with un and we get this list of yeah, unf, unfi, ung, unh, unl, etc. Etc. And we're going to bring a pop up menu where you can choose that list from a list of stocks and create a plot of that financial data and change the current value. And also the date that last loaded will change as well. So when I run this, what we'll see is we've got a dynamic thing where, you know, currently it's on unh, because that's what I started with. But I can change this to. Okay, let's just run that again. So I'm using. One of the things that I did was I upgraded my version of Mac OS to the most recent version and I'm using a older version of Mathematica which is potentially causing some issues. So now I've changed this to unh and we can see that unh, this, this whole chart and everything has changed to, to unh. Now here's another one, this one's a bit simpler. This will run faster. Where we've got a list of what we specified, a list of cities, New York, Los Angeles and Chicago. And we are getting the population data since the, since the start of the city, I guess it looks like, because it says all population data since the 1700. So 1 January 1698, the first record that we've got for New York, there were 4,937 people. And we can change this to Chicago so that their record started in 1840, 4470, etc. Etc. So we can deploy these things to the cloud. So I'll just deploy this one, for example, this population dashboard that I've created, I can deploy to the cloud and we'll see that we've got a, this cloud notebook where we can change the, change the value and this will update. Oh, and it tells you what the customer current population is as well, right? APIs. So APIs are a good way to, to, you know, to write, to integrate, you know, Wolfram language into other like web applications using get or post requests. So what we have here is we have an API function which takes our variable location. I don't like this default thing here because that, that makes it a bit more difficult to describe. So we've got our location, which is a string and all it's going to do is it's going to return a string in JSON format of the temperature of the, of the location is in Celsius. So when I run this temperature API, I haven't deployed it to the cloud yet. I didn't specify default values. So it says there's no value for location. So what I can do is I can set the location to London. And it's just downloading some finite location data at the moment and it will give me the string. The temperature in London is 60 degrees. So when I deploy this, I click on this API, what we'll find is it returns this, this, this JSON object. Can I zoom in? Which is, which is quite useful because it tells you this is where it makes it much more, much easier to integrate into your own, into your own applications, your own web applications. Because it uses a kind of a standard form. It gives you a, a failure reason. It tells you that location needs to be, you know, it's a field that's required. It tells you, gives you some information about it, which, you know, you can start adding your own code to that. So you know, if you want to do a get request in a, in a web browser, you specify, you add a question mark onto the end. We can say location equals Oxford and location equals Oxford will return. The temperature in Oxford is 17 degrees. So that's how you do APIs. You can also have these APIs return HTML form. So here we are using export form to specify that we want our temperature information that we had before to be. We started. We're adding some HTML code here, which we're adding a paragraph with style we're adding a color and a font size and we're wrapping it around export form to HTML and then we are. Well, it's also going to be returned as a JSON as well. So when I run this, and this time it's set the, the default location to Oxford, we've got a. The temperature in Oxford is 17 degrees. Now we can also create APIs which generate new notebooks. So this example uses the generatedocument function to. Well, we've got a function called Create Notebook which uses Generate Document to create a notebook and deploy it to a brand new cloud object which has permissions to public. So anyone can access it. When I run this in locally, you know, we generate our hello. Oh yeah. It creates a notebook with just the words that I placed in it. I click on this link, it's got a notebook which has hello in it and we can have an API function which spits out new new notebooks. So what this does is it provided that you've given a parameter data, it cloud deploys the new notebook and then it does an HTTP redirect to that notebook. So when I click on this, it's going to change to hello World because I've specified this as hello World. But what I could have done is I can copy this, Can I copy this URL? Copy this URL and say question mark. Data equals testing. And this should create a new notebook with, with the word, with just the word testing in it. So if you wanted to like create like dashboards on the fly, you can use this, you can use this, use this technology. Now in terms of delivery of these dashboards or reports, however you want to call them, We can add some additional information. So we have our dynamic module from before, but this time we want to add an additional piece of information which is a button which sends the results of the current stock data. So what it looks like is our original plot from before. We've got a left menu, our content, it's updating, it's updating all the time. We can push this send results button. And what it should do is it should send that information to, to my email address because I've set the requester ID to the recipient to be the requester id. So let me just see if my emails have. Have updated. Yes. So this is, this was our. I pushed the button three times. So I got three emails with the current value of that stock. So running a little low on time at the moment. So let's quickly go through these things, although I guess we're pretty close to the end, this, this is a very similar type of delivery. It's instead of having a button which sends an email, it has a button which exports the notebook to, exports the same information but to a text file. So I won't go through that. And then troubleshooting now I'll just touch on this very briefly. The Wolfram Cloud does lag behind some of the, some of the features in that are on the desktop. So the desktop is like full support. If you're using more from desktop or CDF player, everything will work. However, if you're using the cloud there will be some limitations. We are improving every day we are improving the number of functions which are supported in the Wolfram Cloud and there are some actual legal limitations as well. For example, financial data within APIs or forms are not compatible, they never will be. And this is a restriction on using that financial data. You can use it in the cloud, you just can't use them in APIs or form functions. So this form does not work. What you'll find when you click on this link is when I give it a company, it's going to tell me missing, not available. And the reason why is because, because of that restriction I mentioned before. Now one thing that forms do is because it was designed to have like maximum, like max, to have maximum efficiency, to not rely on cloud notebooks at all. And because of that and you know the return is like supposed to be like pure HTML, which means some functionality will not, will not work there. So it's important for you to be able to, to be able to test, test those things out yourself and figure out what does and doesn't work. So finally we'll, we'll, I won't go through this in like loads and loads of detail. You have the notebook yourself. But we're making an advanced example here which, which basically takes a word and creates a little, little page about the words. And first of all we create a function to be able to grab a, to create an association with our word information. So when I run this, we're going to get the definitions of the words, the hyphenation, the phonetic put form, the parts of speech, some Wikipedia data on the, on the word synonyms, antonyms, similar words or the five, five similar words. So when I run this and I use the word test, what we should get is we should get definition, hyphenation, etc. Etc. So there's some Wikipedia information. Well, there's various thing times that the word test has been used in arts and entertainment. Now we're Going to create a function which, which is called dictionary definition, which creates a, a stylized page. So don't worry about too much of this data. A lot of it is just form is, is. Is these copy columns and rows that you've seen before. It creates a list, well, basically a column where it gives you the hyphenation, the, the phonetic form and a way to hear the pronunciation of the word. It gives you the parts of the parts of speech. It gives you some definitions of that word. The Wikipedia summary here. And then all of this is stylizing information and there's. If the, if it's missing then you know, give some additional information, synonyms, antonyms, similar words and yeah, some additional styling, stylizing information. And this thing is wrapped around monitor. So monitor is a way to show a pro like some kind of progress. The progress into my indicator is going to be a necklace. And when we run this piece of code, what it's going to do, it's got that necklace finding about the word zero and it creates our, our page and you know, it's got a little button here to hear the pronunciation of the word. Also has a link to open to Wikipedia where we can find the definition of the word the Wikimedia article of the word zero. So yeah, so yeah, that is the end of the presentation. Hopefully you enjoyed it. Hopefully you learned something. So in terms of what you could do next in terms of specifically being able to like links to the information that the, the stuff that I showed you today, obviously you have this notebook available to you. The download link is, is, is pasted somewhere for you. The. So in terms of building dashboards. Yeah, we've got tutorials, guide pages, workflows or creating web pages. If you're new to the Wolfram language, we've got a bunch of links here to learn about the Wolfram Cloud, Wolfram U courses information on the latest, the latest features of, of the Wolfram language. And yeah, that's, that's it. Now if you're interested more in the, in the report generation side. So what I've shown you more is to be able to develop, to develop these, these dashboards and add some interactivity to them. But if you're interested more in reports, there's a talk next week on the 24th on Tuesday where I will be talking about notebook templating, which is a package that I developed specifically being able to create reports from templates because all this stuff did not use any templating whatsoever. Whereas you may want to be able to create reproducible reports from a template where you specify a list of changing values. Essentially, that talk is next Tuesday. I recommend that you go if you're interested in report generation. Also, I made it. So the good news about that is I will be able to answer absolutely any question in any amount of detail relating to that. So, yeah. Great. Well, thank you very much for listening. Are there any questions at all before we before we close this presentation? If not, thank you very much for listening. I really hope you enjoyed it. Thanks again.