I have uploaded a website that I completed for coursework for a web development module. The website mimics a stocks portfolio of a user with an underlying database, and various pages to view, add, and query the stocks currently in the portfolio.

The main page offers a simple view of all the stocks currently in the portfolio. The values used do not currently update from any official source (as realtime stock pricing solutions can get extremely expensive). This page does a simple query of the underlying portfolio database, which holds the physical data about each stock, and displays them in a user friendly manner. The rows of the table are highlighted green or red depending on the price change of the stock (again this is not realtime, but was set explicitly when the stock was added). Here is a screenshot of my portfolio main page:

As you can see the main page displays all the relevant data about each stock in the portfolio, including the sector, price, yearly range, and the market capitalisation. The name of the stock on each row is also a link to the relevant page on Yahoo! Finance where a user can find even more detail about that particular stock.

The main page of the system displays all of the stocks currently in the portfolio, however does not give any kind of logical order (they are in fact always in the order that they were added). It would therefore be helpful to have some way of viewing the best and worst performing stocks in the current portfolio.This is the job of the top and worst stocks pages. Visually they are very similar to the main page of the system, however their queries to the database are modified to only include the best/worst stocks correspondingly, along with providing a more logical ordering.

The top stocks page, which only displays the stocks in the portfolio whose price change is positive (i.e they are making money). As such they are all coloured green. The list if also ordered depending on how large the price change is. The stocks with the highest positive price change appear at the top of the table, and the lowest towards the bottom. Here is a screenshot from my portfolio:

In comparison the worst stocks page only displays the stocks in the portfolio whose price change is negative (i.e they are losing money). As such they are all coloured red. The list if also ordered depending on how large the negative price change is. The stocks with the highest negative price change appear at the top of the table, and the lowest towards the bottom. Here is a screenshot from my portfolio:

The site also features a login system which allows users to add a new stock to the current portfolio. This is perhaps the best part of the system and includes some cool features to aid users.

You have to be logged in to the system to be able to add a new stock to the portfolio. This is a very helpful feature for future versions where multiple portfolios could co-exist, however at this moment the fact that users have to login to add new stocks to the portfolio simply prevents the unwanted hassle from a load of bots endlessly submitting the page and adding new rows to the underlying database (which would in itself ruin the rest of the site). Here is a screenshot of the login page which is what the redirect brings you to:

The login page is quite simple - just a username and password field. The system currently only has one registered user with a username of ‘admin’ and a password of ‘pass’. Entering in this two values and then pressing the ‘Submit’ button should successfully log you in to the system. The page now includes one link that takes you back to the main portfolio page.

The add new stocks page can be accessed from the link at the top of the main portfolio page. Now when following this link, you shouldn’t be redirected to the login page as you have already successfully logged in. Instead the ‘Add a new Stock to the Portfolio’ should load.

This page allows the user to enter information about a new stock they wish to add to the current portfolio. In doing so the stock will appear in the main page along with either the top or worst stocks pages where relevant.

The site uses a few Javascript functions to improve the overall usability. Such an example is a script that makes sure that all the compulsory fields are filled in with numeric data (where necessary), along with a script that automatically calculates the price change given a current price and yearly low/high. The formula used not exact by anyway means. It just calculates the difference between the current price and the yearly average:

change = price - ((yearlow + yearhigh) / 2)

The change is re-calculated every time any relevant field is updated to improve responsiveness.

However the best feature of this page is how the fields can be all automatically filled given a stock ticker from the user. For example starting with a blank form, type YHOO into the ticker field, and click on the ‘Find information from ticker’ button. A piece of Javascript then takes this ticker and downloads all the relevant information from Yahoo! Finance. This includes the current financial data and company information. When done, all the fields will now be filled out with the correct information:

When all of the fields are filled in, the ‘Submit’ button can be pressed to add the new stock to the underlying portfolio database table. Doing so will then make the new stock appear in all other pages.

As a follow up to my previous post on adding a new custom inline code shortcode to the WordPress editor, I figured it what also prove helpful to add a custom button to the text editor itself to surround the current text selection inside the inline code shortcode tags.

Again, in WordPress this is pretty easy to do and can be accomplished in a couple lines of code. I found on my searches that there were many tutorials online about adding custom buttons to the WordPress Visual editor, however not so many about custom buttons in the Text editor - which is what I use most of the time when making posts. I did however find a short article which includes a quick and simple answer. The following code is taken from this post.

To add a new button to the text editor, simply open up functions.php, which should be located in your theme folder, and add in the following code (this example adds the inline code tags, but can easily be modified to insert any HTML or shortcode tags that you like). These button in the text editor are known as Quicktag buttons. In the code below replace the your_shortcode text with your custom shortcode.

  
add_action('admin_print_footer_scripts','add_button');

function add_button() {
?>  
  
<?php
}

The parameters to the addButton method are:

• Button HTML ID (required)
• Button display, value=”” attribute (required)
• Opening Tag (required)
• Closing Tag (required)
• Access key, accesskey=”” attribute for the button (optional)
• Title, title=”” attribute (optional)
• Priority/position on bar, 1-9 = first, 11-19 = second, 21-29 = third, etc. (optional)

The new button should then show up in the WordPress text editor. Clicking on it will add your chosen tags to the editor.

Source

When posting recently it’s become quite annoying that there is no default way of presenting inline code in posts. I’ve resorted to making the text italic, which does provide a small amount of differentiation, yet does not offer the quality provided in most programming forums where the text inside inline code is in a monospaced font and sometimes has a border.

Luckily though customising WordPress is very easy, and it requires a very small amount of code to achieve the desired effect for inline code.

First of all a custom CSS class needed to be added to the styles.css file of the WordPress theme. This is the class I used:

  
.inlinecode {  
    padding: 2px;  
    background: #FFF;  
    border: 1px dotted #000;  
    color: #000;  
    font-family: monospace!important;  
}  

Which simply forces the text into a black monospace font and adds a small border around the outside. The only thing to do now is hook up WordPress to use this new style. WordPress uses shortcodes to accomplish this. Essentially you provide a code inside square brackets and then put the content in between an ending brace.

For example migrated over to Jekyll

For my site I use the il shortcode. We then need to tell WordPress what to do when it sees this new shortcode. In this case all that needs to happen is a span tag with the new CSS style is added to encapsulate the inline code. This is done through a simple PHP function:

  
function inlinecode( $atts, $content = null ) {  
    return '<span class="inlinecode">'.$content.'</span>';
}  

Finally one more line is needed to hook this new function into wordpress with the chosen shortcode:

  
add_shortcode("il", "inlinecode");  

And that’s it. This is one of the benefits of using WordPress - it’s so easy to customise and there are a load of guides and tutorials online to help you do it. Here is the resulting inline code (although it has been used throughout this post already):

Some example inline code (in Jekyll)

I will also hopefully be gradually adding the use of this new inline code into previous posts in order to improve the overall presentation and readability.

Part 2 - Linear Regression Model

Welcome to part 2 of this tutorial series where we will be creating a Regression Analysis library in Java. In the last tutorial we covered a lot of theory about the foundations and applications of regression analysis. We finished off by coding up the RegressionModel abstract class, which will become the base of all our models in this library.

Prerequisites -

Make sure you have read and understand Part 1 of this tutorial series where I explained a lot of theory about regression analysis and regression models. I won’t be repeating much of the content so it’s a good idea to have a good understanding of it all before you read on with this tutorial.

Regression Library - Regression Models

In this tutorial we will be covering and implementing our first regression model - the simple linear regression model.

The Linear Regression Model

To start off with lets consider the first the Wikipedia article definition for the Simple Linear Regression Model:

Simple linear regression is the least squares estimator of a linear regression model with a single explanatory variable. In other words, simple linear regression fits a straight line through the set of n points in such a way that makes the sum of squared residuals of the model (that is, vertical distances between the points of the data set and the fitted line) as small as possible.

This is perhaps one of the easier to understand definitions. So in this model we have a single explanatory variable (X in our case) and we want to match a straight line through our points that that somehow ‘best fits’ all the points. in our data set.

This model uses a least squares estimator to find the straight line that best fits our data. So what does this mean? The least squares approach aims to find a line that makes the sum of the residuals as small as possible. So what are these residuals? The residuals are the vertical distances between our data points and our fitted line. If the best fit line passes through each of our data points, the sum of the residuals would be zero - meaning that we would find an exact fit for our data.

Consider this numerical example:

We have the data:

X         Y
2         21.05
3         23.51
4         24.23
5         27.71
6         30.86
8         45.85
10        52.12
11        55.98

We want to find a straight line that makes the sum of the residuals as small as possible. As it turns out the least squares estimator for this data set produces the straight line:

y = 4.1939x + 9.4763

as the line of best fit - that is, there exists no other straight line for which the sum of the residuals (the sum of the differences between the actual data and the modelled line) is smaller.

This makes a lot of sense as a line of best fit. There essentially exists no other straight line that could better follow our data set as that would mean the sum of the residuals would have to be smaller. So remember:

Residuals = the differences in the Y axis between the points of data in our data set and the fitted line from our model.

So in the linear regression model we want to use a least squares estimator that somehow finds a straight line that minimises the sum of the resulting residuals. The obvious question now is how can we find this straight line?

The Math

So we want to find a straight line that best fits our data set. To find this line we have to somehow find the best values of our unknown parameters so that the resulting straight line becomes our best fit. Our basic equation for a straight line is:

We want to find the values of a and ß that produce the final straight line that is the best fit for our data. So how do we find these variables?

Handily there is a nice formula for it (for those of us who don’t want to derive it):

Ok perhaps that formula isn’t that nice after all then at first glance. The good thing is it really isn’t all that bad when you get to know the symbols:

• x with a line over the top is called xbar = the mean of the X values in our data set
• y with a line over the top is called xbar = the mean of the Y values in our data set

The sigma (the symbol that looks like a capital E) is the sumnation operator. The good news for us programmers is that this symbol can be nicely converted into something we can all understand - the for loop - as we will see in a minute!

Now we could go off now and start trying to code up a solution to find ß, but it would be a lot easier if we could somehow modularise the formula a little more to make it easier to understand. Again handily the formula does that for us. Near the bottom is the formula we actually want:

Cov[x, y]
——————
Var[x]

Which stands for the covariance of x and y divided by the variance of x. Now we only have to find out those two calculations, divide them, and we have our result for ß.

We are only really worried about ß as finding a is easy once we have a value for ß. It’s just the mean of the y values minus the found value of ß multipled by the mean of the x values. Great!

Here is a small snippet to calculate the harmonic mean of a data set.

The harmonic mean is defined as:

public static double harmonicMean(double[] data)  
{  
	double sum = 0.0;

	for (int i = 0; i < data.length; i++) { 
		sum += 1.0 / data[i]; 
	} 
	return data.length / sum; 
}