Creating Line Charts - Page 3

From the previous page, you should have a brief idea of how to design a chart and some of the issues to keep in min. Let's go over the code structure and discuss how the code works in this page.

Looking at the Code
Now that you have a brief idea of what to expect with designing a chart, let's go look at the code that takes our design overview and turns into something usable. The following is the full code used for drawing the chart:

I will not be going through every line of code like I normally do. There are two reasons for that:

1. The code itself is fairly simple. I sacrificed small-picture things for the big-picture result. In non-MBA speak, that means I only coded the important features. Features that would be nice to have but wouldn't drastically affect the chart were omitted.

2. For covering each line, the number of pages in this tutorial would be huge. Instead, future tutorials will focus in detail on bits and pieces of this code.

With that said, I will provide an overview of what the code does and then cover some of the more interesting aspects in greater detail.

Code Overview
The amount of code written may seem like a lot, but hopefully after this section you will see that it is just many lines doing simple things. Many things will make sense when you understand that all of your chart data is stored as an array of integers.

For example, this is how your data might look like in the array:

int[] points = {10, 20, 15, 30, 5, 23, 19};

So you have seven data points with the range of numbers going from a minimum of 5 and a maximum of 23. Your goal is to plot the seven numbers while normalizing the chart for minimum and maximum values of 5 and 23.

Our program takes this integer array, maximum value, and minimum value and gets it to the chart form in the DrawChart method. Inside the DrawChart method, you specify the details of the chart itself. For example, properties such as how wide/tall the chart will be, where the chart offsets (gaps) are, etc, are specified.

Once you have the constraints of our chart specified, it is time to draw our chart. Drawing a line is essentially having a starting point and an ending point, and having infinitely small dots connecting both the starting and ending points. More realistically, a chart works by drawing a line from the first value to the second value, from the second value to the third value, etc. until your last value is reached.

Beyond this, you have a lot of code that generates the various lines, text labels, etc. We aren't using any GUI-based tools to draw the interface. Everything is done in code, and that can be a bit confusing if you have never designed an interface using only code.

Now that you have a basic understanding of what our code is trying to do, let's take a look at some of the more interesting parts of the code in greater detail on the next page!

Onwards to the next page!

1 | 2 | 3 | 4 | 5 | 6