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

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

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

Related Posts (generated):

• Bringing the LinkButton to Ext JS

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

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