1
00:00:01,440 --> 00:00:02,400
Hey, welcome back.

2
00:00:02,490 --> 00:00:05,190
In the previous video, we built this Web app.

3
00:00:05,220 --> 00:00:09,570
Now we're going to add a graph here in this area.

4
00:00:09,960 --> 00:00:15,390
So let's go back to our code and add that graph down here.

5
00:00:15,870 --> 00:00:20,610
So as you know, stream leads works on a widget basis.

6
00:00:21,180 --> 00:00:28,260
You see PSD sub header, SC select box, and they are added one under the other.

7
00:00:28,470 --> 00:00:29,850
So that's ordered.

8
00:00:29,850 --> 00:00:35,190
The order of your code defines the order of the widgets in the app.

9
00:00:35,400 --> 00:00:42,930
Now if we add a graph here, that graph will also be added under this sub header to add the graph.

10
00:00:42,960 --> 00:00:49,620
You can use SD dot plot, dot chart.

11
00:00:51,000 --> 00:00:54,750
So that's a method responsible to create a graph.

12
00:00:55,170 --> 00:01:00,000
And so this method now gets a figure object as input.

13
00:01:00,450 --> 00:01:01,850
What is a figure object?

14
00:01:01,860 --> 00:01:04,050
A figure object you can get?

15
00:01:04,050 --> 00:01:14,070
It's from a plotting library, from a data visualization library such as plot or book, as both are

16
00:01:14,070 --> 00:01:17,350
good libraries, but we will use plot plot.

17
00:01:17,550 --> 00:01:21,310
It tends to be a bit better, and it's more popular than book.

18
00:01:21,990 --> 00:01:24,660
So plot is a data visualization library.

19
00:01:24,840 --> 00:01:27,600
That means we need to import it in here.

20
00:01:28,260 --> 00:01:30,600
So use import plot.

21
00:01:32,320 --> 00:01:34,420
That express se.

22
00:01:34,750 --> 00:01:35,040
P.

23
00:01:35,050 --> 00:01:35,590
X.

24
00:01:37,140 --> 00:01:38,250
So that's the library.

25
00:01:38,610 --> 00:01:42,030
Basically, we import the module express of plot.

26
00:01:42,540 --> 00:01:45,900
And so we rename it to p x.

27
00:01:46,140 --> 00:01:51,270
So just like we do with a stream list, we do this p x here.

28
00:01:51,570 --> 00:01:54,950
So this should be installed install plot link.

29
00:01:56,360 --> 00:02:00,110
You can do it with PIP also or with this.

30
00:02:01,630 --> 00:02:03,520
Section here, Python packages.

31
00:02:03,700 --> 00:02:12,880
Once you do that, then before you use the plot lit chart method of stream leads which expects a plot

32
00:02:13,060 --> 00:02:16,360
figure, we create a plot figure first.

33
00:02:19,220 --> 00:02:24,200
So we need to store it in a variable and then say that line.

34
00:02:24,560 --> 00:02:27,240
So we're creating a line graph here.

35
00:02:27,260 --> 00:02:29,360
As you can see, this is a line graph.

36
00:02:32,350 --> 00:02:37,930
If you go to the Python council, you can check what other options you have.

37
00:02:37,930 --> 00:02:48,250
So you can import plug in here esp X, and then you can do the p x and you'll see that.

38
00:02:49,500 --> 00:02:53,370
You have area, you have bar charts, bar polar.

39
00:02:53,370 --> 00:02:58,050
So for different scenarios, you have different kinds of graphs.

40
00:02:59,710 --> 00:03:04,060
Histogram, and that's the line plot we're using here.

41
00:03:05,960 --> 00:03:08,060
So you can explore them on your own.

42
00:03:08,480 --> 00:03:13,460
But usually you'll know what you need when you have a project at hand.

43
00:03:13,880 --> 00:03:16,370
And so you can do some research on Google.

44
00:03:16,730 --> 00:03:22,160
What plots you can use for that particular project and you'll find that out.

45
00:03:22,160 --> 00:03:27,920
There's a lot of content on the internet about the line methods.

46
00:03:27,920 --> 00:03:33,910
Expects an X, a Y, and a labels argument.

47
00:03:34,460 --> 00:03:42,190
So X is the array of the data you'll plot along the x axis, the values along the x axis.

48
00:03:42,200 --> 00:03:46,760
So in our case, that would be the dates, right?

49
00:03:47,180 --> 00:03:54,280
We plot the dates along this axis and then each date corresponds to one temperature.

50
00:03:54,290 --> 00:03:57,710
So in the y axis we will have temperature values.

51
00:03:58,010 --> 00:04:02,600
So X and Y should be array types of objects.

52
00:04:02,600 --> 00:04:06,410
By array types of objects, I mean things like a list object.

53
00:04:06,410 --> 00:04:11,780
Or it could be a tuple or it could be a data frame column.

54
00:04:12,940 --> 00:04:13,750
Or serious.

55
00:04:13,780 --> 00:04:20,529
In other words, so anything that looks like an array of data, of objects, of values, of integers,

56
00:04:20,529 --> 00:04:24,910
wherever you call it, that could be provided as a value here.

57
00:04:26,010 --> 00:04:29,730
So that means let's create a date list.

58
00:04:32,000 --> 00:04:35,810
Later on, we're going to get these data from the weather API.

59
00:04:35,840 --> 00:04:44,180
But for now, let's create some fake data, for example, 2020 to 20 5th of October.

60
00:04:44,840 --> 00:04:47,750
To to, to, to the 6th of October.

61
00:04:47,750 --> 00:04:49,670
And a third 120.

62
00:04:50,330 --> 00:04:54,920
20 to 20 7th of October.

63
00:04:55,700 --> 00:04:56,810
So that's the date.

64
00:04:56,810 --> 00:04:59,570
And then in ex you provide the dates.

65
00:05:00,020 --> 00:05:00,620
Right.

66
00:05:01,070 --> 00:05:09,290
Same we will do for y let's create a temperature list.

67
00:05:09,320 --> 00:05:17,660
The condition here is that this list should have the same amount of items as this list.

68
00:05:17,960 --> 00:05:20,960
So these two should have the same length.

69
00:05:20,960 --> 00:05:26,060
In other words, so temperatures, let's say ten, 11 and 15.

70
00:05:26,180 --> 00:05:28,400
So y will be equal to temperatures.

71
00:05:30,320 --> 00:05:32,510
And then lastly, we have the labels object.

72
00:05:32,540 --> 00:05:34,970
This is expected to be a dictionary.

73
00:05:36,350 --> 00:05:37,640
It looks like this.

74
00:05:40,980 --> 00:05:47,070
So basically what I'm doing here is I'm telling plot leave that's in the x axis.

75
00:05:48,000 --> 00:05:56,160
Plus, Lee should place the labeled date and in the y axis plot they should place the label temperature

76
00:05:56,400 --> 00:06:05,940
in C and degrees Celsius units so that the label inside quotes and that is the label also inside the

77
00:06:05,940 --> 00:06:08,970
quotes for X and for Y respectively.

78
00:06:09,360 --> 00:06:11,970
And that's the figure object.

79
00:06:12,600 --> 00:06:18,900
So provide that inside plot lead chart and then run the script.

80
00:06:19,940 --> 00:06:21,920
So if it's running already, that's fine.

81
00:06:21,920 --> 00:06:23,510
Just visit it.

82
00:06:25,160 --> 00:06:25,890
And there we go.

83
00:06:25,910 --> 00:06:28,640
That's the plot that we generated.

84
00:06:30,270 --> 00:06:33,960
So that's the first date, 25th of October.

85
00:06:33,960 --> 00:06:36,210
And the temperature was ten.

86
00:06:36,750 --> 00:06:45,240
And if you place your cursor over that point, that data point, you're going to get this pop up window

87
00:06:45,240 --> 00:06:50,640
and this tells you the exact values for the date and the temperature.

88
00:06:50,640 --> 00:06:57,810
And then temperature went from 10 to 11 and then it went up to 15 on the 27th of October.

89
00:06:58,560 --> 00:07:03,690
So that's a nice graph, but the graph is static now.

90
00:07:03,690 --> 00:07:12,600
So whatever we change here, the graph is not connected to these changes to connect a graph to a change

91
00:07:12,810 --> 00:07:13,740
of a widget.

92
00:07:13,740 --> 00:07:15,720
For example, this slider here.

93
00:07:17,400 --> 00:07:19,140
It is very simple to do.

94
00:07:20,070 --> 00:07:28,170
For example, I'm going to update this list using a list comprehension.

95
00:07:28,590 --> 00:07:37,080
I'm going to say days times i for i n temperatures.

96
00:07:37,770 --> 00:07:41,800
So that will update temperatures depending on the value of days.

97
00:07:41,820 --> 00:07:45,330
So basically what I'm doing here is this.

98
00:07:45,900 --> 00:07:48,900
We have this temperatures list.

99
00:07:48,900 --> 00:07:52,950
We have days, let's say days is currently three.

100
00:07:55,180 --> 00:07:59,620
So the user has placed the slider at the position three.

101
00:08:00,100 --> 00:08:09,040
Then what we do here is that and that will update the temperatures list.

102
00:08:09,280 --> 00:08:16,030
So you see now it's this and these values now should be plotted in that plot.

103
00:08:19,720 --> 00:08:25,070
Normally we will get the data, the actual data from the API.

104
00:08:25,080 --> 00:08:31,630
So we're going to have a function here and the function will get days as input and it will return the

105
00:08:31,630 --> 00:08:35,230
temperatures for that number of days.

106
00:08:35,230 --> 00:08:35,830
Right.

107
00:08:35,860 --> 00:08:40,480
And then those temperatures will be placed in here.

108
00:08:41,110 --> 00:08:43,299
So that's the final code for now.

109
00:08:43,870 --> 00:08:47,770
And let's go to the browser refresh.

110
00:08:49,080 --> 00:08:52,320
Let's change the forecast days to something else.

111
00:08:52,860 --> 00:09:01,800
So as I change that to three, you see now the temperature is 30 here instead of three, it's ten times

112
00:09:01,800 --> 00:09:03,270
three, right?

113
00:09:03,600 --> 00:09:09,780
If I go to four, it goes to 40 and so do the other temperature values.

114
00:09:10,470 --> 00:09:13,080
So that's a dynamic plot there.

115
00:09:14,560 --> 00:09:18,300
Now it's also possible to have a function here.

116
00:09:18,310 --> 00:09:21,070
Let's say def get to.

117
00:09:22,610 --> 00:09:32,600
This gets days as input as of days is that value and then the function is going to get the data from

118
00:09:32,600 --> 00:09:35,000
somewhere using the request library and so on.

119
00:09:35,000 --> 00:09:42,410
But for now, let's pretend that the function got these data right, the dates and the temperatures.

120
00:09:42,410 --> 00:09:49,490
So I'm placing these two inside the function, and then the function is giving us the temperature values

121
00:09:49,490 --> 00:09:57,170
depending on the days it got those from the requests that it makes to the API and you got temperatures

122
00:09:57,170 --> 00:09:57,380
here.

123
00:09:57,380 --> 00:10:03,050
So then the function will return something like dates and temperatures.

124
00:10:04,980 --> 00:10:10,770
So let me place it here just to demonstrate you what we've got.

125
00:10:12,180 --> 00:10:14,070
So that's a function, right?

126
00:10:15,090 --> 00:10:23,010
So if you call the function with a value of three, this is what you get.

127
00:10:23,100 --> 00:10:25,870
So that's a table with two lists.

128
00:10:25,890 --> 00:10:28,350
The first list is the temperatures list.

129
00:10:29,610 --> 00:10:31,230
Sorry, the dates list.

130
00:10:31,410 --> 00:10:32,130
This one.

131
00:10:32,130 --> 00:10:34,770
And the second list is the temperatures list.

132
00:10:35,160 --> 00:10:44,520
This one, which has been manipulated in here, it has been changed to this values 30, 33, 45.

133
00:10:46,900 --> 00:10:48,840
And you can also do this.

134
00:10:48,850 --> 00:10:57,360
You can say the PT is equal to that, and each of these variables DX will be equal to the date and T

135
00:10:57,370 --> 00:10:58,990
will be equal to the temperatures.

136
00:10:59,590 --> 00:11:07,960
So basically you are deconstructing this tuple by extracting each list, the first list and the second

137
00:11:07,960 --> 00:11:08,410
list.

138
00:11:09,340 --> 00:11:12,220
That means we can do the same thing in here.

139
00:11:12,910 --> 00:11:18,730
You could say the DT is equal to get Delta days.

140
00:11:18,850 --> 00:11:23,740
And then here you say X is equal to D and Y is equal to T.

141
00:11:25,280 --> 00:11:25,910
Right.

142
00:11:26,930 --> 00:11:34,520
So what will happen now is that when we run the script, Python executes the codes, and then when the

143
00:11:34,520 --> 00:11:41,240
user changes the slider, Python executes the the code again from top to bottom.

144
00:11:41,240 --> 00:11:45,320
So any time the user changes the slider, the code is executed.

145
00:11:45,590 --> 00:11:53,780
And so if the slider if the user is set to as the value of the slider days will be equal to two.

146
00:11:53,780 --> 00:11:54,370
Right.

147
00:11:54,380 --> 00:11:59,540
And then when the function is called here, this value will be equal to two.

148
00:11:59,540 --> 00:12:05,690
So that value basically goes from here to here and then from here to here.

149
00:12:06,790 --> 00:12:09,760
And then from here to here.

150
00:12:11,110 --> 00:12:18,970
And then these two values are returned and they are stored in here and then they are rendered in the

151
00:12:18,970 --> 00:12:19,750
plot.

152
00:12:19,780 --> 00:12:23,400
So let's see how it goes now.

153
00:12:24,560 --> 00:12:25,480
Refresh.

154
00:12:26,810 --> 00:12:29,780
And change this to something else.

155
00:12:32,720 --> 00:12:36,620
And as you can see, the values are still changing.

156
00:12:36,620 --> 00:12:37,100
So.

157
00:12:38,080 --> 00:12:40,720
Depending on the value of the forecast.

158
00:12:41,650 --> 00:12:43,930
And that's how you.

159
00:12:45,280 --> 00:12:48,880
Plot data dynamically and streamlined.

160
00:12:48,910 --> 00:12:54,310
This function can, of course, be in another script and you can import it from here, as we have done

161
00:12:54,310 --> 00:12:56,140
several times during the course.

162
00:12:56,860 --> 00:12:59,860
So it's up to you what you do now with this code.

163
00:13:00,280 --> 00:13:07,570
But what we will do later on is we're going to get actual data from the weather forecast API.

164
00:13:07,720 --> 00:13:11,320
So currently we simply have some fake data in here.

165
00:13:12,400 --> 00:13:16,000
So with that I can commit the changes.

166
00:13:17,500 --> 00:13:23,410
Plot fake data dynamically and commit.

167
00:13:24,790 --> 00:13:25,530
Thanks a lot.

168
00:13:25,540 --> 00:13:26,500
I'll see you later.