Click here to Skip to main content
Click here to Skip to main content

Using ZedGraph with ASP.NET

, 8 Jun 2011
Rate this:
Please Sign up or sign in to vote.
Web based usage of ZedGraph with ASP.NET

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 PieItem. 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

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

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Wahab Hussain
Web Developer
Pakistan Pakistan
Follow my blogging activities here:-
http://www.hellowahab.wordpress.com
 
Follow my professional activities here:-
http://www.linkedin.com/in/hellowahab
 
Follow my tweets here:-
http://twitter.com/#!/hellowahab
 
Follow my personal activities here:-
https://www.facebook.com/hellowahab
Follow on   Twitter   LinkedIn

Comments and Discussions

 
QuestionHeight property Pinmemberklaydze18-Jan-12 14:42 
QuestionZedGraphImage Folder Clearing PinmemberMalcolmR24-Oct-11 4:21 
QuestionMiss some point on the graph Pinmembermona19903-Jul-11 15:21 
GeneralMy vote of 5 PinmemberMonjurul Habib8-Jun-11 8:19 
GeneralImage labels PinmemberLo0ping20-Dec-10 23:32 
GeneralThat assembly does not allow partially trusted callers. !!! Pinmemberasedfred18-Oct-10 7:12 
GeneralRe: That assembly does not allow partially trusted callers. !!! PinmemberWahab Hussain18-Oct-10 19:17 
GeneralRe: That assembly does not allow partially trusted callers. !!! Pinmemberasedfred20-Oct-10 7:37 
GeneralRe: That assembly does not allow partially trusted callers. !!! PinmemberWahab Hussain20-Oct-10 23:58 
AnswerRe: That assembly does not allow partially trusted callers. !!! PinmemberEli Hayon21-Oct-10 17:35 
GeneralRe: That assembly does not allow partially trusted callers. !!! PinmemberWahab Hussain21-Oct-10 19:05 
GeneralRe: That assembly does not allow partially trusted callers. !!! Pinmemberasedfred25-Oct-10 8:49 
GeneralRe: That assembly does not allow partially trusted callers. !!! PinmemberMalcolmR24-Oct-11 4:33 
GeneralRe: That assembly does not allow partially trusted callers. !!! PinmemberWahab Hussain24-Oct-11 19:07 
GeneralRe: That assembly does not allow partially trusted callers. !!! PinmemberMalcolmR24-Oct-11 22:39 
QuestionHow to align Y and Y2 axis to zero line PinmemberMurali8515-Aug-10 9:31 
GeneralY axis value is limited to max 1000 only. PinmemberAvichal Agarwal2-Jun-10 20:26 
GeneralRe: Y axis value is limited to max 1000 only. Pinmemberjustapgmr3-May-11 10:41 
GeneralRe: Y axis value is limited to max 1000 only. PinmemberWahab Hussain3-May-11 19:39 
GeneralDetermining all visible points PinmemberMember 440636816-May-10 17:18 
GeneralRe: Determining all visible points PinmemberWahab Hussain16-May-10 19:29 
GeneralRe: Determining all visible points PinmemberMember 440636816-May-10 19:53 
GeneralBar Font size Pinmemberkashamaleel29-Mar-10 7:59 
GeneralRe: Bar Font size PinmemberWahab Hussain30-Mar-10 6:24 
GeneralZedGraph 1st try [modified] Pinmemberpedroestrada5-Mar-10 4:48 
GeneralZedGraph realtime plotting withour postback PinmemberKhalid Riaz3-Feb-10 5:06 
GeneralRe: ZedGraph realtime plotting withour postback PinmemberWahab Hussain3-Feb-10 18:02 
Generaljust a vertical line Pinmemberzaqap4-Jan-10 11:06 
GeneralDeploying ZedGraph to Server Problem Pinmemberscjsb4-Nov-09 8:18 
GeneralRe: Deploying ZedGraph to Server Problem PinmemberWahab Hussain4-Nov-09 18:14 
GeneralGraphing data from Gridview with ZedGraph Pinmemberscjsb20-Oct-09 4:47 
GeneralRe: Graphing data from Gridview with ZedGraph PinmemberWahab Hussain20-Oct-09 17:55 
GeneralRe: Graphing data from Gridview with ZedGraph PinmemberWahab Hussain7-Jun-11 2:29 
GeneralRe: Graphing data from Gridview with ZedGraph Pinmembersmartboy7867-Jun-11 4:26 
GeneralRe: Graphing data from Gridview with ZedGraph PinmemberWahab Hussain7-Jun-11 19:06 
GeneralRe: Graphing data from Gridview with ZedGraph PinmemberWahab Hussain8-Jun-11 2:39 
GeneralRe: Graphing data from Gridview with ZedGraph Pinmembersmartboy7868-Jun-11 23:07 
GeneralRe: Graphing data from Gridview with ZedGraph PinmemberWahab Hussain8-Jun-11 23:49 
GeneralRe: Graphing data from Gridview with ZedGraph Pinmembersmartboy7869-Jun-11 3:47 
GeneralRe: Graphing data from Gridview with ZedGraph PinmemberWahab Hussain9-Jun-11 19:55 
QuestionCan anyone help me how to add label(value) to each point of the line graph Pinmemberlichin856-Sep-09 0:45 
Generalmore information on zedgraph PinmemberTim Schwallie31-Jul-09 5:08 
QuestionMay i know how to change the horizontal bar labels to vertical bar labels? Pinmemberlichin8516-Jul-09 16:50 
AnswerRe: May i know how to change the horizontal bar labels to vertical bar labels? PinmemberWahab Hussain17-Jul-09 4:26 
Questiontolltip? Pinmemberiluxaf5-Jul-09 1:28 
GeneralThank you for this introduction. :-) Pinmemberebsw22-Jun-09 5:08 
GeneralVery Nice! Pinmembergferrigno17-Jun-09 11:54 
GeneralActually there is a .NET Chart component Pinmembertystent11-May-09 17:09 
GeneralAn alternative to ZedGraph is OpenFlashCharts PinmemberHightechRider6-May-09 6:15 
GeneralRe: An alternative to ZedGraph is OpenFlashCharts PinmemberWahab Hussain6-May-09 7:03 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web01 | 2.8.140827.1 | Last Updated 8 Jun 2011
Article Copyright 2009 by Wahab Hussain
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid