There are some quite advanced features that can be incorporated into a dynamic chart, sometimes depending on where the data is coming from.   In this article, we are going to be begin with a fairly simple demo.   Then we will move on to one that is slightly more sophisticated and finally we will look at further enhancements that could be incorporated into this kind of graph.

   So, let me set the scene.  What do we want to do here?   Well, the first dynamic line chart I plan to create is one that takes some simple user input and displays the values as they are chosen on the chart.   As each new value is selected, the chart will be extended and redrawn to show the continuous changes that have been made.  When the screen width is "full", the earliest values are lost from view as the graphic display continues to scroll from right to left.

  One quick and easy demo is to create put a scrollbar on a form and use the changing scrollbar values as the data for the chart.   Take a look at the sample form below.

Form Controls    

    The silver grey area is a PictureBox.  As the values in the ScrollBar change, so the graph represents the new values.  I have used a Vertical ScrollBar here, but you can just as easily use a Horizontal ScrollBar.  In either event, the coding logic will be the same.

   Here are the steps to create the form.  

1. Add a ScrollBar control to the form.  Set its Minimum property to 0, its Maximum to 104.  (If you are wondering why I've picked that Maximum value, see the note at the bottom this page) .  Set the LargeChange property to 5; leave the SmallChange property as 1.  Change the control's name to SBUserValue to reflect its purpose - scroll bar to detect user's chosen values.
2. Add a PictureBox and name it picGraph.   Set its height to exactly 400.   Why ?   This is really just a way of keeping the scaling code as easy as possible.   The user values are going to be numbers between 0 and 100, so it will be very easy to multiply the value by 4 to automatically scale it vertically on the picturebox graph.     Real life almost certainly won't be this easy, but it will help us concentrate on the important drawing stuff for this first demonstration.  Change the PictureBox'sname to picGraph and set its backcolor to Gainsborough (or any other color that you prefer)
3. Finally,add a label to display the changing selection value.  This label plays no part in the chart creation; I've included it so you can check that any given value is correctly represented on the chart itself.   Name it lblValue.
4. The remaining label controls shown on the screenshot above are entirely optional and are not referred to in any of the code that follows.

   Initial Code

   Place this Imports statement at the top of the form:

System.Drawing.Drawing2D

    As you will know if you have read the earlier articles in this series, this allows us to use any of the  Drawing.Drawing2D class methods and properties in code without having to keep writing out the fully qualified names each time.  

   In the next step we will build the code that does all the drawing in the chart, dynamically changing the display each time a new value is selected via the ScrollBar.

----------------------------------------------------------------------------------------------------------------

   Note:

     The reason for setting a Maximum value of 104 (when what we really want is 0 to 100 on the scale) is due to what seems to me to be a small foible with the ScrollBar control.     If you set the Maximum to 100 and the Large Change to 5 then the highest value you will be able to physically obtain by moving the slider or clicking on the ScrollBar's arrow will be 96.  There may be an official fix for this, but I find that offsetting the Maximum by a figure of (LargeChange - 1) seems to do the trick.