Unfortunately the speed at which these features have been added has ended the step-by-step nature of this series. I will continue to provide progress updates and hope to produce a number of articles based on architecture or challenges that arise during development. Though there is not much discussion, you can still follow along with the commit log of the project. Each commit is relatively small and, in most cases, addresses a single concern. There is also some information provided in the issue tracker, which I have been making heavy use of and almost every commit has an associated issue.

The project is not yet ready for release, however there is a preview version available. Criticisms, comments, bug reports and feature requests are more than welcome. You can leave comments below or file a bug report or feature request on the issue tracker.

Try the demo

Features:

• 5 chart types (candlestick, bar, ohlc, hlc, line)
• 15, 30, 60 and 90 day charts
• Change chart colors
• Advance time by day, week or month (animated)
• Buy/sell stocks
• Portfolio view
• Sell directly from portfolio view
• Market, limit and stop orders
• Pending order pane
• Cancel pending orders
• Change theme of site
• Previously viewed stock data is cached for fast switching
• Most features auto-hide when not necessary to reduce clutter
• Account balance and total portfolio value show gains/losses

getElementById sometimes returns elements by name in some versions of IE and Opera.

                                // HANDLE: $("#id")
                                } else {
                                        elem = document.getElementById( match[2] );

                                        // Check parentNode to catch when Blackberry 4.6 returns
                                        // nodes that are no longer in the document #6963
                                        if ( elem && elem.parentNode ) {
                                                // Handle the case where IE and Opera return items
                                                // by name instead of ID
                                                if ( elem.id !== match[2] ) {
                                                        return rootjQuery.find( selector );
                                                }

                                                // Otherwise, we inject the element directly into the jQuery object
                                                this.length = 1;
                                                this[0] = elem;
                                        }

                                        this.context = document;
                                        this.selector = selector;
                                        return this;
                                }

Even something as simple as getElementById can have edge cases you have to take into account. In IE 6 and 7 for Windows and some versions of Opera, dom elements can be returned by name instead of id. In addition, as seen in the comments of the code above, Blackberry 4.6 can return nodes that are not even in the document.

See references here and here.

A false positive on the domready event can cause rapid page refreshing.

        // Handle when the DOM is ready
        ready: function( wait ) {
                // Either a released hold or an DOMready/load event and not yet ready
                if ( (wait === true && !--jQuery.readyWait) || (wait !== true && !jQuery.isReady) ) {
                        // Make sure body exists, at least, in case IE gets a little overzealous (ticket #5443).
                        if ( !document.body ) {
                                return setTimeout( jQuery.ready, 1 );
                        }

The domready event, which is present in some form or another in many browsers can fire before the dom is actually loaded. This can cause continuous page reloads and other errors which are hard to reproduce and debug. The solution to this is to check that the document.body is not null before accepting the domready event.

Of course you can always fall back to the window.onload event, however this will force you to wait until the entire content of the page (including possibly large images) has loaded.

See references here and here.

function Shape(x, y) {
    var self = {};

    self.x = x;
    self.y = y;

    self.toString = function() {
        return 'Shape at ' + self.x + ', ' + self.y;
    };

    return self;
}

function Circle(x, y, r) {
  var self = Shape(x, y);

  self.r = r;

  var _baseToString = self.toString;
  self.toString = function() {
    return 'Circular ' + _baseToString(self) + ' with radius ' + r;
  };

  return self;
};

var mycircle = Circle(2, 3, 5);
console.log(mycircle.x === 2);
console.log(mycircle.y === 3);
console.log(mycircle.r === 5);
console.log(mycircle.toString());

With this pattern you have to use the ‘self’ variable (which you can name anything you wish, the original was named ‘that’) to access and modify attributes of the class just like in Python. Unlike Python you must explicitly declare the self variable at the beginning of the class and return it at the end. Also if you are going to override an attribute in the parent class, but still need to access the parent attribute, you must rename it before overriding it, otherwise the reference to self.toString will end up in an infinite recursive loop.

When I ran my blog through the validator at w3c I noticed two problems. The first was with the Page Links To plugin using target=”_blank”. This was simple enough to fix, just uncheck the “Open this link in a new window” box. It’s probably better to let your visitors choose where they want their links to open, after all they can always middle click to open in a new tab.

The second problem was with SyntaxHighlighter Evolved’s use of <meta id=”syntaxhighlighteranchor” …> in the head tag. This is not valid html and was a bit harder to fix. I came across this post explaining the problem and rational behind the design while Googling for a solution. It seems that the id tag was used to provide a method for users to customize the plugin without editing the source files. Since I quite enjoy digging into the source files, this wasn’t a show stopper for me. In the end my solution was simple. Remove the feature and get on with my life.

The first thing to do is to locate this line…

		echo '<meta id="syntaxhighlighteranchor" name="syntaxhighlighter-version" content="' . esc_attr( $this->pluginver ) . '" />' . "\n";

and remove the id=”syntaxhighlighteranchor” tag.

The plugin uses document.getElementById(“syntaxhighlighteranchor”) twice so you have to make two changes. Instead of using the .insertBefore method to inject the css into the head element, use the .appendChild method.

		document.getElementsByTagName("head")[0].insertBefore( corecss, document.getElementById("syntaxhighlighteranchor") );
// becomes
		document.getElementsByTagName("head")[0].appendChild( corecss );

and

		document.getElementsByTagName("head")[0].insertBefore( themecss, document.getElementById("syntaxhighlighteranchor") );
// becomes
		document.getElementsByTagName("head")[0].appendChild( themecss );

You might want to put a comment in the sourcecode describing your change so you know what you did in the future in case it breaks. If you really think you’re going to forget, you can always write a blog post about it too.

Again I can’t say enough good things about SyntaxHighlighter Evolved. If you have an idea for a fix for this that preserves the original feature of being able to customize the plugin through css without delving into the sourcecode, please leave it in the comments.

Now that we have the data to draw and know how to move things on the canvas, we need to focus on making the chart look more like a normal chart. This post will focus on the drawing algorithms that will turn our data into a nice display and redrawing that same chart at different time periods/scales. Here’s the screenshot representing our progress from last time.

The first step is to find out the lowest value that will have to be drawn on the chart. We can align all the rest of the values with the bottom of the chart if we subtract the lowest value from each value on the chart. To do this we first have to traverse the sequence of data that will be shown and look for the lowest value.

var width = 600, height = 500
var chart = document.getElementById("chart");
var c = chart.getContext("2d");
chart.width = width; chart.height = height

//___________________________________________________________________________//
// Query and Init Procedures
//___________________________________________________________________________//

function getUrl(symbol) {
  return "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20csv%20where%20url%3D'http%3A%2F%2Fichart.finance.yahoo.com%2Ftable.csv%3Fs%3D" + symbol + "%26d%3D2%26e%3D27%26f%3D2011%26g%3Dd%26a%3D0%26b%3D1%26c%3D2000%26ignore%3D.csv'&format=json&callback=?";
}

$.getJSON(getUrl("ibm"), init);

function init(result) {
  var data = result.query.results.row;
  drawRects(data, 1);
}

//___________________________________________________________________________//
// Chart Drawing Procedures
//___________________________________________________________________________//

function drawRects(d, s) {
  var e = s + 30;
  var low = d[s].col3;

  for (var i = s; i < e; i++) {
    if (d[i].col3 < low) { low = d[i].col3 }
  }

  for (var i = s; i < e; i++) {
    c.fillRect(i*30, height-(d[i].col1-low), 20, d[i].col1 - d[i].col4);
  }
}

The next thing to do is scale up the bar heights to match the height of the chart. For this we also have to determine the highest high. Then we take the difference between the highest high and the lowest low and divide the chart height by that number, this gives us our multiple. Then we take the multiple and use it to compute the lower starting position as well as the height of each bar.

Before we were using the open data, however this won’t always give the lowest price. On any day the stock price fell, the open will represent the highest price. We don’t have to compute if the open is lower or higher than the close because our data gives us the low and high prices for the day. This is also beneficial as the low or high from the day could be significantly lower/higher than the open or close.

Also we’ve been drawing our chart backward, to flip it we need to subtract the offset from the width of the chart. In addition we should put in some color to tell what days are up or down. Since code is probably the best description of this formula I’ll stop trying to explain it and just show you the algorithm. I’m sure there is a cleaner/simpler solution (or maybe this solution is even too simple) however this can be updated a bit later down the road.

var width = 600, height = 500
var chart = document.getElementById("chart");
var c = chart.getContext("2d");
chart.width = width; chart.height = height

//chart.onclick = moveRects;

//___________________________________________________________________________//
// Query and Init Procedures
//___________________________________________________________________________//

function getUrl(symbol) {
  return "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20csv%20where%20url%3D'http%3A%2F%2Fichart.finance.yahoo.com%2Ftable.csv%3Fs%3D" + symbol + "%26d%3D2%26e%4D04%26f%3D2011%26g%3Dd%26a%3D0%26b%3D1%26c%3D2000%26ignore%3D.csv'&format=json&callback=?";
}

$.getJSON(getUrl("ibm"), init);

function init(result) {
  var data = result.query.results.row;
  console.log(data[1].col0);
  drawRects(data, 1);
}

//___________________________________________________________________________//
// Chart Drawing Procedures
//___________________________________________________________________________//

function drawRects(d, s) {
  var e = s + 15;
  var low = d[s].col3;
  var high = d[s].col2;

  for (var i = s; i < e; i++) {
    if (d[i].col3 < low) { low = d[i].col3 }
    if (d[i].col2 > high) { high = d[i].col2 }
  }

  var mul = height / (high - low);

  for (var i = e; i > s; i--) {
    if (d[i].col1 < d[i].col4) { c.fillStyle = "#00f"; }
    else { c.fillStyle = "#f00"; }
    c.fillRect(width - (i*30),
               height - (mul * (d[i].col1-low)),
               20,
               (mul * (d[i].col1 - d[i].col4)));
  }
}

And here’s the Yahoo Finance chart as comparison…

Finally here’s a snapshot of pyTrade, the father of JamochaTrade. Something similar to this is the ultimate goal of JamochaTrade.

As you can see our chart now looks a lot more like a stock chart! However, we still have a long way to go. Wicks, labeled axes, hover tags and much more need to be added, not to mention different styles of charts (line, mountain, dot, etc.). There are also a few bugs with our current implementation that need to be worked out.

The next article will concentrate on refactoring and debugging. Notably we’ll move our code into a namespace, as was discussed in the previous article. We’ll also rip out the drawing logic and put it into a function so we can make a more general drawing procedure that can handle different types of bar charts (Candlestick, OHLC, HLC).

GOTO Part 7 | Good news and bad news

Get JamochaTrade on GitHub

Here’s a snippet from the Zen of Python that I think should be included in some theoretical incantation of the Zen of Javascript:

Namespaces are one honking great idea — let’s do more of those!

Namespaces are an important concept in any programming language. Programming without them is inevitably an exercise in tracking down hard-to-find bugs that occur when a definition is clobbered by an unrelated assignment.

Here’s the problem: There is a single global namespace for all the scripts running in a page!

This means that defining: a = 42 in the file display.js will clobber the: a = 7 definition in database.js! Let me restate that. When you are creating global variables in a Javascript file, you must know about ALL the global variables created in ALL the other script files.

This may be possible for small apps that you write by yourself. However for large apps and/or when multiple programmers are working on the same project, this is a nightmare. Luckily there is a solution and it’s called the namespace pattern.

The namespace pattern is very similar to, but not quite the same as, the module pattern. The module pattern is designed to allow private/public attributes of an object, which has benefits and drawbacks that are outside the scope of this article.

Links that describe these patterns can be found at the bottom of this page. It is not within the scope of this series to describe all the aspects of the module pattern. I will, however, give a short overview of the two approaches that I think are worthy of consideration. The first is the module pattern and the second doesn’t have a name that I have found, so I’ll call it the Prototype Pattern.

Module Pattern

var MODULE = (function () {
  // all code here
  return {
    // return everything you want to be public
  }
}());

Prototype Pattern

var MODULE = {};
MODULE.variable = 42;
MODULE.fn = function (x) {return x*x};

With the module pattern you must declare everything you want to be public. With the prototype approach you must prefix every attribute creation/access with the namespace. I have read some articles that suggest that prototypes are more efficient than constructor functions. I simply don’t know enough about Javascript at the moment to make that claim. Please research this yourself if it is important to you, don’t take my word for it.

You may come across some “Module Pattern Considered Harmful” type articles when researching. To save you some time here’s the argument: the module pattern is not a solution for every conceivable problem, therefore it should be avoided. Some of these articles do raise valid use cases where the module pattern is not applicable, if you’re interested in that they are a good read. Just don’t drink the kool-aid and believe that they are always useless/harmful.

Most of the issues with the module pattern revolve around private attributes. I have spent most of my time programming in Python and Scheme and, in the general case, I haven’t had a need for private attributes. However the real benefit of the module pattern (IMHO) is not private attributes, but avoiding the global namespace problem. A problem for which the module pattern is an adequate solution.

GOTO Part 6 – Drawing JSONP Data on the Canvas

Get JamochaTrade on GitHub

Links

JavaScript: The Good Parts
A Google Tech Talk given by Doug Crockford. This talk is a great overview of the good and the bad of Javascript for experienced programmers.

Javascript Programming Patterns
A good article that covers a number of methods of tackling the namespace problem.

JavaScript Module Pattern: In-Depth
More information about the module pattern.

Figuring out how to accomplish this took me longer than I care to admit. I began researching the same origin policy around 14:00 today and after about 30 minutes I knew I needed to find a service that offered stock quotes in JSONP format, which allows cross-domain access. I spent another 2 hours looking for a source of historical stock data in JSONP format before stumbling upon this post by IBM developerWorks. That led me to the Yahoo Query Language (YQL) which is a SQL-like language for retrieving tons of different datasets in XML or JSONP format. I proceeded to fool around with that for another 2 hours or so before figuring out how to access Yahoo historical stock data through YQL.

After 4 1/2 hours of looking for a new data source that was consumable by Javascript, I was not really in the mood to figure out the intricacies of portable XMLHttpRequest (which is bound to be a post, if not series, in itself). So, at least for the moment, I cheated and included the jQuery library from Google for the sole purpose of retrieving the JSONP data. Overkill? Yes, most definitely. For the moment though, it will have to do.

Total time to get this very basic feature implemented? 6 1/2 hours, including 2 meals and a number of games of darts with the new blowgun I bought yesterday. Moral of the story: the security practices in Javascript can make your life a real pain in the…

index.html

<html>
<head>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.js"></script>
  <title>JamochaTrade - A Javascript stock charting program.</title>
  <style>
    body {text-align: center;}
    canvas {border: 1px solid #000;}
  </style>
</head>
<body>
  <canvas id="chart"></canvas>
  <script src="chart.js"></script>
</body>
</html>

chart.js

function getUrl(symbol) {
  // This should use the current date instead of a hardcoded date.
  return "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20csv%20where%20url%3D'http%3A%2F%2Fichart.finance.yahoo.com%2Ftable.csv%3Fs%3D" + symbol + "%26d%3D2%26e%3D27%26f%3D2011%26g%3Dd%26a%3D0%26b%3D1%26c%3D2000%26ignore%3D.csv'&format=json&callback=?";
}

function parseData(result) {
  // This returns an array of date objects the first row is labels.
  // For now use console.log so we can inspect the result in FireBug
  console.log(result.query.results.row);
}

// Loading and using jquery just for this is definately overkill.
$.getJSON(getUrl("ibm"), parseData)

var chart = document.getElementById("chart");
var c = chart.getContext("2d");

chart.onclick = moveRects;

function drawRects() {
  for (var i in rects) {
    var r = rects[i];
    c.fillRect(r.x, r.y, r.width, r.height);
  }
}

function moveRects() {
  for (var i in rects) {
    rects[i].x += 20;
  }
  c.clearRect(0, 0, chart.width, chart.height);
  drawRects();
}

function Rect(x, y, width, height) {
  this.x = x;
  this.y = y;
  this.width = width;
  this.height = height;
}

var rects = [new Rect(10, 25, 20, 50), new Rect(40, 25, 20, 50)];

drawRects();

For the moment I considered it more instructive to simply simply spit the result out to the console so we can inspect it. If you’re interested in seeing the full result object just use this code at line 9: console.log(result).

An Asynchronous Request

jQuery’s getJSON procedure makes an asynchronous request for JSONP data. What does this mean exactly? For one, it means that some things you might have thought would work, simply won’t. Take this as an example:

var data = false;
$.getJSON(getUrl("ibm"), function(result)
                           { data = result.query.results.row; } );

console.log(data);

In a synchronous environment one would expect data to contain the result of the getJSON request. However, getJSON is an asynchronous method to fetch data. This means that the variable data may or may not hold the result of getJSON depending on how long it takes getJSON to fetch the data. If console.log is called before getJSON returns, the value of data will be false.

There are a number of solutions to this problem and I’m not really sure which is the best practice. First, using jQuery’s ajax procedure and setting async to false will not work with JSONP, just read the async entry in the link. There’s also a note in there about synchronous requests possibly freezing the browser, which is the major downside of this next approach.

data = false;
$.getJSON(getUrl("ibm"), function(result)
                           { data = result.query.results.row; } );

while (data === false) { }

console.log(data);

Almost every time I try this I get the, “A script has become unresponsive” alert. Though it does work, this is not the kind of user experience I want in my apps.

My next thought was to use a sleep function and check the value of data only so often to prevent the above error. Well it turns out that the timer in Javascript is also implemented asynchronously! In addition it would seem that there is no standard sleep function and no easy way of implementing one, which I find a bit odd, but I digress.

There are a few other approaches that I have found. However there is only one that I actually like; just put the init code for the chart in the callback function! Humorously this is what I intended to do from the beginning and what my first example does. I wanted to make a simple example to show off here using a global to store the data. Well it turns out that the simplest way to do that is to do it in the callback.

$.getJSON(getUrl("ibm"), init);

function init(result) {
  var data = result.query.results.row;
  // do something with your data here
  console.log(data);
}

This approach may require rethinking the design of your app a bit, but it’s usually pretty simple. One approach is to simply put all your top-level commands inside a main or init function and use that as your callback function. A discussion of the different approaches to asynchronous code is outside the scope of this article.

That just about concludes this part of the Jumping Into Javascript series. Before ending this, I’ll leave you with the updated code. I have temporarily removed the ability to move items on the canvas, however the chart is now drawn from real data. It still doesn’t look all that great because I used a very naïve drawing algorithm to keep things simple and focused on fetching and handling the data, but you should get the idea.

var width = 600, height = 500
var chart = document.getElementById("chart");
var c = chart.getContext("2d");
chart.width = width; chart.height = height

//chart.onclick = moveRects;

//___________________________________________________________________________//
// Query and Init Procedures
//___________________________________________________________________________//

function getUrl(symbol) {
  return "http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20csv%20where%20url%3D'http%3A%2F%2Fichart.finance.yahoo.com%2Ftable.csv%3Fs%3D" + symbol + "%26d%3D2%26e%3D27%26f%3D2011%26g%3Dd%26a%3D0%26b%3D1%26c%3D2000%26ignore%3D.csv'&format=json&callback=?";
}

$.getJSON(getUrl("ibm"), init);

function init(result) {
  var data = result.query.results.row;
  drawRects(data, 1);
}

//___________________________________________________________________________//
// Chart Drawing Procedures
//___________________________________________________________________________//

function drawRects(d, s) {
  var e = s + 30;
  for (var i = s; i < e; i++) {
    c.fillRect(i*30, d[i].col1, 20, d[i].col1 - d[i].col4);
  }
}

A quick screenshot too…

With retrieving and handling data out of the way, the next article will likely be a short digression into the namespace pattern. After that I will most likely cover a few possible implementations of the chart drawing algorithm and play around with Javascript’s first-class functions.

GOTO Part 5 – Namespaces we should have more of these

Get JamochaTrade on GitHub

The first thing we’ll do is convert rect to be an object. Objects in Javascript are different than objects in many other languages. In many languages objects are class based, the object system in Javascript is prototype based. Very quickly what that means is that, in a class based object system, there is the abstract definition of an object (the class definition) and there are instances of objects defined by the class. In a prototype based system there is no distinction between the two.

In many practical ways these two systems are very similar, however there are some differences that may trip you up. I encourage you to read more about the differences and similarities. Unfortunately I can’t go much more in-depth than that here.

var chart = document.getElementById("chart");
var c = chart.getContext("2d");

chart.onclick = moveRect;

function drawRect() {
  c.fillRect(rect.x,rect.y,rect.width,rect.height);
}

function moveRect() {
  c.clearRect(0, 0, chart.width, chart.height);
  rect.x += 20;
  drawRect();
}

function Rect(x, y, width, height) {
  this.x = x;
  this.y = y;
  this.width = width;
  this.height = height;
}

var rect = new Rect(10, 25, 20, 50);

drawRect(rect)

As you can see we simply use a function to construct a Rect object. The this keyword is similar to self in Python and signifies that the variable is an attribute of the object. To create a new object we have to use the new keyword, this can be seen in the line: var rect = new Rect(10, 25, 20, 50);.

Other than these few modifications, nothing else has changed. rect is still used as a global variable and the functions drawRect and moveRect operate directly on rect. The next thing we’ll do is create a global array where we can store a number of Rects. This will require changing almost everything, however most changes will be minor.

var chart = document.getElementById("chart");
var c = chart.getContext("2d");

chart.onclick = moveRects;

function drawRects() {
  for (var i in rects) {
    var r = rects[i];
    c.fillRect(r.x, r.y, r.width, r.height);
  }
}

function moveRects() {
  for (var i in rects) {
    rects[i].x += 20;
  }
  c.clearRect(0, 0, chart.width, chart.height);
  drawRects();
}

function Rect(x, y, width, height) {
  this.x = x;
  this.y = y;
  this.width = width;
  this.height = height;
}

var rects = [new Rect(10, 25, 20, 50), new Rect(40, 25, 20, 50)];

drawRects();

Make sure that you use the new keyword when you create new objects, even when they are in an array. I spent at least 10 minutes trying to figure out what I was doing wrong in the for loop, just to realize that I did not use the new keyword when I initialized the array!

Also I noticed that, at least some, Javascript implementations are very forgiving regarding errors. Until now I’ve been passing rect as an argument to drawRect in the moveRect function. The drawRect function does not expect any arguments, yet I am allowed to give it one without complaint. I can see this “feature” being problematic down the road, however I can also see that it might be necessary with all the different non-conforming implementations out there. I have since gone back and fixed this in previous posts.

Since we’ve already covered objects and arrays, the only thing new here is the for loop. There are two methods of invoking the for loop in Javascript. The one that I used above is…

for (var i in sequence) {
  // body;
  // use sequence[i] to access elements
}

One thing to note with this method is that i is not bound to the n^th element in sequence, rather i is simply a counter. This method is basically a shorthand for the next method which is more similar to C syntax…

for (var i = 0; i > sequence.length; i++) {
  // body;
  // use sequence[i] to access elements
}

This is the standard for loop syntax available in many languages. No matter which method you use you must still use sequence[i] to access the elements. The (var i in sequence) syntax does not act like Python’s for i in sequence.

The next post will explore downloading and manipulating stock data. However I have run into a small problem that I haven’t been able to solve in <30 minutes of searching. It seems that the same origin policy will prevent me from downloading historical data from Google Finance. From what I’m reading I need to find a source of historical quotes that offers the data in JSONP (or CORS) which will allow cross domain access. While I can understand the security implications of allowing arbitrary cross-domain access, this part of the app (which was trivial in Python) is a real pain in Javascript.

GOTO Part 4 – Same Origin Policy, JSONP, XMLHttpRequest, and Cheating with jQuery

Get JamochaTrade on GitHub

Links

Introduction to Object-Oriented JavaScript

The concept of moving an object on the canvas is a bit of a misnomer. We actually won’t move anything at all, instead we must clear the canvas (or part of it) and repaint the object in a new location. Let’s look at the simplest code I could come up with that accomplishes this.

chart.js

var chart = document.getElementById("chart");
var c = chart.getContext("2d");

c.fillRect(10, 25, 20, 50);
c.clearRect(0, 0, chart.width, chart.height);
c.fillRect(30, 25, 20, 50);

This code starts by drawing a rectangle, then c.clearRect(0, 0, chart.width, chart.height) clears the canvas, then it draws another rectangle 20 pixels over to the right. If you run this code, you probably won’t see anything but the final rectangle. This is because it is running very fast. To see it we need to slow things down a bit.

There are a number of ways we could achieve this. We could set an event loop and move the rectangle on each loop, or we could set a timer between draws. However I’m going to use an event handler to call a function that clears the canvas and redraws the rectangle.

chart.js

var chart = document.getElementById("chart");
var c = chart.getContext("2d");
c.fillRect(10, 25, 20, 50);

chart.onclick = moveRect;

function moveRect() {
  c.clearRect(0, 0, chart.width, chart.height);
  c.fillRect(30, 25, 20, 50);
}

When you click on the canvas you will see the rectangle “move” a bit to the right. This illustrates a few things about Javascript that I haven’t covered. First moveRect is an example of how functions are defined in Javascript. You can also define functions like this…

var moveRect = function() { //body; }

… see here for an explanation of the difference. This little snippet also hints to us that functions are first-class values in Javascript, but I won’t get into that now.

Also this demonstrates one of the ways to set an event handler. This sets the function moveRect to be called whenever the canvas is left clicked. This method of event handling will work with any modern browser.

Another way to accomplish event handling is to use the inline method. This is the oldest way to set handlers in Javascript. If you have to maintain compatibility with very old browsers you will be forced to use this method. Here’s a link to more info on the inline method and an example…

<canvas id="chart" onclick="moveRect();"></canvas>

So far we’ve got our rectangle to “move” once when the canvas is clicked on. However it will not move any further, no matter how many clicks occur. The reason for this is that we are not incrementing the x position of the rectangle, rather the new position is hardcoded into the moveRect function.

Even though we see a rectangle on the screen, in our source code there is really no notion of the rectangle as a separate entity. There are a variety of options to fix this behavior, we could code the rectangle as an object, or use a closure, or even use 4 different variables to hold the position and size of our rectangle. I’ll be covering some of those options later, but for now I want to focus on arrays.

Temporarily I’ll use an array to hold the values of the rectangle and a variable to hold the array. I’ll call it rect for now. Because the fillRect function does not accept an array as a parameter, we’ll need to define a function drawRect that will call fillRect with the correct values. To keep things simple, I’ll use rect as a global variable.

var chart = document.getElementById("chart");
var c = chart.getContext("2d");

chart.onclick = moveRect;

function drawRect() {
  c.fillRect(rect[0],rect[1],rect[2],rect[3]);
}

function moveRect() {
  c.clearRect(0, 0, chart.width, chart.height);
  rect[0] += 20;
  drawRect();
}

var rect = [10, 25, 20, 50];

drawRect()

When you run this code you’ll notice that the rectangle keeps moving to the right every time you click the canvas. This is exactly the behavior we were looking for here.

Once again there are a few new concepts here. var rect = [10, 25, 20, 50]; creates an array and assigns it to the variable rect. You do not have to specify the number of elements in the array and it is also resizable. Indexing into an array is similar to most Algol inspired languages using varName[n] to access the n^th element of an array stored in varName. += also works as expected and destructively increments the value of the index n by the value of the right hand expression. This code also gives you a quick peek at the scoping rules used in Javascript, however a through overview will have to wait for a later article.

That quick overview concludes this post on moving objects on a canvas and arrays. In the next post I’ll probably cover objects and loops and create more rectangles to move about.

GOTO – Part 3 – Objects and Loops

Get JamochaTrade on GitHub

Links

Mastering Javascript Arrays

QuirksMode.org – Functions

How does a self-taught programmer know when he’s ready to look for a job?

The responses I got were very encouraging, but one in particular pointed out some shortcomings in my education. To paraphrase, it instructed me to look around at job offerings and compare the skill set employer’s are looking for to my own. This was a bit disheartening to me as I’ve been focusing mainly on theory and AI and found that my skills are not all that marketable in an environment that is dominated by web and database programming.

This endeavor is an attempt to remedy that problem, or at least demonstrate to future employers and myself, that I can pick up these technologies relatively quickly. When I learn a new technology/language/framework I usually prefer to start with a project that can be done simply but can also scale up, rather than simply following along with a tutorial or book.

For this purpose I will be writing a Javascript version of pyTrade, which will not be a port, but a complete rewrite to allow me to understand the language better. It wasn’t too long ago that I wrote pyTrade, so a lot of it is still fresh in my mind, however it’s been long enough that at least some of the details escape me and I will do my best not to look at the source code.

I’ll be writing this in tutorial fashion to help reinforce the concepts that I’ll be learning and to let others follow along if they wish. This will not be a beginner’s introduction to Javascript. I’m assuming that the reader is intimately familiar with at least one Algol inspired language. My background is mainly Python and Scheme with a little C, so you may see Javascript idioms compared against their counterparts in these languages.

Since I don’t want to constantly refer to this project as “this project”, for now it will be codenamed JamochaTrade. Maybe I just didn’t think hard enough, but I couldn’t come up with a short prefix that didn’t make it sound like this was implemented in Java. Not that JamochaTrade satisfies that criteria, but I like it as a codename.

First Step to JamochaTrade

As I said earlier, I’m going to start out with the simplest thing I can and work up from there. The simplest thing I can think of to start with is the html shell page that will allow people to access JamochaTrade. Without further ado here’s the shell…

index.html

<html>
<head>
  <title>JamochaTrade - A Javascript stock charting program.</title>
  <style>
    body {text-align: center;}
    canvas {border: 1px solid #000;}
  </style>
</head>
<body>
  <canvas id="chart"></canvas>
  <script src="chart.js"></script>
</body>
</html>

I’ve saved this code in a file named “index.html” and also created a blank file named “chart.js” where the Javascript will eventually reside. This code doesn’t do much and I think it’s relatively self-explanatory so I won’t go over it, except to say the important part of this shell is that we create a canvas and give it the id of chart.

Now that we have a canvas, my first goal is to draw something on it. Since my preferred charting style is the candlestick chart, I’ll start by figuring out how to draw a box on the canvas. To do this we need to do 3 things in our chart.js file, first we need to get the reference to the canvas from the dom, then we need to get the context from the canvas and finally we need to draw a box.

What is a context? The simplest way to think about a context is as an API. A context provides methods of drawing on the canvas, different contexts provide different methods of drawing. That’s the best explanation I have at the moment, I’ll probably explain it more throughly later.

Currently there is only one universally supported context for the canvas, which is the “2d” context. At some point in the future there will also be a “3d” context that will allow 3d graphics to be displayed in the browser. Since that only exists in a few vendor-specific instances right now I’ll ignore that from here on out.

chart.js

var chart = document.getElementById("chart");
var c = chart.getContext("2d");
c.fillRect(10, 25, 20, 50);

The first line above simply gets the chart object from the dom tree. The second line sets the chart’s 2d context to the variable c. I chose c because it is short and we will be using it in many of our drawing calls, also it can be thought of as short for context, canvas and chart which works out pretty well if I do say so myself.

Finally we draw our first object onto the canvas. The fillRect procedure is used to do the actual drawing. There’s two common way’s I’ve come across drawing rectangles in GUI programs, the first is to specify the x and y starting point of one corner of the rectangle and the x and y point of the opposite side (Left/Top/Right/Bottom). The other way, and the way the 2d context in Javascript works, is to specify the x and y starting position and then the length of the rectangle along the x axis and the y axis (X/Y/Width/Height).

The easiest way to test which coordinate system is being used is to give large numbers for the first 2 parameters and small negative numbers for the next 2 parameters, like (100, 100, -10, -10). If the resulting rectangle fills the entire top left corner you are using the (Left/Top/Right/Bottom) coordinate system, if the rectangle is small and off of the edge you are using the (X/Y/Width/Height) coordinate system.

With that lengthy discussion out of the way the first Jumping Into Javascript post has reached its conclusion. The next post will cover moving the rectangle as well as a brief overview of arrays.

GOTO – Part 2 – Moving Objects on the Canvas

Get JamochaTrade on GitHub

Links

WhatWG Canvas Standard/Reference

Dive Into HTML5 – Canvas

Michal Budzynski: Simple game with HTML5 Canvas Tutorial

A stackoverflow discussion of coordinate systems.