Using ZedGraph with ASP.NET

• Download source files - 184.63 KB

Introduction 

This article will help you get acquainted with Web based usage of Zed Graph. You will be able to use those graphs on your web pages.

Background

As you can't find any built in library for Charting in .NET, you have to use a third party source. What I found free and helpful is -- ZedGraph. 

Using the Code 

You need to reference 2 DLL files:

1. ZedGraph.dll
2. ZedGraph.web.dll

Also if want to make your web control visible in the toolbox, you need to create a tab in ToolBox and click Choose Item and then browse for ZedGraph.web.dll. You will get a control in your toolbox. Drag one to your design window.

There do exist several graphs, but I work on the following:

1. Clustered Column 
2. Stacked 
3. Clustered Bar 
4. Stacked Bar 
5. Pie 
6. Line

Add a reference to ZedGraph namespace:

using ZedGraph; 

In the properties window, click on event and double click on RenderGraph to create an event for Rendering of Graph. This is where I write my whole code. You need to get the specific pane on which you are going to draw your graph. Following is the code to get that specific GraphPane object:

// Get the GraphPane so we can work with it
GraphPane myPane = masterPane[0];

Once you get the reference to GraphPane object, you can set its X and Y axis title like this:

// Set the title and axis labels        
myPane.XAxis.Title.Text = "X-Axis";
myPane.YAxis.Title.Text = "Y-Axis";

I have used some string and double arrays here to create some static points for drawing graph. String array here is used to create labels on X axis. I don't want to show 1,2,3… for months instead I want to show the name of months on X-axis. That’s why this label array has been created here.

// Make up some data points
string[] labels = { "Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", 
			"Aug", "Sep", "Oct", "Nov", "Dec" };

double[] xAxis = { 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 };
double[] x = { 10, 60, 50, 60,50, 90, 50, 90, 70, 80, 50, 30 };
double[] x2 = { 30, 40, 20, 30, 30, 60, 90, 90, 50, 80, 30, 70 };
double[] x3 = { 60, 60, 20, 20, 90, 30, 80, 60, 50, 80, 70, 0 };
double[] x4 = { 80, 50, 20, 20, 90, 80,30, 50, 60, 30, 80, 70 };
double[] x5 = { 90, 10, 20, 20, 20, 20, 50, 30, 90, 60, 70, 80 };    

You need to create an object for BarItem. Here we just declare an object:

// Declare a BarItem:- Bar Item is used for creating a bar     
BarItem myCurve;

LineItem has been declared for drawing a line:

// Declare a LineItem:- LineItem is used for creating a line     
LineItem oLineItem;

I have used switch to set different options for different graphs:

switch (cboGraphType.SelectedValue)
        {
            case "Clustered Column":
            case "Stacked":

Here I have used AddBar method of GraphPane class. You need to supply a Caption that will be displayed on the legend (I used “Completed” for caption on legend). For vertical bar, you need to give Y values in the form of an array. Each item in the array will be considered as a point. Like here, the first bar is of 80 unit on Y axis and the second is of 50 and so on..

// Generate a blue bar with "Completed" in the legend
myCurve = myPane.AddBar("Completed", null, x4, Color.Blue);

Here a gradient is created and filled inside bar. The first three parameters are color and the fourth one is angle:

// Fill the bar with a Blue-white-Blue color gradient for a 3d look
myCurve.Bar.Fill = new Fill(Color.Blue, Color.White, Color.Blue, 0f);

This code is the same, but here I have created a red bar. This red bar is adjacent to each blue bar.

// Generate a red bar with "Identified" in the legend
myCurve = myPane.AddBar("Identified", null, x3, Color.Red);
// Fill the bar with a red-white-red color gradient for a 3d look
myCurve.Bar.Fill = new Fill(Color.Red, Color.White, Color.Red, 0f);
break;

For clustered bar and stacked bar, the bar should be horizontal so here I have assigned the double array to X axis rather than Y axis.

case "Clustered Bar":
case "Stacked Bar":
     // Generate a blue bar with "Completed" in the legend
     myCurve = myPane.AddBar("Completed", x4, null, Color.Blue);
     // Fill the bar with a Blue-white-Blue color gradient for a 3d look
     myCurve.Bar.Fill = new Fill(Color.Blue, Color.White, Color.Blue, 0f);

     // Generate a red bar with "Identified" in the legend
     myCurve = myPane.AddBar("Identified", x3, null, Color.FromArgb(132, 33, 99));
     // Fill the bar with a red-white-red color gradient for a 3d look
     myCurve.Bar.Fill = new Fill(Color.Red, Color.White, Color.Red, 0f);

     break;

A pie chart is created here. The chart fill is set to None to let it empty. After that, the legend’s position has been set using the location property. Legend.Position is set to LegendPos.Float to allow legend to be adjusted according to location supplied. Font size is set afterwards. After this IsHStack is set to false to make the legend appear vertical.

case "Pie":
    // Fill the pane background with a color gradient
    myPane.Fill = new Fill(Color.White, Color.Goldenrod, 45.0f);
    // No fill for the chart background
    myPane.Chart.Fill.Type = FillType.None;
    // Set the legend to an arbitrary location
    myPane.Legend.Position = LegendPos.Float;
    myPane.Legend.Location = new Location
	(0.95f, 0.15f, CoordType.PaneFraction, AlignH.Right, AlignV.Top);
    myPane.Legend.FontSpec.Size = 10f;
    // IsHStack is use the create the legend items horizontally
    myPane.Legend.IsHStack = false;

Similar to that of BarItem, you can use PieIt<code>em. Here I created 12 slices, one for each month. The first parameter is the double value, second and third are color and the fourth is angle. The fifth one is the displacement of pie. You can have your pieitem out like a slice of pizza if you use some displacement like 0.2.

// Add some pie slices
PieItem segment1 = myPane.AddPieSlice(x4[0], Color.Navy, Color.White, 45f, 0, "Jan");
PieItem segment2 = myPane.AddPieSlice(x4[1], Color.Purple, Color.White, 45f, 0, "Feb");
PieItem segment3 = myPane.AddPieSlice(x4[2], 
	Color.LimeGreen, Color.White, 45f, 0, "Mar");
PieItem segment4 = myPane.AddPieSlice(x4[3], 
	Color.SandyBrown, Color.White, 45f, 0, "Apr");
PieItem segment5 = myPane.AddPieSlice(x4[4], Color.Red, Color.White, 45f, 0, "May");
PieItem segment6 = myPane.AddPieSlice(x4[5], Color.Blue, Color.White, 45f, 0, "Jun");
PieItem segment7 = myPane.AddPieSlice(x4[6], Color.Green, Color.White, 45f, 0, "Jul");
PieItem segment8 = myPane.AddPieSlice(x4[7], Color.Yellow, Color.White, 45f, 0, "Aug");
PieItem segment9 = myPane.AddPieSlice(x4[8], 
	Color.YellowGreen, Color.White, 45f, 0, "Sep");
PieItem segment10 = myPane.AddPieSlice(x4[9], 
	Color.AliceBlue, Color.White, 45f, 0, "Oct");
PieItem segment11 = myPane.AddPieSlice(x4[10], 
	Color.AntiqueWhite, Color.White, 45f, 0, "Nov");
PieItem segment12 = myPane.AddPieSlice(x4[11], Color.Aqua, Color.White, 45f, 0, "Dec");
// Calculate the Axis Scale Ranges           

There is no obligation to call AxisChange() for manually scaled axes. AxisChange() is only intended to handle auto scaling operations. Call this function anytime you change, add, or remove curve data to ensure that the scale range of the axes are appropriate for the data range. This method calculates a scale minimum, maximum, and step size for each axis based on the current curve data. Only the axis attributes (min, max, step) that are set to auto-range (MinAuto, MaxAuto, MajorStepAuto) will be modified. You must call Invalidate() after calling AxisChange to make sure the display gets updated. This overload of AxisChange just uses the default Graphics instance for the screen. If you have a Graphics instance available from your Windows Form, you should use the AxisChange(Graphics) overload instead.

masterPane.AxisChange(g);
// There is no need for pie chart to adjust X and Y axis. 
// So the rest of the code is irrelevant with regard to Pie Chart
return;
break;

For line, you need to use AddCurve method and use Xaxis double array for X-axis and x4 for Y-axis. SymbolType is used to create a symbol at a specific point. Here I want no symbol so I used SymbolType.None.

case "Line":
    oLineItem = myPane.AddCurve("Completed", xAxis, x4, Color.Blue, SymbolType.None);
    oLineItem = myPane.AddCurve("Identified", xAxis, x3, 
		Color.FromArgb(132, 33, 99), SymbolType.None);
    break;
}

switch (cboGraphType.SelectedValue)
{
    case "Clustered Column":
    case "Stacked":

Here I set X-axis scale TextLabel, because I want to show Month name instead of numbers. For vertical bars, the bar base is X and for horizontal bars, the bar base is Y:

// Set the XAxis labels
myPane.XAxis.Scale.TextLabels = labels;
// Set the XAxis to Text type
myPane.XAxis.Type = AxisType.Text;
// Make the bars Vertical by setting the BarBase to "X"
myPane.BarSettings.Base = BarBase.X;
break;
case "Clustered Bar":
case "Stacked Bar":
// Set the YAxis labels
myPane.YAxis.Scale.TextLabels = labels;
// Set the YAxis to Text type
myPane.YAxis.Type = AxisType.Text;
// Make the bars horizontal by setting the BarBase to "Y"
myPane.BarSettings.Base = BarBase.Y;
break;      

Here  MajorTic.IsBetweenLabels is set to false to avoid Tic's between labels:

case "Line":
               // Set the XAxis labels
               myPane.XAxis.Scale.TextLabels = labels;
               // Set the YAxis to Text type
               myPane.XAxis.Type = AxisType.Text;
               // Draw the X tics at the labels
               myPane.XAxis.MajorTic.IsBetweenLabels = false;
               break;
       }

BarSettings.Type is used to set the type of bar. For clustered bar, it is Cluster and for stack it is Stack. AxisChange is used to handle auto scaling operation:

switch (cboGraphType.SelectedValue)
      {
          case "Clustered Column":
          case "Clustered Bar":
              // Set the bar type to stack,
         // which stacks the bars by automatically accumulating the values
              myPane.BarSettings.Type = BarType.Cluster;
              break;
          case "Stacked":
          case "Stacked Bar":
              // Set the bar type to stack,
         // which stacks the bars by automatically accumulating the values
              myPane.BarSettings.Type = BarType.Stack;
              break;
     }

      // Fill the axis background with a color gradient
      myPane.Chart.Fill = new Fill(Color.White,Color.FromArgb(255, 255, 166), 45.0F);

      masterPane.AxisChange(g);
  }

That's all about how I create these graphs. If you have any questions, please let me know. Thanks.

Points of Interest 

The thing which is appealing while working with chart is the visible appearance of the chart. You feel good while working with code. With change of your parameter diagrams do change.

History

• 6^th May, 2009: Initial post 
• 8^th June, 2011: Updated source files mentioning how to utilize a datatable to bind with zed graph