Drawing a 2D line on a canvas

Question

I have the datalist = 62, 76, 80, 72, 71, 75, 77 that i want to present as a 2D line drawed point to point. In my Wpf application i have a canvas with the height: 173 and width: 455.

How do i go about it and draw a line by my datalist and use almost the whole height of the canvas? as it is now the data is just represented on a line at the bottom at the canvas, not using (and therefor giving a bad representation of the data) whole heigh of the canvas. It would also be nice to place it in the center of the box too...

Answer 1

You'll need to transform your datalist to represent the whole height of the canvas. There are two obvious ways of doing this:

1) Divide the height of the canvas by the largest value in your datalist. Multiply all the values in the datalist by this and bind to these new datapoints.

2) Add the line as you are now and then apply a scale transform of the multiplier from option 1.

Either way you shouldn't need to centre now since the whole canvas will be used up.

---

I see on review you actually say "almost the whole height of the canvas" and the Adrian's comment below is correct in that I didn't think through the lower bounds. Here's some better pseudo-code

int border = 20; //How much of the canvas you *don't* want to use
int graphHeight = Canvas.Height - border;
int maxValue = DataList.GetMaxValue();
int minValue = DataList.GetMinValue();

double multiplier = graphHeight / (maxValue - minValue);

foreach(int value in DataList)
{
    int distanceFromBottom = value - minValue;
    double proportionalValue = distanceFromBottom * multiplier;
    double newValue = proportionalValue  + (border/2) // move it up to the middle of the canvas
}

Store the newValues in a new DataList and bind to that.