Create a basic Graph Chart
Posted: Tue Jun 04, 2013 11:37 pm
In this tutorial you will learn how to create a Basic Graph Chart like the one in the picture bellow
First will start by creating a new Project and add a class named IGraph.cs
Now add this Namespaces and Inherit Control
Constructor
Background
This code is all written by me you can use it or modify it anyway you want. Please don't share it on other websites as your own.
Now add this Namespaces and Inherit Control
Code: Select all
Next we must write the Constructor, Properties and Helper Methodsusing System;
using System.Linq;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Collections.Generic;
using System.Windows.Forms;Constructor
Code: Select all
Properties
#region Constructor
public IGraph()
{
this.SetStyle(ControlStyles.OptimizedDoubleBuffer, true);
this.SetStyle(ControlStyles.UserPaint, true);
this.SetStyle(ControlStyles.AllPaintingInWmPaint, true);
this.SetStyle(ControlStyles.ResizeRedraw, true);
}
#endregionCode: Select all
Helper Methods
#region Properties
//Layout
private int _Maximum = 100;
public int Maximum
{
get { return _Maximum; }
set { _Maximum = value; this.Invalidate(); }
}
private int _ValuesToShow = SystemInformation.VirtualScreen.Width;
public int ValuesToShow
{
get { return _ValuesToShow; }
set { _ValuesToShow = value; this.Invalidate(); }
}
public List<int> ValueLines = new List<int>();
public void AddValue(int value)
{
//Remove Invisible Values
if (ValueLines.Count > _ValuesToShow - 1)
{
ValueLines.RemoveAt(_ValuesToShow - 1);
}
//Add Visible Value
if (!(value > _Maximum))
{
ValueLines.Insert(0, value);
this.Invalidate();
}
else
{
return;
}
}
public int HighestValue()
{
return ValueLines.Max();
}
private int _GridSize = 50;
public int GridSize
{
get { return _GridSize; }
set { _GridSize = value; this.Invalidate(); }
}
//Colors
private Color _BackgroundStart = Color.FromArgb(202, 218, 238);
public Color BackgroundStart
{
get { return _BackgroundStart; }
set { _BackgroundStart = value; this.Invalidate(); }
}
private Color _BackgroundEnd = Color.FromArgb(255, 255, 255);
public Color BackgroundEnd
{
get { return _BackgroundEnd; }
set { _BackgroundEnd = value; this.Invalidate(); }
}
private Color _GridColor = Color.FromArgb(203, 203, 206);
public Color GridColor
{
get { return _GridColor; }
set { _GridColor = value; this.Invalidate(); }
}
private Color _BorderColor = Color.FromArgb(155, 159, 166);
public Color BorderColor
{
get { return _BorderColor; }
set { _BorderColor = value; this.Invalidate(); }
}
private Color _ValueColor = Color.FromArgb(65, 140, 240);
public Color ValueColor
{
get { return _ValueColor; }
set { _ValueColor = value; this.Invalidate(); }
}
private Color _IndicatorColor = Color.FromArgb(252, 180, 65);
public Color IndicatorColor
{
get { return _IndicatorColor; }
set { _IndicatorColor = value; this.Invalidate(); }
}
#endregionCode: Select all
Now the Drawing begins. First we must draw the Background and then the GraphLines #region Helper Methods
private int ValueToY(int value)
{
return this.Height - (value * this.Height) / _Maximum;
}
#endregionBackground
Code: Select all
GraphLines
#region Draw Background
private void DrawBackground(Graphics e)
{
//Get Rectangle
Rectangle _BackRect = new Rectangle(0, 0, this.Width - 1, this.Height - 1);
//Draw
if (_BackRect.Height > 5) //Draw only if Height is bigger than 5 pixels
{
using (LinearGradientBrush _BackgroundBrush = new LinearGradientBrush(_BackRect, _BackgroundStart, _BackgroundEnd, LinearGradientMode.Vertical))
using (Pen _GridPen = new Pen(_GridColor))
{
//Draw Background First
e.FillRectangle(_BackgroundBrush, _BackRect);
//Draw Grid
for (int i = 0; i <= _BackRect.Width; i += _GridSize)
{
e.DrawLine(_GridPen, i, 0, i, _BackRect.Height);
}
for (int i = 0; i <= _BackRect.Height; i += _GridSize)
{
e.DrawLine(_GridPen, 0, i, _BackRect.Width, i);
}
}
}
}
#endregionCode: Select all
And finally override the System Paint
#region Draw Graph Lines
private void DrawGraphLines(Graphics e)
{
//Get Rectangle
Rectangle _BackRect = new Rectangle(0, 0, this.Width - 1, this.Height - 1);
//Draw
using (Pen _ValueLinePen = new Pen(_ValueColor))
using (Pen _IndicatorPen = new Pen(_IndicatorColor, 2))
using (Pen _BorderPen = new Pen(_BorderColor))
using (SolidBrush _TextBrush = new SolidBrush(this.ForeColor))
{
if (_BackRect.Height > 5) //Draw only if Height is bigger than 5 pixels
{
//Draw Values
int _StartPos = _BackRect.Width - 1;
foreach (int _Val in ValueLines)
{
e.DrawLine(_ValueLinePen, _StartPos, _BackRect.Height, _StartPos, ValueToY(_Val));
_StartPos -= 1;
}
//Draw Highest Value Indicator
if (ValueLines.Count > 0)
{
e.DrawLine(_IndicatorPen, 1, ValueToY(ValueLines.Max()), _BackRect.Width, ValueToY(ValueLines.Max()));
e.DrawString("Highest Value: " + ValueLines.Max().ToString(), this.Font, _TextBrush, 1, ValueToY(ValueLines.Max()) + 1);
}
}
//Draw Border
e.DrawRectangle(_BorderPen, _BackRect);
}
}
#endregionCode: Select all
If you have trouble understanding the code you can download the Demo project.
That's it we're finished. #region Override System Paint
protected override void OnPaint(PaintEventArgs e)
{
DrawBackground(e.Graphics);
DrawGraphLines(e.Graphics);
}
#endregionThis code is all written by me you can use it or modify it anyway you want. Please don't share it on other websites as your own.
by the way i am working on a bar chart library c# , i am using panel in it 
