CSharp Reference Code for Sample Charts

From ZedGraphWiki

Quick Start Tutorial

NOTE: The code on this page is for ZedGraph version 5. You can view the code for version 4.3 here.

The following is a step-by-step procedure to make a working ZedGraph chart using the ZedGraphControl. You can download a sample project that contains this entire tutorial here (Version 5.0.6).

• Open Visual C# 2005 Express Edition (you can download it free here)
• From the File menu, select New Project
• Select Windows Application, and name it ZedGraphSample
• In the Solution Explorer, right-click on References and select "Add Reference..."
• Pick the browse tab, and navigate to the zedGraph.dll (downloadable from here), and click OK
• From View menu, select Toolbox, scroll down to the bottom of the toolbox window to see the "General" bar
• If ZedGraphControl is not already available as an option, rightclick on the "General" bar, and select "Choose Items..."
• Under ".Net Framework Items" tab, click browse
• Navigate to the zedgraph.dll file, and click Open, Click OK
• In the toolbox, left-click on the ZedGraphControl, go to your Form and click inside it to place a ZedGraphControl item.
• With the ZedGraphControl selected in the form, under the View menu select "Properties Window"
• Change the "(Name)" field for the ZedGraphControl to zg1 (it would typically be 'zedGraphControl1').
• Double click the Windows Form (not the ZedGraphControl), this will cause the window to switch to CodeView, with a template for the Form1_Load() method
• Go to the top of the file and add using ZedGraph;
• Go to any sample graph from the ZedGraphWiki Sample section, and copy the entire contents of the CreateGraph() method into this new Code File (inside the Form1 class definition, but outside any existing method definition)
• Here's an example CreateGraph() method:

private void CreateGraph( ZedGraphControl zgc )
{
   GraphPane myPane = zgc.GraphPane;

   // Set the titles and axis labels
   myPane.Title.Text = "My Test Date Graph";
   myPane.XAxis.Title.Text = "X Value";
   myPane.YAxis.Title.Text = "My Y Axis";

   // Make up some data points from the Sine function
   PointPairList list = new PointPairList();
   for ( double x = 0; x < 36; x++ )
   {
      double y = Math.Sin( x * Math.PI / 15.0 );

      list.Add( x, y );
   }

   // Generate a blue curve with circle symbols, and "My Curve 2" in the legend
   LineItem myCurve = myPane.AddCurve( "My Curve", list, Color.Blue,
                     SymbolType.Circle );
   // Fill the area under the curve with a white-red gradient at 45 degrees
   myCurve.Line.Fill = new Fill( Color.White, Color.Red, 45F );
   // Make the symbols opaque by filling them with white
   myCurve.Symbol.Fill = new Fill( Color.White );

   // Fill the axis background with a color gradient
   myPane.Chart.Fill = new Fill( Color.White, Color.LightGoldenrodYellow, 45F );

   // Fill the pane background with a color gradient
   myPane.Fill = new Fill( Color.White, Color.FromArgb(220, 220, 255), 45F );

   // Calculate the Axis Scale Ranges
   zgc.AxisChange();
}

• The sample graph looks like this
  

• Go back to the design view, click on the Form (not the ZedGraphControl)
• From the View menu, select "Properties Window"
• At the top of the Properties window, click on the lightning bolt icon to see the events
• Click in the empty box to the right of "Resize", and hit enter
• You will now be back in the code view, with a template for Form1_Resize
• Modify Form1_Resize, and add a SetSize() method to look like this:

private void Form1_Resize( object sender, EventArgs e )
{
   SetSize();
}

private void SetSize()
{
   zg1.Location = new Point( 10, 10 );
   // Leave a small margin around the outside of the control
   zg1.Size = new Size( this.ClientRectangle.Width - 20, this.ClientRectangle.Height - 20 );
}

• Modify your Form1_Load() method so that it looks like this:

private void Form1_Load( object sender, EventArgs e )
{
   CreateGraph( zg1 );
   SetSize();
}

Running the Sample Project

• You can now run the project and view the graph (under the Debug menu, click "Start without debugging"

• The graph will resize with the size of the form
• Right click on the graph to see the following options:
  • Copy : copy the image to the clipboard
  • Save Image As... : save the image to a file
  • Page Setup... : Setup for printing
  • Print... : Print the chart
  • Show Point Values : enables tooltips that show the individual values when hovering the mouse over the chart
  • Unzoom : undo the last zoom or pan operation
  • Undo all zoom/pan : undo all the zooms/pans
  • Set Scale to Default : set the chart to default axis ranges

• If you left-click and drag in the chart, it will zoom to the specified region
• If you middle-mouse click and drag in the chart, the chart will pan as you drag