Breadcrumbs

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

[Shim]

good one by the way i am working on a bar chart library c# , i am using panel in it



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);

[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