Home Upgrade Search Memberlist Extras Hacker Tools Award Goals Help Wiki Contact

.NET 

[VB.NET]Example Of How to Create a Dynamic Line Graph [SOURCE][like CPU graph]

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 0
Double click button1, and add this code:
Code
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 If

Now 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.
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. :)
Thanks, already new this, but thanks nice post.
(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
(Sep 25, 2010 09:28 AM)Modesty 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.
(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)
Seems stupidly complex if you ask me (No offence) Why not just use an external Graph Library?
(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.
@Vorfin: What's wrong in making something rather than using the prebuilt? :p

(Sep 25, 2010 09:28 AM)Modesty 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.
(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]
This is great, thanks for the nice share mate.
Glad you like it guys :)
Will be posting my codedom class in a mo
Thats Relly Cool + thank YOu For Ur Post Keep It Up
Pretty cool, here's a .gif :).

[IMG]http://i56.[censored].com/2nktppl.gif[/IMG]
(Sep 26, 2010 08:16 AM)Samuell Wrote:  Pretty cool, here's a .gif :).

[IMG]http://i56.[censored].com/2nktppl.gif[/IMG]

Thanks brah. What did you use, camtasia?


Possibly Related Threads...
Thread / Author Replies Views Last Post
[Python] by MiguelSanchezJan 22, 2022 07:01 AM 0 147 Jan 22, 2022 07:01 AM
Last Post: MiguelSanchez
[C#] by debugDec 22, 2020 04:51 PM 0 226 Dec 22, 2020 04:51 PM
Last Post: debug
[C#] by Formula 1Dec 6, 2019 01:11 AM 23 699 Dec 6, 2019 01:11 AM
Last Post: itcorp