Well truth be told, we won't really be making histograms with this recipe but mostly bar charts in the style of histograms. Histograms are very rigid in their nature and follow really specific mathematical functions to represent frequency and density. You can read more on histograms on Wikipedia: http://en.wikipedia.org/wiki/Histogram. What we are going to do here is build a histogram styled bar chart (no space between the bars) that uses a function as input. You can think of this as a different way to do an area chart or a line chart.
The data for this recipe is a bit different as it uses a mathematical function instead of a data set. You can get a mathematical function using interpolation or by having a program such as Microsoft Excel do it for you.
The following are the steps required to build a histogram using ActionScript 3:
- Now if you look at our
Main.asclass, you will notice that it is quite small compared to the previous recipe. For this recipe, we don't need to create data; we will use a function to get our data. The function used in this case is the one as follows:public function dataFormula(xValue:Number):Number { return (xValue * xValue * xValue); } - Once we have this function we can create the chart:
var chart:Histogram = new Histogram(dataFormula, 400, 410, 25);
- Next, in the
Bar.asfile we will add a style to the line because the bars will be really close in this chart and this will help differentiate them. - Finally, the
Histogram.asfile is different thanBarChart.asand takes a function as a parameter in the constructor. From that function, we will determine the maximum value and we will create the bars.var maximumValue:Number = data(0); for (i = 1; i < numberOfBars; i++) { if (data(i) > maximumValue) { maximumValue = data(i); } } var scaleHeight:Number = (chartHeight - 10) / maximumValue; var listOfMarks:Vector.<Number> = new Vector.<Number>(); var listOfLabels:Vector.<String> = new Vector.<String>(); var bar:Bar; for (i = 0; i < numberOfBars; i++) { bar = new Bar(_barWidth, data(i) * scaleHeight); bar.x = 10 + _barWidth / 2 + i * (_barWidth); listOfMarks.push(bar.x - 10); listOfLabels.push(String(i)); bar.y = chartHeight - 10; addChild(bar); }
Contrary to the other recipe, this one won't use a list of numbers as data but a function in the code called dataFunction. This example will use the function y = x3. The value on the vertical axis is equal to the value on the horizontal axis multiplied by itself two times (to the power of three). But you could use any function that takes a number and returns one.
Since we want the graph to be in the style of a true histogram, we don't need to compute any space between the bars. To get the width of the bars, we take the width of the graph divided by the number of bars plus one. We add one to the number of bars so that the last bar doesn't come too close to the end of the graph on the right-hand side.
We are now ready to use our
function to get our data. Since we know it takes a number and returns a number, by giving it our value of the horizontal axis it will return the value of the vertical axis. The only code we have to write to do so is data (horizontalAxisValue). In our case that value is the index of our loop. Note that we could have modified the HorizontalAxis class to be like the VerticalAxis class, but it still worked (the labels weren't too big) so we left it as it is.
Accepting a wider data range would improve the Histogram class, but also, you could use it in a different way by making it draw a lot of bars.
Here again the data range is very important. It would be good to modify the code for this recipe so that it could accept a minimum value and a step value. In this example, our minimum was 0 and our step value was 1. But that may not fit for every function or data.
One interesting thing to note here is that if you set the number of bars to be very high, you will end up creating an area chart since the bars will be really thin. If you want to use this chart in this way, I would suggest modifying the HorizontalAxis class because we used it as it is from the BarChart recipe and it would create way too many labels.