Create a basic Graph Chart

All tutorials created in C# to be posted in here.
3 posts Page 1 of 1
Contributors
User avatar
XTechVB
VIP - Site Partner
VIP - Site Partner
Posts: 727
Joined: Thu May 20, 2010 10:32 am

Create a basic Graph Chart
XTechVB
In this tutorial you will learn how to create a Basic Graph Chart like the one in the picture bellow
Basic_Graph.PNG
First will start by creating a new Project and add a class named IGraph.cs

Now add this Namespaces and Inherit Control
Code: Select all
using System;
using System.Linq;
using System.Drawing;
using System.Drawing.Drawing2D;
using System.Collections.Generic;
using System.Windows.Forms;
Next we must write the Constructor, Properties and Helper Methods
Constructor
Code: Select all
        #region Constructor
        public IGraph()
        {
            this.SetStyle(ControlStyles.OptimizedDoubleBuffer, true);
            this.SetStyle(ControlStyles.UserPaint, true);
            this.SetStyle(ControlStyles.AllPaintingInWmPaint, true);
            this.SetStyle(ControlStyles.ResizeRedraw, true);
        }
        #endregion
Properties
Code: Select all
        #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(); }
        }
        #endregion
Helper Methods
Code: Select all
        #region Helper Methods
        private int ValueToY(int value)
        {
            return this.Height - (value * this.Height) / _Maximum;
        }
        #endregion
Now the Drawing begins. First we must draw the Background and then the GraphLines
Background
Code: Select all
        #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);
                    }
                }
            }
        }
        #endregion
GraphLines
Code: Select all
        #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);
            }
        }
        #endregion
And finally override the System Paint
Code: Select all
        #region Override System Paint
        protected override void OnPaint(PaintEventArgs e)
        {
            DrawBackground(e.Graphics);
            DrawGraphLines(e.Graphics);
        }
        #endregion
If you have trouble understanding the code you can download the Demo project.
CnS_HowTo_BasicGraphChart.zip
That's it we're finished.
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.
You do not have the required permissions to view the files attached to this post.
Last edited by XTechVB on Sun Dec 29, 2013 2:04 pm, edited 1 time in total.
You can find me on Facebook or on Skype mihai_92b
User avatar
Shim
VIP - Donator
VIP - Donator
Posts: 882
Joined: Wed Dec 14, 2011 5:02 am

Re: Create a basic Graph Chart
Shim
good one :) by the way i am working on a bar chart library c# , i am using panel in it :D

Image

This is how you implement the library
Code: Select all
 Shims_Bar_Chart  shim = new Shims_Bar_Chart ();
            shim.Width = 500;
            shim.Height = 200;
            shim.Location = new Point(5, 5);
            shim.ChartTitle = "Codenstuff";
            shim.Add(new ChartData("Codenstuff", "100", BarGradientColor.Blue));
            shim.Add(new ChartData("Scottie1972", "90", BarGradientColor.Green));
            shim.Add(new ChartData("Comathi", "80", BarGradientColor.Red));
            shim.Add(new ChartData("Filip", "70", BarGradientColor.Silver));
            shim.Add(new ChartData("Dummy1912", "60", BarGradientColor.Lime));
            shim.Add(new ChartData("XTechVB", "50", BarGradientColor.Purple));
            shim.Add(new ChartData("Anopem", "40", BarGradientColor.Black));

            shim.BuildGraph();
            this.Controls.Add(shim);
Find my programs on Softpedia
User avatar
smashapps
Coding Guru
Coding Guru
Posts: 961
Joined: Tue Apr 05, 2011 8:41 am

Re: Create a basic Graph Chart
smashapps
This is a nice tutorial I have been working on a similar thing where the users can enter their own values etc. and then the graph is draw.

+rep :)
My name is Tom | Visit my blog where I post new content every day! Tom's Daily Blog | MineCraft is awesome!
3 posts Page 1 of 1
Return to “C-Sharp Tutorials”