title: Scatter Graph In C# With PictureBox
body: <p>There is an input of points with size of n like below:</p>
  
  <p>S = {x1,y1,x2,y2,...,xn,yn}</p>
  
  <p>I want to display scatter graph of S sequence in a picture box. So for transforming them into picture box dimensions, I have normalized them and multiplied them by width and height of picture box with respecting picture box left and top:</p>
  
  <pre><code>waveData= wave.GetWaveData();
  normalizedData = GetSignedNormalized();
  n = normalizedData.Count;
  picW = pictureBox1.Width;
  picH = pictureBox1.Height;
  picL = pictureBox1.Left;
  picT = pictureBox1.Top;
  normalizedInPictureBox = new List&lt;float&gt;();
  
  for (int i=0;i&lt; n; i +=2)
  {
      float px = normalizedData[i];
      float py = normalizedData[i+1];
      px = px * (picW - picL);
      py = py * (picH - picT) ;                
      normalizedInPictureBox.Add(px);
      normalizedInPictureBox.Add(py);
  }
  </code></pre>
  
  <p>Normalize Method is also:</p>
  
  <pre><code>public List&lt;float&gt; GetSignedNormalized()
  {
      List&lt;float&gt; data = new List&lt;float&gt;();
      short max = waveData.Max();
      int m = waveData.Count;
      for(int i=0;i&lt; m; i++)
      {
          data.Add((float)waveData[i] / (float)max);
      }
      return data;
  }
  </code></pre>
  
  <p>Now I am thinking normalizedInPictureBox List contains vertices in the range of picture box, and here is the code for drawing them on picture box:</p>
  
  <p>In the paint method of picture box:</p>
  
  <pre><code>Graphics gr = e.Graphics;
  gr.Clear(Color.Black);
  for(int i=0;i&lt; n; i +=2)
  {
      float x = normalizedInPictureBox[i] ;
      float y = normalizedInPictureBox[i+1];
  
      gr.FillEllipse(Brushes.Green, new RectangleF(x, y, 2.25f, 2.25f));
  }
  </code></pre>
  
  <p>But the result is shown below:</p>
  
  <p><a href="https://i.stack.imgur.com/i4toh.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/i4toh.jpg" alt="enter image description here"></a></p>
  
  <p>I don't Know whats going wrong here , but I think the graph should be horizontal not diagonal ,the desire result is something like this:</p>
  
  <p><a href="https://i.stack.imgur.com/R90kn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/R90kn.png" alt="enter image description here"></a></p>
  
  <p>I know that I can transform it to center of picture box after this. but How can change my own result to the desire one?</p>
  
  <p>Thanks in advance.</p>