Increase histogram values ​​with the push of a button

Question

I am trying to create a graph that will show the progress of the workout. Every five keystrokes, you need to add a tick to the graph. This is an example of how it should look.

For demonstration purposes, I use a button click. In production, clicks will be made every twenty revolutions of the wheel.

private int counter = 0; private void button1_Click(object sender, EventArgs e) { counter++; // code will go here } 

thank you in advance

Answer 1

You can use either Bitmap Buffer or panel to draw. Here is the chapter: Just a sample . the link .

This solution is based on WinForms and Panel_Paint() . You can try adding a vertical Progress Label and a Chart Y Axis parameter value .

code:

 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms; namespace WindowsFormsApplication1 { public partial class Form1 : Form { public Form1(){ InitializeComponent(); } private int counter = 0; private int px = 10; private int py = 180; private int total5Clicks = 0; private void button1_Click(object sender, EventArgs e) { counter++; label1.Text = "Total Clicks = " + counter.ToString(); if (Math.Abs(counter % 5) == 0){ if (Math.Abs(counter / 5) > 0){ total5Clicks = total5Clicks + 1; PaintOnChartPanel(total5Clicks);} } } private void panel1_Paint(object sender, PaintEventArgs e){ } private void PaintOnChartPanel(int total5Times) { //Add a new Panel Paint EventHandler panel1.Paint += new PaintEventHandler(panel1_Paint); using (Graphics g = this.panel1.CreateGraphics()) { Brush brush = new SolidBrush(Color.Green); g.FillRectangle(brush, px, py, 20, 20); Pen pen = new Pen(new SolidBrush(Color.White)); g.DrawRectangle(pen, px, py, 20, 20); //add each total5Click into chart block g.DrawString((total5Times).ToString(), new Font("Arial", 7), new SolidBrush(Color.AntiqueWhite), px + 1, py+8, StringFormat.GenericDefault); pen.Dispose();} if (py > 20){ py = py - 20;} else{ MessageBox.Show("Reached Top of the Panel"); if (px < 200){ px = px + 20; py = 180;} else{ MessageBox.Show("Reached Right of the Panel"); } } } } } 

Output Form:

Answer 2

You can determine if you have a few out of five s

 bool drawTickMark = clicks % 5 == 0; 

% is a modular operator that returns the remainder of integer division. For instance. 13 % 5 = 3 and 13 / 5 = 2 , because 2 * 5 + 3 = 13 .

clicks % 5 will be zero for clicks = 0, 5, 10, 15, ...

Answer 3

I am not very similar to ASP.NET, but here is an algorithm that you can use to draw squares

  int perColumn = Height / squareSize; int totalColumns = (squareCount / perColumn) + 1; for (int y = 0; y <= totalColumns - 1; y++) { int itemCount = squareCount - (y * perColumn); if (itemCount > perColumn) itemCount = perColumn; for (int x = 0; x <= itemCount - 1; x++) e.Graphics.FillRectangle(RandomBrush, New Rectangle((column * SquareSize) + 3, (i * SquareSize) + 3, SquareSize - 2, SquareSize - 2)) 

 public sealed class ClickGraph : Control { private int squareCount = 1; public int SquareCount { get { return squareCount; } set { squareCount = value; Invalidate(); } } private int squareSize = 25; public int SquareSize { get { return squareSize; } set { squareSize = value; Invalidate(); } } public ClickGraph() { SetStyle(ControlStyles.ResizeRedraw, true); } protected override void OnPaint(PaintEventArgs e) { e.Graphics.Clear(BackColor); int perColumn = Height / squareSize; int totalColumns = (squareCount / perColumn) + 1; for (int y = 0; y <= totalColumns - 1; y++) { int itemCount = squareCount - (y * perColumn); if (itemCount > perColumn) itemCount = perColumn; for (int x = 0; x <= itemCount - 1; x++) e.Graphics.FillRectangle(RandomBrush, New Rectangle((column * SquareSize) + 3, (i * SquareSize) + 3, SquareSize - 2, SquareSize - 2)) } } }