Matplotlib in Kivy, Display 3D graphs, Interactive graphs, Zoom and Pan¶
GitHub link¶
AI Transcript provided by KivyWhisper¶
Hello and welcome to Kivy School. Today I'm going to be showing you the Matplotlib widget video. This is a repo showcase.
Also, MP007 updates on the Kivy Discord often.
So what this is, it's going to be the Matplotlib widget on Kivy. So this is the repo. A fast Matplotlib rendering for Kivy based on Kivy Matplotlib.
Now why am I showcasing this repo over the Kivy Garden Matplotlib is because the Kivy Garden, it's like almost 10 years old. The last commit was 9 years ago, 2 years ago maybe, right?
But this one, it's been updated 2 weeks ago as of June 19th. So very recent and very updated. Now, okay we got this, we got this, okay we went here.
Now what's the prerequisite? You got to do the installation video. It's just because I'm going to be using some poetry commands to update, yeah in poetry shell to get into a virtual environment. Plus this is how I already have my Kivy setup. So you should watch the install video and then come back here.
Okay now why use this Matplotlib widget? If you have a need to display graphs, Matplotlib plus Kivy is one solution. Plotly from what I've seen does not have a UI or bunch to press. It just graphs well.
So if you check here, if you check here with Plotly, it's open source graphing libraries. Then if you look here, it's going to be another thing. If we look at their API, where is their, one second I'm going to look at their documentation, example apps. It's just documents. I don't think there's any widgets or anything.
And then here's the Plotly tutorial for Python. Just plots, just graphs. It's not anything too crazy. Alright 3D. But you can do the same thing with Kivy using Kivy and Matplotlib. This I'm not sure if this is using, let's see, Python plotly. Here's the real Python plotly.
And then where's the API reference? Right, this is all the references. It's just making graphs basically.
Alright so installation, right? So how am I going to install this? I'm going to use poetry add Kivy Matplotlib widget. So copy this. Then paste. Okay poetry update. Then I'm going to git clone this repo. Git clone this.
Now why am I doing that? Because this repo right here has examples and it's not connected to the pypi example. So this is going to be what you get when using pip install of poetry add. This is what you only see when you git clone this repo. And then that's what we're going to look at today.
These examples are what we're going to look at today. So let's change the directory here. Okay so we'll cd to examples and we'll check it out. So here from his, from this repo these are the key features, right? The key features are zoom with two fingers or mouse scroll. Pan with one finger or mouse left click.
Zoom box like Plotly library. Reset access and double click. Fast rendering. Use only one package Matplotlib. No additional back end. Cursor and hover option which is I think bugged for me. There's a legend widget like the Plotly library. There's an interactive access like the Plotly library. And the min max touch option to easily change access limit.
So we'll go here. The cd. Okay so cb example basic. And I've already gone through this so. cd examples. cd example python main. Okay so you see this is the graph. Now what are the features, right? Reset access. Oh it's not here. This is just a basic graph. So with this basic graph you have pan mode and then you have the zoom box modes. I'm going to zoom in just to this blue figure, right? Then double click to zoom out. Zoom in here. Zoom out.
So pretty good if you want to display any kind of like basic graph or data using Kivy. So clear this. Now our cd out and then cd back into example. Then python main. So this one has mostly most of the features are all all of the features. So I'm going to go one by one. Reset access on double click. So if you go right here pan. Right double click you reset. Right zoom with two fingers or mouse scroll. So we can go like this. I'm zooming in.
I'm zooming in. Right pretty neat. Neato. Then next pan with one finger or left mouse click. Panning. Panning. Okay zoom box like the poly library. So you go click here for a zoom box. You zoom right here. Right fast rendering mode. Okay it's fast rendering. I think this is something specific but I haven't been able to touch into it deep. Anyways there's fast rendering mode. And then use only one finger to pan. Okay. So this is the zoom box. Fast rendering mode. And then use only one package.
So yeah you just um you know poetry add this repo right here. You just add Kivy matplotlib widget. And then cursor and hover option. So this for me it's bugged if you go like this. And you click somewhere it will crash. I'm not sure what's going on. But everything else about the library works. Okay then there's a legend widget which I will show you later. And then interactive axis. So if you go right here. Min max. Go right here. You can actually set the maxes.
So let's do like 100. Right and then this one. Oh okay. 100. This one will be like minus 20. 20. Right and then this one right here it'll be you know 25. Then this side. Minus 10. Right so min max works. Right so you touch the axis and type in the number. That's how you change the axes. And then they have pan x like this.
Pan the x here. But it does not it blocks you from panning y. Here's pan y. Pan y right here. Then this is the adjust the axis. Okay so let's go. Let's zoom back into the widget. Just y right here. And then zoom x. Right and then there's zoom y. Okay so we're gone here. Gone through all the features.
How to change the plot. Okay so something very quick quick to note in this example. All interactive options. The way to change this graph. It's just regular map plot lib. So you see this is one axis. This is for line one. This is like the x. This is the y. This is the x. This is the y. So I'm going to say something like you know five. Five and then five. And then here you can go like minus 10. Minus 10. Save it. And then rerun python main.py in your poetry shell.
In your virtual environment. Then you can see. Okay so the first graph is the blue graph. Is there an object five five. Yeah five and five. So it's here. And then here's the minus 10 minus 10. Which is all the way here. Right. That's just you know. That's how to very quickly manipulate this. And then if you want to do anything more complicated. You're free. Feel free to look into the code. It's not that crazy. It's just a regular map plot lib plot here in here.
So that's just a quick way to manipulate the plot. And then let's check here. There's another example. It's cd this icon main. It's a good thing they're all main.py. Otherwise I'd have to find the name. Here another twin axis legend. Here's an axis. Here's an axis. And here is the legend. Right. The legend was even added to now. I can cross off here. Legend widget. Right. It works. Here's the zoom box again. Right. If you double click you reset. Here's a pan. You pan left right. And then here's another. Here's another button called the drag legend.
All it does is okay. Cool. You can drag the legend around. Right. Very neat. And I think it's a pretty pretty complete feature. And then you can go home to reset everything. Drag the legend back to where it was. And then there's like a previous screen. And you see here again another example. Right. And zoom in. Previous screen. Another example. Let's see what was the other one. Okay. That's fine. That's fine. Twin axis legend. Right. So pretty neat. And I think even this. Yeah. You see here the axes even respond to your panning. Pretty cool. Pretty cool. Okay. What's next? On me. Okay. So this is another 3D example.
If you can see here you can just move it. CD up. CD here. Python main. Okay. So here it's another another example. This one I remember you just add. You can add more lines. And you see here the legend. Legend updates when you add a line. You can change the graph. This is a scatter plot. You can just add. Add. Add more. And you see it updates. Right. Then you can drag the legend around. You can zoom all the way here to your data points. You can reset. Then you can pan around. See if there's more graphs. Yeah. That's it. And see it's line 14. Right. It even does it remember.
Okay. It's not this one. But there's one of the examples where it remembers the modifications you made. But it shouldn't be that complicated to make your own. Your own widget. That's literally this. And it remembers the modifications you made. There's this. Python main. So here's another.
This is an animation. If you see that right here it's going to be a sinusoidal wave. So we can just let it play. It updates very nicely. Even through a virtual machine. Right. Pretty cool. You can pan around. You can zoom here. Right. Home. And then you see the axes are changing. It's a very cool animation.
Okay. I watched this. Then you can, you know, copy this repo yourself and then finish watching the widget. Let me see what else. CD up. CD here. Python main. And here's another one with like trends. It looks really cool. It's like, you know, the stock market. And here this one here is just the, this is the monitor module actually. Because this is run through a virtual machine.
So yeah, you've got low FPS, but it's, it would be way better if you're running on your actual machine. And you see here, it's just a lot of data being processed right now. Right. Up to like 10,000 points maybe. But pretty good. It's all, it's almost 24 FPS. Then if you can zoom in, right. Zoom in, you can do a zoom box right here. Then you can go home. So pretty cool. Pretty neat.
Okay. Let's do this. Check this. Python main. Okay. So what's my notes works. Even shows you the line setting and line data. Yeah. So if you click the line setting button right here, it will tell you the setting of the, of the line. So right now it has a green color width of two, no style. You can check the line data. Oh yeah. The line data, which is, the line data right here, you can just compare X to Y. So what's the change in the Y range? It's 25 right here. It's 25. And then the X is 23 days right here. Right. So this is just a way to compare, you know, two points. Again, you can compare like what's the Delta between these two, right? 14 and one. Pretty cool. You go here.
What's the Delta between this, you know, minus two because you're moving back in the minus direction and then 11 range, right. Or if you want to go two negatives, you know, minus two because you're going left and then you're going down. Right. So line data. This is a really cool line right here. You can even show like, you know, in a live demonstration. Okay.
This is my data. This is what we're showing. You can even measure, you know, difference between these two peaks, right? Pretty cool. Okay. And then I think we can even still pan right here, right? Panning still works. Okay. Let's see what else. Okay. CD here, Python main. Okay. Features adding data points. Okay. So this one they're using, you know, icons, but basically the main point of this is features adding data points. Oh, oh yeah. So you can just add data and then even the graph updates in real time, right? And you can see here updates in real time.
Then add scatter in real time and flip the bar to be like this and like this. This is pan. I think this is still the resize, right? And you can still add data. You can still add data and home to reset. Then you update the min max again, like 20, like negative 10. Then this one, the clicking for me, I'm not sure. I think there's a bug. I'm going to actually report the bug, you know, after I record this video. Okay. So you added feature or you added data points in real time. That's cool.
What else? Example legend. Okay. Ah, this is the example. So you can add more plots. You can add more plots and you see, it will remember it, right? And it's even draggable too, right? Then you can remove it, right? And then add, then remove. And then the zoom box still works. Let's just zoom at this intersection right here. What does not work? Okay. Well, it should work because it's worked in all the other examples. There you go. Now it works. Now the zoom box works.
Adding widgets or you're adding lines. Okay. CD up. Okay. This one and same as legend, but the legend is horizontal. So the last, um, the last example, the legend was vertical like this. Now the legend is horizontal. Again, it's the same add more plots, remove more plots. And the lines are right here. Right. And then you can still pan. You can still zoom. Okay. Then CD up, then Python copy this CD here. I thought let's just press up so I can do a previous history main.py. So here, there's all the graphs that we've seen so far. And this one's a new graph. This one's a new graph. But again, this is, um, basic map plot look graphs, right?
There's still zoom box still works on this zoom box works on the scatter and box works on this graph. Zoom box works here. Right. Then home, right. Everything gets reset in pan and pan, you can pan, you can pan. And even let's say I zoom here, right. They zoom here. Oh, but the legend's blocking it. You can always move the legend. You can move the legend here, you can move the legend here, you can move the legend here. So very cool. Um, very cool widget, very cool library.
And it's something that would be very useful for, you know, data scientists or someone who just says, oh, I can show it to you. And then, um, I have a Kivy app for it. Right. Okay. So here's another example slider. It's going to be a sinusoidal wave simulator. So you can change the amplitude to get bigger. Can I change the, no, I can't, but you can go like this. Oh yeah. And the mouse also changes the axes and increase the frequency decrease. And then you can zoom, let's say I zoom at this peak right here. Okay. Zoom out. I zoom out like this. Can I zoom into a peak? There you go. Now it works. You can even zoom in more and more and more. Double click to reset and go right here and go right here. We can pan it. You can zoom.
Sometimes the zoom doesn't work. Very interesting. There now it works. So that's another report I'm going to make to the library. There. So you can see the two peaks. CD up, then CD here. I saw main. So my notes are, these are the features we've seen before, two graphs. So yeah, there's two graphs right here. And again, there's panning, panning, panning, panning, panning, panning, panning, panning, zooming in, right? Let's double click to reset cursor, which is bugged. I'm not going to touch it. Okay. Pan X, just like this and pan the X and pan the Y. Then this one is adjusting the X right here to make it bigger, make it smaller, bigger, smaller. Then here's zooming X. Right. So if you mouse wheel, you'll zoom in on the X. And here, if you mouse wheel here, you'll zoom in on the Y. And then here it just says, oh, it's a scalable axis. So here it's just ints.
Now they're floats, ints and then floats. Then here, if you press back and forward, it's just going back to the different views you've been looking through. Right. So if I go all the way back, it's the very beginning. Here's a scalable axis example. Here's a static access example. Okay. CD up and copy this CD here. I thought, okay, press up arrow, up arrow, up arrow, path on main.py. Here again, the cool thing about this navigation bar is it tells you the X, Y coordinates, which is pretty cool. And you can go pan again, then zoom again, right? Double click should reset. Okay. Home resets here. Then you can go back and forward through the views you've been looking through. See if I can go back all the way. Okay. And this is the stack axis and the scalable axis. So if you zoom here, right, I think they're the same for now, just because, you know, the graphs are similar.
Okay. Then CD up, CD here, two, three. Here it's the same. I think nothing's changed. Home, then this one again, this is ints, this is floats. Cursor, cursor will break. I'll just show you right now. Cursor will break. Something is up. I'm gonna report this again. Here pan X and X, pan Y. Adjust the X, right, make it bigger, smaller, just the Y, bigger, smaller. Zooming in X. It's the mouse wheel. Mouse wheel is zooming. Zoom Y, mouse wheel is zooming, just the Y. Then I can change the axis. Okay.
Now here there's going to be an example with Seaborn if you ever use that library. CD right there. One, two, three, python main.py. Now it will break. I don't think I added Seaborn yet. Okay. Seaborn's here, but basically this is another example. Right. So here it just has these grids that shows you, you know, what's going on. It's just grids. It's pretty nice and neat to have these grids as like a reference, point of reference when you're looking at charts. Okay. CD up. CD here. One, two, three, python main.py. The same stuff. This is a pan. This is a zoom box. Okay. CD up. CD here. Okay. Example. One, two, three, python main.py.
So here, do you see this? 50,000 data points basically, right? Still works okay. Then check the zooming. Zoom in here, zoom in here, zoom in here, zoom in here, right? Pretty neat. And home. So 50,000 points of data, right? And then, okay, let's go home. Then pan. Pretty performant. But you know, this is also just one widget. If you had like more widgets here and here, maybe it will get laggy. But you did the main point, which is to display a graph within an app, right? Within Kivy. Which is pretty cool. CD up. CD here. Python main. So here, when you hover, it just compares all the graphs on the point. Right. Then I think compare hover nearest hover, right?
Nearest hover dies, which is in my notes. But it mostly works. Go to zoom box here. Compare hover will still work. Zoom box here. Compare hover still works. And if you pan, still works. Okay, it doesn't work here. It works here. Probably because it's not a data point, right? See, this is not a data point. This is a data point. This is a data point. This is a data point. This is a data point. This is a data point. In the middle. I don't think there's a data point here. Okay, CD up. CD here. 123 for Python main.py. Again, this is a scatter plot. You can change the axes. This will die straight up. Just not touch it. Get home to reset. Okay. Okay. So that's most of the examples for map plot widget for Kivy.
Now it's going to be just bugged examples. This is what I'm going to show for the maintainer, just for the repo. So if you're interested in watching the bugs or how I bug fix, okay, cool. If not, you can just click off the video. But this is going to be for me recording this just to make an error report and then make my issue on that GitHub repo.
So here is the bugged example. This might have to do with a poetry install instead of a pip install. Now why is that a problem? Because right here, there's a setup.py, which I believe poetry uses setup.py to install. But in any case, this might be an issue with the way I installed it instead of using pip. I'm not sure, but I will show this. CD up. So change directory here. Three. Python main.py. It dies easily. I'm not sure what's going on with this example. Right here, it says, why must be a sequence?
And I'll just show you my error message. This shouldn't be an error. It should not be an error. Somewhere here, click here. Why should be a sequence, right? And if I just, I could print, but let's use PDB just to be fancy. Most likely why will be like a none. Okay. Let's see what's why. It's an int. It's not a list. Interesting. So it probably, this became a list. It'll run. Let's check self again. Args. Okay. Self. Exit and let it die. If I just go like this, it might run. Oh, and then I have to control C to quit out, turn off PDB. Okay.
NumP864 object is not iterable. Okay. So something's going on here. Right. Okay. One more thing. You want a list. Let's see why again. It's an int. Type of why. I mean, I know the type of why it's going to be numpy. Okay. What if you do list of why like this? Okay. Interesting. Exit. Again, if I do a list, just raw convert it, it's not going to work. So something's going on here. Just a to error report and then control Z, undo all my changes. Example four died. It might be on Linux. So let's go here. Then we'll four right here.
So CD up example four. I found main. Okay. So something's going on. Okay. This is group review object. There's no attribute joined. Do you mean joined? I mean, I'll just try join, right? Control S and clear these. Oh, wait, it really was joined. Okay. I can actually observe this. Okay. Cool. The pan works. Panning works here. And it works here. Panning works here. Zoom box. All right. Let's just zoom. I can zoom here. I've been zooming here. Okay. Cool. Previous screen. Ooh, fancy. This is like a heat map. Okay. Let me home. Can I just move around? Cool. Okay. So this is like the X axis. This is the Y axis. Sorry. This is the X axis. This is the Y axis. Cool. Okay. Cool.
We've seen these graphs before. Cool. These are actually like mathematical functions. If you see in command prompt, it's like actually calculating in real time the values of these. Pretty cool. Pretty cool. Okay. Next. Okay. So home. Let's reset everything. Okay. Cool.
So I fixed this bug. Apparently you're supposed to just say joined right here instead of join. It might be like a, I'm not going to get, okay. I'm going to guess. This is just a guess. You know, a couple of things could be Python two to Python three transition where joined got renamed to join. Another one could be like matplotlib updated the join method and then renamed it to join. But, or, you know, it could be a symbol typo, but anyways, cool. Cool. That this was fixed easily.
Let me just write this down. It's, you don't need to be on Linux. It's just right here. Bug is that join. It needs to be joined. Line 385. Okay. Okay. This, I'll just check these off when I make the, make the issue.
The example cursor. Right here. But if I click cursor, click this, it's going to die again. Same error. Why must be a sequence? And then why is going to be some, if you control left click on virtual box, it will, not virtual on VS code, it will put you to that error line. It was not this. It's this again, it's going to be the same thing. It's going to be like a numpy, um, int, I think when it should be a list. That's a bug.
Yep. See the sample hover. Okay. Works again. Why must be a sequence? Same error. Again, with all these cursors, it's probably just, um, handling this why. Right. And then it explodes. All right.
So this is Kivy School. Thank you for watching. I hope you learned something today and I hope that if you ever have the need to display any kind of data, any kind of use like map plot lib, or just show off, you know, graphs and manipulate graphs using an app. I hope you choose Kivy and I hope you choose this, uh, map plot lib widget. Right. So thank you and have a great day.
Article Error Reporting¶
Message @BadMetrics on the Kivy Discord.