Creating Line Charts - Page 4

In the previous page I provided a brief code overview. In this page, let's take a detailed look at the more interesting parts of the code that you may find useful.

Setting the Image Properties
The output of our code will be an image, and there are four lines that describe the image setup:

bmp = new Bitmap(400, 300);

gfx = Graphics.FromImage(bmp);

gfx.Clear(Color.White);

gfx.SmoothingMode = SmoothingMode.AntiAlias;

An image in computer-terms can be considered a bitmap where each pixel contains some color value. In the first line, I set the bitmap's dimensions to be 400 pixels wide and 300 pixels tall. I apply the bitmap by using the Graphics method to create an image out of our initial bmp definition.

bmp = new Bitmap(400, 300);

gfx = Graphics.FromImage(bmp);

gfx.Clear(Color.White);

gfx.SmoothingMode = SmoothingMode.AntiAlias;

Now that we assigned our bitmap to our Graphics gfx variable, we won't directly be dealing with our Bitmap object for a while. With the gfx.Clear line, I am essentially clearing the background and setting a default White color.

When you draw shapes and lines, by default they are quite jagged. In order to have them look smoother - antialiased - you will need to set your graphic object's SmoothingMode property to SmoothingMode.AntiAlias.

The following is an image of our chart without the SmoothingMode set to AntiAlias:

Notice the the corners and edges of the lines have a very jagged feel to them.

Getting the Maximum and Minimum Values
The data points plotted are originally stored in an array. In the code, you will see that a generateRandomValues() method returns an array containing what the method name promises, random values.

There are many ways to determine the maximum values. One, less efficient way, is the method I explained for Flash in the following tutorial. In this code, I take a more efficient approach:

int[] p = generateRandomValues();

 

int[] k = new int[p.Length];

 

Array.Copy(p, k, p.Length);

Array.Sort(k);

 

DrawChart(p, k[k.Length - 1], k[0]);

In this code, what I am doing is storing the array of numbers in the p variable. I then make a copy of the p variable and store it into array k. I will explain why I do that in a few lines.

The Array.sort() method takes an array as its argument and sorts numbers inside it from largest to smallest. Therefore, the array's numbers would be ordered in smallest to largest like:

k = [smallest,...,largest];

So by simply taking the first value, I get the smallest value in the array. By taking the last value, I get the largest value in the array. Because the Array.sort() method modifies the contents of the array itself, I cannot plot array k. If I were to plot array k, my chart would plot the sorted array instead of the original, random array.

To display my original array, I create a copy of my array prior to actually sorting the array's numbers. That way, I independently have both the max and min values while still having a copy of my original array with which to plot the various numbers.

On the next page, there are some more interesting features that you might find helpful when designing your own chart.

Onwards to the next page!

1 | 2 | 3 | 4 | 5 | 6