Take the 2-minute tour ×

In this answer to my recent question, there is some code that draws a graph, but I can't manage to edit it into something that accepts any list of points as a parameter.

I'd like the Drawing method to accept these parameters:

  • List of Vector2, Point or VertexPositionColor, I can work with whichever.
  • Offset for the whole graph

These optional requirements would be appreciated:

  • Color that may override VertexPositionColor's color and apply to all points.
  • Size of the graph, so it can be shrunk or expanded, either as Vector2 as multiplier, or Point as target size. Maybe even combine this with offset in Rectangle.

And if it's possible, I'd like to have it all in a class, so graphs can be used separately from each other, each with its own Effect.world matrix, etc.

Here is that code (by Niko Drašković):

Matrix worldMatrix;
Matrix viewMatrix;
Matrix projectionMatrix;
BasicEffect basicEffect;

VertexPositionColor[] pointList;
short[] lineListIndices;

protected override void Initialize()
    int n = 300;
    //GeneratePoints generates a random graph, implementation irrelevant
    pointList = new VertexPositionColor[n];
        pointList[i] = new VertexPositionColor() { Position = new Vector3(i, (float)(Math.Sin((i / 15.0)) * height / 2.0 + height / 2.0 + minY), 0), Color = Color.Blue };

    //links the points into a list
    lineListIndices = new short[(n * 2) - 2];
        lineListIndices[i * 2] = (short)(i);
        lineListIndices[(i * 2) + 1] = (short)(i + 1);

    worldMatrix = Matrix.Identity;
    viewMatrix = Matrix.CreateLookAt(new Vector3(0.0f, 0.0f, 1.0f), Vector3.Zero, Vector3.Up);
    projectionMatrix = Matrix.CreateOrthographicOffCenter(0, (float)GraphicsDevice.Viewport.Width, (float)GraphicsDevice.Viewport.Height, 0, 1.0f, 1000.0f);

    basicEffect = new BasicEffect(graphics.GraphicsDevice);
    basicEffect.World = worldMatrix;
    basicEffect.View = viewMatrix;
    basicEffect.Projection = projectionMatrix;

    basicEffect.VertexColorEnabled = true; //important for color


And the drawing method:

foreach (EffectPass pass in basicEffect.CurrentTechnique.Passes)
        pointList.Length - 1
share|improve this question
I'm measuring the time taken to draw one frame, and those can get quite big, and there is no limit to it theoretically. I think I'll have to do resizing on my own later. –  user1306322 Dec 21 '12 at 12:26
I was going to write a rather lengthy dynamic scaling explanation in my comment, but I dumped that thought, since scaling isn't the main problem here. I'm still after a way to draw different graphs independently from one another. –  user1306322 Dec 21 '12 at 13:26
You should definitely post that as an answer. –  user1306322 Dec 21 '12 at 14:31

1 Answer 1

The Graph class that does the requested can be found here.
About 200 lines of code seemed too much to paste here.

enter image description here

The Graph is drawn by passing a list of floats (optionally with colors) to its Draw(..) method.

Graph properties are:

  • Vector2 Position - the bottom left corner of the graph
  • Point Size - the width (.X) and height (.Y) of the graph. Horizontally, values will be distributed to exactly fit the width. Vertically, all values will be scaled with Size.Y / MaxValue.
  • float MaxValue - the value which will be at the top of the graph. All off the chart values (greater than MaxValue) will be set to this value.
  • GraphType Type - with possible values GraphType.Line and GraphType.Fill, determines if the graph will be drawn line only, or bottom filled.

The graph is drawn with a line list / triangle strip.

share|improve this answer
I can't make it work how I want. I have a list<vector2> which holds a parabolic trajectory of a projectile (about 150 points, most of which are on the screen), and it should stay "fixed" to the throw position (vector2), but it draws god knows where instead, despite VertexPositionColors in pointList looking fine. –  user1306322 Dec 23 '12 at 2:17
Fixed to the throw position means that the offset is Vector.Zero when the graph is first calculated and saved to List<Vector2> to draw, and then the game will change the offset, and the graph should move to stay "fixed" from the perspective of the picture on the screen (game level). –  user1306322 Dec 23 '12 at 3:53
I really just want to draw points at specified coordinates on screen with a given offset and I'd like it to be straightforward, without flipping the whole graph or limiting its range. I can do interpolation/fitting stuff myself, it's not even the priority. –  user1306322 Dec 23 '12 at 6:12
@user1306322 Do you mean that you don't need a graph, but just a way to draw a list of points as a curve? I was under the impression that this was intended to draw debug information and such. For drawing curves you need a much simpler thing... Just take the code from DrawLineList method (Graph class), pass it the BasicEfect from the constructor, and a VertexPositionColor[] you want to draw. When you create individual vertices, just add a Vector2 offset to them. –  Niko Drašković Dec 23 '12 at 12:15
Actually I thought it would be easy to manipulate that class to use it both for debug (milliseconds spent to draw last frame) and drawing curves, trajectories, paths and such. But it turned to be a hell of a job because of those flips and unusual offsets, so I couldn't handle it. When I made my first graph version that just draws a stretched 1px white texture, it started drawing at bottom right origin point to the left (300 lines) and upwards (n px high). I'd like to have something similar to that. –  user1306322 Dec 23 '12 at 13:59

Your Answer


