Enigmatic Thought

So you’ve got a nice Ext JS application but you want a little more from your charts. Even better, you’ve found a nice plugin for JQuery called jqPlot that creates all kinds of nice charts. So, how do you make jqPlot work nicely within the ExtJS framework?

First, include the jqPlot & jQuery files in your index.html file in the head section:

    <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="jQuery/excanvas.js"></script><![endif]-->
    <script language="javascript" type="text/javascript" src="jQuery/jquery-1.7.1.js"></script>
    <script language="javascript" type="text/javascript" src="jQuery/jquery.jqplot.min.js"></script>
    <script language="javascript" type="text/javascript" src="jQuery/jqplot.dateAxisRenderer.min.js"></script>

Now, lets run though how jqPlot works. It takes a div, and within that div it injects all it’s chart stuff. That means more divs and whatnot, but everything is contained in the base div we pass to jqPlot. We’re going to use the panel’s body as the containing div for the chart since there’s no other content. We also want the chart to be drawn once, and we need to make sure ExtJS has created the div for us to use, so we’ll override the afterComponentLayout function like so:

    afterComponentLayout: function(width, height)
    {
        data = [['1/2012', 50],['2/2012', 66],['3/2012', 75]];
        $.jqplot(this.body.id, data,
            { title:'Server Load',
                axes:{xaxis:{renderer:$.jqplot.DateAxisRenderer}},
                series:[
                    {label:'Awesome Level'}
                ]
            });
 
        this.callParent(arguments);
    }

this.body.id is the class of the body div the panel is built around. But what if you drag the panel around, or gets resized? Your chart is drawn multiple times stacked. We need JQuery to clear the old chart before the lastest is drawn. So add this before your $.jqplot call:

        $('#'+this.body.id).empty();

Which asks JQuery to empty the contents of the div (in this case the body). Why the #? JQuery uses # to look up the id. It’s part of the JQuery selection syntax. Put them together and you have a nice chart.

But what if you want to use an ExtJS store? Well, it’s a little more complicated since you have to translate your data, but it’s not hard. Lets say we have a store that tracks our Awesome levels. So it’s has date & awesome fields. We’ve already set it up in our Ext.define with store: ‘AwesomeLevels’; So let’s pull it up and reference it:

        var dataArray =  Ext.Array.pluck(Ext.data.StoreManager.lookup(this.store).data.items,'data');
        var data = [[]];
        dataArray.forEach(function(obj){
            data[0].push([obj.date, obj.awesome]);
        });

And thus we’ve populated our data object that we’re going to pass to jqPlot. So the final afterComponentLayout function looks like this:

    afterComponentLayout: function(width, height)
    {
        var dataArray =  Ext.Array.pluck(Ext.data.StoreManager.lookup(this.store).data.items,'data');
        var data = [[]];
        dataArray.forEach(function(obj){
            data[0].push([obj.date, obj.awesome]);
        });
 
        $('#'+this.body.id).empty();
 
        data = [['1/2012', 50],['2/2012', 66],['3/2012', 75]];
        $.jqplot(this.body.id, data,
            { title:'Server Load',
                axes:{xaxis:{renderer:$.jqplot.DateAxisRenderer}},
                series:[
                    {label:'Awesome Level'}
                ]
            });
 
        this.callParent(arguments);
    }

And we have a nice Panel with a jqPlot chart.

Related Posts (generated):

• Bringing the LinkButton to Ext JS
• Time to explore Ext JS 4.0

Coming from the world of Flex, I was used to LinkButtons. Buttons that looked somewhat like a simple html link, but when hovered proved to be a button. Not only that, but it allowed nice toolbars and menus to be created that didn’t have generic buttons slapped on them. While Ext JS 4.0′s Ext.Button did exactly what I wanted it to, it didn’t look like I wanted. So, here’s my new LinkButton Class:

Ext.define('app.view.component.LinkButton', {
    extend: 'Ext.Button',
    alias: 'widget.linkbutton',
    componentCls: 'linkButton',
    arrowAlign: 'left'
});

Of course, it looks really ugly since it’s still using the Button’s stylesheet. So Let’s fix that:

.linkButton {
    background-image: none;
    background-color: transparent;
    border-style: none;
}
 
.linkButton.over {
    background-color: white;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(48%, #f9f9f9), color-stop(52%, #e2e2e2), color-stop(100%, #e7e7e7));
    background-image: -webkit-linear-gradient(top, #ffffff, #f9f9f9 48%, #e2e2e2 52%, #e7e7e7);
    background-image: -moz-linear-gradient(top, #ffffff, #f9f9f9 48%, #e2e2e2 52%, #e7e7e7);
    background-image: -o-linear-gradient(top, #ffffff, #f9f9f9 48%, #e2e2e2 52%, #e7e7e7);
    background-image: -ms-linear-gradient(top, #ffffff, #f9f9f9 48%, #e2e2e2 52%, #e7e7e7);
    background-image: linear-gradient(top, #ffffff, #f9f9f9 48%, #e2e2e2 52%, #e7e7e7);
    border-style: solid;
    padding: 0px;
}

And now the hover action makes a pretty button, giving us the LinkButton!

Related Posts (generated):

• Time to explore Ext JS 4.0
• Flash Debug crashing in Firefox?
• Clever Code is dangerous
• Bugquash badges fixed
• Big O Notation

I’ve started learning Ext JS 4.0, and it feels like it’s in a place similar to early Flex. Lots of self-taught stuff, no nice tutorials, and an lots of confusing Google Search results. Part of that is the transition from Ext JS 3.0 to 4.0 is non-trivial. 4.0 is much more Object Oriented and built around a MVC approach. That means the majority of current ExtJS examples aren’t going to help, since they rely on an out of data library.

So, time to warm the blog back up and start tracking the learning process.

Related Posts (generated):

• Bringing the LinkButton to Ext JS

If you’ve just updated to Firefox 3.6.4 and use the Flash debug player, you may have noticed a problem. While you’re debugging, Firefox is killing you’re flash player session. Here’s the quick fix:

1. type about:config in the firefox address bar
2. search for dom.ipc.plugins.timeoutSecs
3. double click and change the value to -1

This will disable the hang detector that was added. It’s the same reason I don’t do any debugging in Chrome (alongside the lack of HttpFox). Sometimes a break point needs more than 10-15 seconds for me to figure out what’s going on. Check out more details here

Related Posts (generated):

• Altering Flash Builder’s new menu
• Firefox and flex
• Flex in Eclipse tips
• Clever Code is dangerous
• Bugquash badges fixed

When we last left you, we talked about Big O Notation and how we can use that to compare two algorithms. That was all theoretical though, dealing with infinite sets of data. In the real world, you’ll find that sometimes a “bad” algorithm is really the best for your application.

Lets track down an example from the world of video games. You’ve got a ship that flying around trying to dodge asteroids, and the ship could fire bullets to blow the asteroids up. Let’s lay out some ground rules as well. We don’t worry about the asteroids hitting each other, and bullets can’t hit each other or your own ship. There’s two separate problems here, and we’ll divide the collision system between them. In the first, we have a single ship and a one or more asteroids (when there are no asteroids, the level is over). In the second, there are zero or more bullets (maybe there’s a limit, but I’ll assume the Zero-One-Infinity Rule) and one or more asteroids.

On the surface these seem identical, there is a target set, and a set to hit the targets. So let’s solve the complicated one first (bullets & asteroids). There’s a many to many relationship, so during the first pass we could compare each bullet to each asteroid and see if we register a hit. Since we’re looping twice, the Big O notation would be O(b*a) with b = # of bullets, and 1 = # of asteroids. We can do better than that though, thanks to some clever thinking. Let’s sort our lists of asteroids and bullets in the order of the y (vertical) coordinate. We know we can sort using lots of O(n log n) algorithms (quicksort, mergesort, and whatnot) and then we can use the concept of merging to work our way down the 2 sorted lists looking for matching x coordinates. Here’s some pseudocode:

asteroidList.sortY()
bulletsList.sortY()
asteroid = 0;
bullet = 0
while (bulletList.length < bullet && asteroidList.length < asteroid)
{
	if (bulletList[bullet].y < asteroidList[asteroid].y)
	{
		bullet++;
	}
	else if (bulletList[bullet].y > asteroidList[asteroid].y)
	{
		asteroid++;
	}
	else // y is ==
	{
		//check for collision and do work to handle multiple objects on same y point
	}
}

Of course you’d have to build a way to handle multiple object on the same plane, but it’d work out to about O(a+b) assuming everything is evenly distributed on the y axis. Combined with the initial sorting, your Big O notation would be O(n log n) (either n=a or n=b depending on which is larger) because O(n log n) is “larger” than O(a+b), which would simplify to O(n).

So we’ve figured out the collision detection right? What about the ship and asteroids? Since we know one value, O(s*a) is really O(1*a)=O(a) and our “clever” solution is actually slower than the original! In fact, depending on the number of bullets, we may have slowed the simple O(b*a) solution down as well.

So you’re not programming a game, so why should you care? Throw out asteroids, ships, and bullets and look at two sets of data you’re trying to merge. A small list of data may just need a brute force solution rather than spending time figuring out a “really nifty algorithm” which may be horribly inefficient with the amount of data your working on. Maybe you should just have everything pre-sorted so you don’t take the O(n log n) penalty, then O(a+b) can be no worse than O(a*n). Regardless, don’t just look at the algorithm ans what it does, but look at the data that will be pushed around when you have to decide how to accomplish a task.

Related Posts (generated):

• Big O Notation
• Why Algorithms Matter
• Flash Debug crashing in Firefox?
• Bugquash badges fixed
• Scientific Notation Patch Accepted