I’m not at the point of mastering JavaScript. I never think of closures in advanced when building a project. I sort of just throw them in when an event doesn’t work or my context is suddenly wrong. At least I’m no longer using global variables to get things working.

Much of the code for this was borrowed from the Raphaël sample which does use global variables for the event methods and array of edges in the graph. Most of the heavy lifting is done by the Raphaël JavaScript library which I really like since it is compatible with most browsers. The only issue I have seen is old version of android which didn’t support SVG.

Step 1: Download and install ejabberd. The install is straight forward and the default configuration has everything you need. During the install it will ask you for a domain. I would recommend setting up a host alias “localhost.demo.com” because it looks nicer and easier to use but you could also just use localhost. After install check to make sure the http-bind endpoint is working http://localhost:5280/http-bind/. You should see a simple page that has “ejabberd mod_http_bind” at the top

Step 1.5: Setup a host name if needed. If you used localhost you can skip this step. You can do this in Windows 7 via the host file which should be located “C:\Windows\System32\drivers\etc\hosts”. Add a line at the bottom with your IP and new local DNS.

Step 2: Setup new IIS application and copy in strophe.js examples. Go into IIS manager and create a new application named “xmppExample”. Then download the latest strophe.js and copy the contents to your new site. You should be able to access the following now. http://localhost.demo.com/xmppExample/strophejs/examples/basic.html. You will have to change the first line in basic.js to setup your endpoint. It should look like this BOSH_SERVICE = ‘http://localhost.demo.com/http-bind’

Step 3: Setup proxy for ejabberd http-bind endpoint. To make things simple we need everything on the same domain. Right now, the bosch http-bind endpoint is this http://localhost:5280/http-bind/ and we need it to be this http://localhost.demo.com/http-bind. Download and install the Application Request Routing for IIS. Once installed follow these steps to enable proxy.

1. Open IIS Manager
2. Select a server node in the tree view on the left hand side and then click on the “Application Request Routing…” the full name shows up as “Application Request Routing Cache”
3. Then on the far right side click on “Server Proxy Settings…
4. check the box next to Enable proxy and apply settings (keep everything else default)

Finally, add a rewrite rule to the web.config file in your inetpub root dir. For example, mine is located “C:\inetpub\wwwroot\web.config”. Here is my full XML configuration file:

<rewrite>
    <rules>
          <rule name="ejabberd.BOSH" stopProcessing="true">
               	<match url="^http-bind" />
               	<action type="Rewrite" url="http://localhost.demo.com:5280/http-bind/" />
          </rule>
    </rules>
</rewrite>

Now you should be able to run the demo at http://localhost.demo.com/xmppExample/strophejs/examples/basic.html. You will need to login with admin@localhost.demo.com (if admin is the username you selected during install) and the password you selected during install.

I can also be found on Google+ Jason Rowe and twitter @jsonrow

Note: Here is a quick overview of JavaScript that is as short as possible, but explains every major feature. I would also recommend following the 2ality website

Today JavaScript projects have the complexity, size, and structure of projects written in languages like C# and Java. Thankfully, the developer tools for debugging and logging are solid across browsers. *Opera is still a little funky about logging using “opera.postError.apply(opera, arguments);”. Looking particularly good, Google’s version of the webkit dev tools and some API’s they have in beta. I’ve started to use quint for unit testing. I’ve also been looking leveraging these frameworks: underscore.js, coffee script, raphaeljs, and closure compiler.

It’s amazing how much has changed. Now examples of good JavaScript are much easier to find. Hell, here is a step by step walkthrough of how to build your very own JavaScript framework.

So to get some practice I went and found some JS that needed cleanup. I wanted to focus on structure and namespaces and this script needed some love. View source on that page and you will notice global variables and one big pile of code.

The first thing I did was break up the logic into separate functional script files that will later be compiled and minified into one. You can see the python script I use to minify here.

1. animation.js
2. builder.js
3. core.js
4. pie.js
5. rendering.js
6. styles.js

I then added a test folder and setup the same file names but which had test cases for each script. Then an index.html file to display the test groups or “modules” as they are called in QUnit. Here is an example of a test that always passes

module("sample test");

test("a sample qunit test", function () {
    ok(true, "always fine");
});

The next thing I worked on was getting a namespace around the code. I went with the following which seems to work for my needs.

var SimpleHtml5 = SimpleHtml5 || {};

SimpleHtml5.namespace = function (ns_string) {
    'use strict';
    var parts = ns_string.split('.'), parent = SimpleHtml5, i;
    if (parts[0] === "SimpleHtml5") {
        parts = parts.slice(1);
    }
    for (i = 0; i < parts.length; i += 1) {
        if (typeof parent[parts[i]] === "undefined") {
            parent[parts[i]] = {};
        }
        parent = parent[parts[i]];
    }
    return parent;
};

Stefanov, Stoyan (2010). JavaScript Patterns (pp. 89-90). OReilly Media – A. Kindle Edition.

So after refactoring, I’ve got the pie chart setup code to the following.

var pieElm = document.getElementById('pieChart');
var pieData = $('#chartData td');

var pieChart = new SimpleHtml5.Core.Pie(pieElm, pieData);

$('#pieChart').click (pieChart, SimpleHtml5.Pie.Animation.HandleChartClick);

To customize the style I allow passing in a custom style object to override the defaults.

var customStyles = {
    chartSizePercent: 49,
    maxPullOutDistance: 10,
    pullOutFrameStep: 4,
    pullOutFrameInterval: 40,
    pullOutLabelPadding: 42
};

var pieElm = document.getElementById('pieChart');
var pieData = $('#chartData td');
var pieChart = new SimpleHtml5.Core.Pie(pieElm, pieData, customStyles);
$('#pieChart').click (pieChart, SimpleHtml5.Pie.Animation.HandleChartClick);

If you are curious about how the other parts of the chart were organized you can see the source code on github.

I can also be found on Google+ Jason Rowe and twitter @jsonrow

I frequently get asked how to create a chart in JavaScript that shows a different line color above and below the previous close price. Here is a example of what I mean.

View this test page if you want skip the details and see a working example in JavaScript/SVG

At first glance, I’ve always thought this would be very easy and instructed them to create a new path depending on if the line is above or below the previous close line (the blue line in the image above). Simple enough right?

It turns out I was missing a crucial step that might go unnoticed if you are using many data points. The problem turns up when using sparse data like the example shown above.

Here is what it looks like if you do what I said literally.

That missing step I mentioned is connecting the new lines. Seems obvious now that I look at an example. So how will this be done? Here is an image showing the paths with labels for easy reference.

What I have found works best is to find the intersection point between the paths and the previous close line. So you would create one line using the last point from path 1 and the first points from path2. The second line would just be the previous close line points. Unfortunately, just having the points is not enough to calculate the intersection.

Below is the needed format and calculation. I created a function to do this in JS which is provided below but I wanted to include the full explanation.

Say we are given two different points, (x1, y1) and (x2, y2), and want to find A, B and C for the equation above. We can do so by setting A = y2-y1 B = x1-x2 C = A*x1+B*y1 Regardless of how the lines are specified, you should be able to generate two different points along the line, and then generate A, B and C. Now, lets say that you have lines, given by the equations: A1x + B1y = C1 A2x + B2y = C2 To find the point at which the two lines intersect, we simply need to solve the two equations for the two unknowns, x and y. double det = A1*B2 – A2*B1 if(det == 0){ //Lines are parallel }else{ double x = (B2*C1 – B1*C2)/det double y = (A1*C2 – A2*C1)/det }

Here is the full function in JS to create this format and find the intersection.

  //Line-Line Intersection
        var getXCrossing = function(p1x, p1y, p2x, p2y, marker, markerMaxX) {
               
                var retValX = 0;
                var retValY = 0;
               
                //graph lines
                var a1 = p2y - p1y;
                var b1 = p1x - p2x;
                var c1 = a1 * p1x + b1 * p1y;
                
                //marker line is always horizontal
                var a2 = marker - marker;
                var b2 = 0 - markerMaxX;
                var c2 = a2 * 0 + b2 * marker;
                
                var det = a1 * b2 - a2 * b1;
                
                if(det === 0)
                {
                    //Lines are parallel
                }
                else
                {
                    retValX = (b2 * c1 - b1 * c2) / det;
                    retValY = (a1 * c2 - a2 * c1) / det;
                }   
                
                return {
                        x: retValX,
                        y: retValY
                    };
                };

Here is a test page which shows a working example in SVG using gRaphaël JavaScript library.

<script type="text/javascript">

var rectA = {x: 2, y: 5, width: 6, height: 6};
var rectB = {x: 4, y: 10, width: 6, height: 6};
var area = {min: 0, max: 100};

var overlap = rectOverlap(rectA,rectB);
alert("Does rectA and rectB overlap? " + overlap);

if(overlap)
{
if(rectA.y >= rectB.y)
{
if(increaseY(rectA.width, rectB.y + rectB.height, area.max))
{
rectA.y = rectB.y + rectB.height + 1;
}
else if (rectA.y - rectB.height > area.min)
{
rectB.y = rectA.y - rectB.height;
}
}
else
{
if(increaseY(rectB.width, rectA.y + rectA.height, area.max))
{
rectB.y = rectA.y + rectA.height + 1;
}
else if (rectB.y - rectA.height > area.min)
{
rectA.y = rectB.y - rectA.height;
}
}
}

alert("Does rectA and rectB overlap? " + rectOverlap(rectA,rectB));

function increaseY(width, bottomEdge, Max)
{
return (bottomEdge + width < Max);
}

function valueInRange(value, min, max)
{

return (value <= max) && (value >= min);

}

function rectOverlap(A, B)
{
var xOverlap = valueInRange(A.x, B.x, B.x + B.width) ||
valueInRange(B.x, A.x, A.x + A.width);

var yOverlap = valueInRange(A.y, B.y, B.y + B.height) ||
valueInRange(B.y, A.y, A.y + A.height);

return xOverlap && yOverlap;
}

</script>

var J = jQuery.noConflict();

function <span>GetData</span>(object) {

var requestObject = object.buildRequest()

$.ajax({
type: "POST",
url: object.url,
dataType: "json",
data: requestObject,
success: function(jsonResult) {
object.data = jsonResult;
object.DoStuffWithData();
}
});
}

function GetData(object) {

var requestObject = object.buildRequest()

$.ajax({
type: "POST",
url: object.url,
dataType: "json",
data: requestObject,
success: function(data) {
//On Success Call Data Updater
data.id = object.Id;
DataUpdater(data);
}
});

requestObject = null;
}

function DataUpdater(data) {

//loop through Requesters Array

//must add object to global array before making DataUpdater
for (i = 0; i < Requesters.length; i++) {

var temp = Requesters[i];

var requestId = temp.Id;
var dataId = data.Id;

//Find object with matching id
if (requestId == dataId ) {

temp .data = data;
temp .DoStuffWithData();
}
}

}

Drip While tracking down this memory leak I decided to try out a memory leak tool called Drip. Unfortunately, It didn’t work in my situation. Drip actually started causing memory leaks so it made it hard to tell if I actually fixed the problem or not. I think the reason it doesn’t work is the script is recursive using setInterval. Other Tools Setting up IE and Firefox private bytes counters under process in Perfmon is the most reliable way to monitor JS memory leaks. Another common gotcha is the FireFox web developer plug-in. Turn that off if you are going to do any JS memory leak testing. It’s probably a good idea to turn off any IE plug-ins too just incase but I haven’t ran into any problems with theirs yet. IE also has a tool bar for JS memory leaks but it didn’t work in my situation very well. Some good pages for review:

• Understanding and Solving Internet Explorer Leak Patterns
• JavaScript and memory leaks
• Memory Leakage in Internet Explore
• http://javascript.crockford.com/memory/leak.html

]]>