+- Hack Forums (https://hackforums.net)
+-- Forum: Tech (https://hackforums.net/forumdisplay.php?fid=444)
+--- Forum: Coding (https://hackforums.net/forumdisplay.php?fid=151)
+---- Forum: Software Development (https://hackforums.net/forumdisplay.php?fid=118)
+---- Thread: [.NET] [VB.NET]Example Of How to Create a Dynamic Line Graph [SOURCE][like CPU graph] (/showthread.php?tid=699827)
Pages: Pages
1
2
[VB.NET]Example Of How to Create a Dynamic Line Graph [SOURCE][like CPU graph] - Modesty - Sep 25, 2010
What this does:
Know those graphs you get, like on the task manager showing CPU usage history, the horizontally scrolling ones which scroll to the left, each time a new point is plotted on the graph? Well heres how I managed to create something similar to that in VB.NET. unfortunately it uses timers, this is just a proof of concept.
The code is really self explanatory, and is not targetted at beginner users.
Place a Picturebox (reccommended size 400 width, 200 height, set the back color to black) and a Button on your form. The picturebox is where the graph will be displayed. Now add a timer with an interval of 1000ms.
Go to codeview, and enter these variables, just under "Public Class Form1"
Code
Dim whichpoint As Integer = 1
Dim xs() As String = {0, 50, 100, 150, 200, 250, 300, 350} ' an array containing the positions at which each new point will be made
Dim ys() As String = {0, 1, 1, 1, 1, 1, 1, 1} ' starting y coords, set at 0Code
timer1.start()Now double click the timer and add this code
Code
If whichpoint <= xs.Length - 1 Then
Dim myPen As New System.Drawing.Pen(Brushes.Green, 3)
Dim formGraphics As System.Drawing.Graphics
formGraphics = PictureBox1.CreateGraphics()
formGraphics.DrawLine(myPen, CInt(xs(whichpoint - 1)), PictureBox1.Height - CInt(ys(whichpoint - 1)), CInt(xs(whichpoint)), PictureBox1.Height - CInt(ys(whichpoint)))
whichpoint += 1
Else
PictureBox1.Refresh() 'refresh picturebox to remove old graph
whichpoint = 1
Timer1.Stop()
Dim r As New Random() 'create a new random point that is going to be drawn
ys = {ys(1), ys(2), ys(3), ys(4), ys(5), ys(6), ys(7), r.Next(20, 150)} ' here we remove the first point of the old graph, add a new point to the end (this
'is currently a random number) and we redraw the graph as shown below. Then the timer is started again and this loops round,
'each time recreating the old graph withouit the first point and adding on a point.
Dim myPen As New System.Drawing.Pen(Brushes.Green, 3)
Dim formGraphics As System.Drawing.Graphics
formGraphics = PictureBox1.CreateGraphics()
formGraphics.DrawLine(myPen, CInt(xs(whichpoint - 1)), PictureBox1.Height - CInt(ys(whichpoint - 1)), CInt(xs(whichpoint)),PictureBox1.Height - CInt(ys(whichpoint)))
whichpoint += 1
formGraphics.DrawLine(myPen, CInt(xs(whichpoint - 1)), PictureBox1.Height - CInt(ys(whichpoint - 1)), CInt(xs(whichpoint)), PictureBox1.Height - CInt(ys(whichpoint)))
whichpoint += 1
formGraphics.DrawLine(myPen, CInt(xs(whichpoint - 1)), PictureBox1.Height - CInt(ys(whichpoint - 1)), CInt(xs(whichpoint)), PictureBox1.Height - CInt(ys(whichpoint)))
whichpoint += 1
formGraphics.DrawLine(myPen, CInt(xs(whichpoint - 1)), PictureBox1.Height - CInt(ys(whichpoint - 1)), CInt(xs(whichpoint)), PictureBox1.Height - CInt(ys(whichpoint)))
whichpoint += 1
formGraphics.DrawLine(myPen, CInt(xs(whichpoint - 1)), PictureBox1.Height - CInt(ys(whichpoint - 1)), CInt(xs(whichpoint)), PictureBox1.Height - CInt(ys(whichpoint)))
whichpoint += 1
formGraphics.DrawLine(myPen, CInt(xs(whichpoint - 1)), PictureBox1.Height - CInt(ys(whichpoint - 1)), CInt(xs(whichpoint)), PictureBox1.Height - CInt(ys(whichpoint)))
whichpoint += 1
formGraphics.DrawLine(myPen, CInt(xs(whichpoint - 1)), PictureBox1.Height - CInt(ys(whichpoint - 1)), CInt(xs(whichpoint)), PictureBox1.Height - CInt(ys(whichpoint)))
whichpoint += 1
Timer1.Start()
End IfNow press debug and watch it rawr :)
Screeny:
[img]http://i56.[censored].com/2nktppl.gif[/img]
thanks to Classical for making the gif^^
Note: The code contains some specifics to the size of my picturebox, such as the positions at which the points will be drawn. This was put intentionally to prevent newbs trying this out without having prior knowledge, or not wanting to learn. For the more experienced members, remmeber to adjust the array 'xs' so that the points shown fit in your picturebox.
Download Full project: http://www.mediafire.com/?5g26z39kr5hk412
Project was created in VS2010, so if you have 2008, just create a new project, delete the form1, and drag in the form1.vb in the download into your solution provider and it should add it.
* - Coder - Sep 25, 2010
Thanks :D
Just what I was looking for. I've seen this in your Rat, I knew you could help.
My way is a bit different, but this is still great. :)
* - DarkSeven46 - Sep 25, 2010
Thanks, already new this, but thanks nice post.
* - Modesty - Sep 25, 2010
(Sep 25, 2010 09:23 AM)Coder Wrote: Thanks :D
Just what I was looking for. I've seen this in your Rat, I knew you could help.
My way is a bit different, but this is still great. :)
Hmm yh urs did seem sexy. But mine will look identical if i make the points at which the graphs are plotted closer.
Either way, glad it helped.
(Sep 25, 2010 09:24 AM)DarkSeven46 Wrote: Thanks, already new this, but thanks nice post.
Didn't quite understand, how can you already know this?
You knew the code, or the concept/pseudo-code
* - DarkSeven46 - Sep 25, 2010
(Sep 25, 2010 09:28 AM)P Y R O Wrote: Hmm yh urs did seem sexy. But mine will look identical if i make the points at which the graphs are plotted closer.
Either way, glad it helped.
(Sep 25, 2010 09:24 AM)DarkSeven46 Wrote: Thanks, already new this, but thanks nice post.
Didn't quite understand, how can you already know this?
You knew the code, or the concept/pseudo-code
I knew the concept of it.
* - Modesty - Sep 25, 2010
(Sep 25, 2010 09:35 AM)DarkSeven46 Wrote: Didn't quite understand, how can you already know this?
You knew the code, or the concept/pseudo-code
I knew the concept of it.
[/quote]
Oh lol kl. You said it in a way as if it was an accomplishment of mine, sorry for the misunderstanding.
Glad you knew it ✌ Intelligence is around meh (8)
* - Vorfin - Sep 25, 2010
Seems stupidly complex if you ask me (No offence) Why not just use an external Graph Library?
* - Modesty - Sep 25, 2010
(Sep 25, 2010 10:37 AM)Vorfin Wrote: Seems stupidly complex if you ask me (No offence) Why not just use an external Graph Library?
Not complex at all?
And whats the point of a huge graph library if you can just do it quickly like this? Also, this is customizeable to an extent, and the picturebox allows a background image.
Moreover, anyone is free to take this, and profit off this in any way, monetarily or just for learning.
Thanks for the comment though.
Oh and the code above can be reduced to nearly half the size. I only did it in the way I did above for debugging purposes and such, But you can add in for loops in here, and it will be half the size, I'm sure.
* - Coder - Sep 25, 2010
@Vorfin: What's wrong in making something rather than using the prebuilt? :p
(Sep 25, 2010 09:28 AM)P Y R O Wrote: Hmm yh urs did seem sexy. But mine will look identical if i make the points at which the graphs are plotted closer.
Either way, glad it helped.
I meant different. You are drawing the graph with a moving animation, whereas I am drawing the graph and moving the actual picturebox in a different direction.
I don't know how I can use this to complete my graph. :/
I'm pretty sure there should be a way like PaintPicture in .net. I'll try to find it.
* - Modesty - Sep 25, 2010
(Sep 25, 2010 11:46 AM)Coder Wrote: @Vorfin: What's wrong in making something rather than using the prebuilt? :p
I meant different. You are drawing the graph with a moving animation, whereas I am drawing the graph and moving the actual picturebox in a different direction.
I don't know how I can use this to complete my graph. :/
I'm pretty sure there should be a way like PaintPicture in .net. I'll try to find it.
Add my msn bro, i'll do it for you:
[email protected]
* - TheBlackMarket - Sep 25, 2010
This is great, thanks for the nice share mate.
* - Modesty - Sep 26, 2010
Glad you like it guys :)
Will be posting my codedom class in a mo
* - rapidguide - Sep 26, 2010
Thats Relly Cool + thank YOu For Ur Post Keep It Up
* - Samuell - Sep 26, 2010
Pretty cool, here's a .gif :).
[IMG]http://i56.[censored].com/2nktppl.gif[/IMG]
* - Modesty - Sep 26, 2010
(Sep 26, 2010 08:16 AM)Classical Wrote: Pretty cool, here's a .gif :).
[IMG]http://i56.[censored].com/2nktppl.gif[/IMG]
Thanks brah. What did you use, camtasia?