techrageo.us » Web design

Communicating Charts with Flex

grant — Tue, 19 Jun 2007 08:59:46 +0000

Getting started

Creating graphs with Adobe’s Flex 2 is a pretty simple task, just throw together some short XML and you’re done. But like most “easy” technologies things get a little more difficult when you want to do more advanced things like making sections of the graphs stand out or keeping multiple graphs in sync with one another. In this tutorial I will take you through how to give your graphs a little more “flash” and how to make things happen in one graph when you click on another graph.

If you haven’t already you can download the free Flex 2 SDK from Adobe. And you can download a free trial of the Flex 2 charting library.

In your favorite text editor (Eclipse anyone?) start a new file and start with some basic code:

 version="1.0" encoding="utf-8"?>
 xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*"
  xmlns:local="*" xmlns:view="view.*">
 
>
  
    import mx.collections.ArrayCollection;
 
    [Bindable]
    private var profitPeriods:ArrayCollection = new ArrayCollection( [
    { period: "Qtr1 2006", profit: 32 },
    { period: "Qtr2 2006", profit: 47 },
    { period: "Qtr3 2006", profit: 62 },
    { period: "Qtr4 2006", profit: 35 },
    { period: "Qtr1 2007", profit: 25 },
    { period: "Qtr2 2007", profit: 55 } ]);
  ]]>
>
 
   x="10" y="10" width="100%" height="100%" title="Profit By Period">
 
     id="profitPie" dataProvider="{profitPeriods}" showDataTips="true" width="100%" height="100%">
      >
         field="profit" nameField="period" labelPosition="callout" showDataEffect="{interpolate}" />
      >
    >
  >
>

Getting more advanced

This code basically creates a sample dataset and a pie chart to display it. Nothing fancy and if we were using an XML feed we wouldn’t have any need for ActionScript at all, since we are only using it to create the data in this example.

Now let’s say that your customer (or boss) wants to have the data shown in multiple ways. For our example let’s say that he wants to see a pie graph, a bar graph and a data grid. So he can see the data in whatever way he wants to. No problem there, throwing another chart and grid on the page is just a few more lines of xml, but what if they are to interact? Say your boss wants to be able to click on a piece of the pie chart and have the same record highlighted in the pie chart, the column chart and the data grid. Now we’re going to have to whip out the ActionScript.

We are going to need three methods, one to highlight the pie graph, one for the column chart and a final one for the data grid. Then we can call all three of these methods whenever a chart or grid is clicked on. We are using three methods instead of just one giant method in case we ever want to use them again, in a different circumstance.

import flash.display.DisplayObject;  //The items in the column chart are DisplayObjects
 
private var prevSelectedColumn:DisplayObject;
/*
We want to be able to "unhighlight" whatever column we highlighted last time, so
we'll create a variable to keep it simple. If you are using a graph with
multiple datasets then you'll obviously want to loop through them and reset them
that way instead of using this method.
*/
 
/*
* This function will highlight a column/bar in a column/bar chart
* @param barName  The name/id of the bar/column chart
* @param barIndex The position of the column you want to highlight
*/
private function barHighlight( barName:String, barIndex:int ):void
{
  if (prevSelectedColumn)  //If we selected something before, unselect it:
  {
    prevSelectedColumn.alpha = .8;
    prevSelectedColumn.filters = [];  //remove the filters
  }
 
  //This gets the individual column that we are looking for
  prevSelectedColumn = this[barName].series[0].getChildAt( barIndex );
 
  if (prevSelectedColumn)  //highlight the new column:
  {
    prevSelectedColumn.alpha = 1;
    prevSelectedColumn.filters = [new GlowFilter(), new DropShadowFilter()];
  }
}
 
/*
* This function will highlight a row in a data grid
* @param dataGridName The name of the data grid that contains the row to highlight
* @param rowIndex   The position of the row in the grid to highlight
*/
private function rowHighlight( dataGridName:String, rowIndex:int ): void
{
  this[dataGridName].selectedIndex = rowIndex;  //the easy one...
}
 
/*
* This function "explodes" a piece of pie from a pie chart
* @param pieName  The name of the pie chart that is to be modified
* @param pieIndex The index of the pie piece that is to be modified
*/
private function pieHighlight( pieName:String, pieIndex:int ):void
{
  var explodeData:Array = [];  //create an empty array
  explodeData[ pieIndex ] = 0.15; //Set the index of our pie piece to > 0
  this[pieName].series[0].perWedgeExplodeRadius = explodeData;
  /*
  The pie's wedges can be "exploded" outward to highlight them. The amount is
  controlled by an array, so we just create a empty array (which would set
  everything to no padding) and add padding for the index that is to be
  highlighted. This has the added bonus of un-highlighting the piece that was last
  highlighted (if any). Sweet!
  */
}

Adding events

Of course, this is using inline ActionScript. If you want to separate it into another file you’ll have to use “Application.application” instead of “this” (see the downloadable GraphHighlighting.as file below). That should give us a snazzy little effect every time we click on an item in any of the charts or in the grid. But they won’t be doing any effects unless we add event handlers to our objects. Let’s do that now.

So change the xml for your pie chart and add this to the PieChart tag:

itemClick="pieChartClick(event, 'profitGrid', 'profitBar');"

And then you can add the ActionScript to handle that event (which, of course, will call our handy three functions):

/*
* This is run when the pie chart is clicked on
* @param event    The click event
* @param dataGridName The string name of the data grid that should be highlighted
* @param barName  The string name of the column chart that should be highlighted
*/
private function pieChartClick( event:ChartItemEvent, dataGridName:String, barName:String ):void
{
  pieHighlight( event.currentTarget.id , event.hitData.chartItem.index );
  rowHighlight( dataGridName, event.hitData.chartItem.index);
  barHighlight( barName, event.hitData.chartItem.index );
}

Then do this for the other chart and the datagrid and you’ll be set.

Conclusion and downloads

So, if you did your calculations correctly, remembered to carry the one and crossed your fingers you probably ended up with something like this:

Actually, it probably won’t look like that, but the sample code download does (see below).

It is more likely that you’ll probably be making the charts communicate using different data (click on one part of a chart and get detailed information in another chart), but this should at least get you started in the right direction.

Download the complete inline ActionScript example: This file is the complete example and you should be able to save it and compile it with the mxml compiler that came with the Flex 2 SDK (assuming you have the charting library, or the charting trial library).

Download the “external” ActionScript methods: This file is what you can use if you want to keep these functions in your library for future use. I put this in the FlexAS.GraphHighlighting package, so if you don’t change the package name you should put this into a “FlexAS/GraphHighlighting/” subfolder off of your main flex directory.

Gmail Super Clean Greasemonkey Script

bill — Mon, 23 Apr 2007 11:13:22 +0000

Customize Gmail

Gmail Super Clean is a Greasemonkey script that renders a cleaner Gmail experience. Aside from the snazzy white interface, it removes the Gmail bookmark links, AdSense ads, tweaks the fonts, and slaps a groovy icon up top.

Gmail Super Clean Options

What’s more, under Tools->Greasemonkey->UserScript Commands, there are options to enable and disable the custom logo, the ads, the Google account bookmarks, change the font and font size. It even gives you the option to use a custom logo image.

Of course, Firefox only, and you must have Greasemonkey installed.

PHP and WordPress SVG Basics

bill — Sun, 08 Apr 2007 01:54:58 +0000

Scalable Vector Graphics, or SVG, is an XML standard for vector graphics (of course). That means that it contains descriptions of shapes, such as rectangles, lines, circles, and text, in an XML format.

SVG provides a robust definition language for drawings. The drawing at the right was a sample SVG drawing included in Jasc’s WebDraw. There are many other examples on the web of complex SVG drawings.

I’ve been playing around with SVG just a bit and thought I’d record the basics of getting simple shapes embedded in a page and how to do it with PHP and in WordPress.

Grant posted an article here a couple years ago on creating SVG Graphs With PHP, so check that out too if you want a more complicated example.

SVG in HTML

The simplest way to get SVG vector drawings in an HTML file is to embed an .svg file. The HTML and SVG source will look something like the following

HTML Code
Circle In A Square

SVG Code
fill="#777" stroke="red" stroke-width="3" />

Output

Circle In A Square

WordPress and SVG

To include an SVG drawing in a WordPress post, simply create and upload an SVG file then put the HTML EMBED tag in your WordPress post.

Basic SVG Tags

There are plenty of exhaustive SVG references on the web, so let’s look at just the tags used above.

svg – This tag indicates the beginning of an SVG drawing. The attibutes used above are width and height, both self-
describing, viewBox which describes a clipping rectangle for the drawing, and xmlns which simply defines the default namespace for
the XML tags used in the drawing.

rect – Here we define the rectangle, with x and y being the upper-left corner, width and height again are obvious, fill
is the rectangle’s color in hex digits, stroke is the color of the line used to draw the outside boundary of the rectangle, and
stroke-width is the width of that line.

circle – This defines the circle. cx and cy determine the center point of the circle, while r is the radius; fill,
stroke, and stroke-width have the same meanings as was used for the rectangle.

PHP SVG

Of course, outputting SVG from PHP requires that you output the SVG source back to the browser. However, PHP output will normally be marked as being of Content-Type: text/html, so you have to do two things to send back SVG:

First, set the Content-Type header to image/svg+xml
Second, make sure your php file does not contain any text outside the script tags.

So, the following PHP generates the above SVG drawing.
$svg = << fill="navy" stroke="red" stroke-width="3" /> END; header("Content-Type: image/svg+xml"); echo $svg; ?>

Mass Comment Reply

bill — Thu, 22 Jun 2006 09:29:20 +0000

We get so much feedback in our comments (I mean sometimes hundreds of comments per day) that I’m just going to reply here. Sorry but I have to clip and edit some of the comments.

peto4o said Best site I see. Thanks. drugs celebrate | nokia 6230 camera phone …

No, thank you peto40. I’m not sure about the rest of your comment, and boy do you have a lot of links!

paspart said Your home page its great. clonespam | renterofmine accepts cod | teen | nokia 6230 covers …

Thanks. I know we can do better, but your comment its encouragement.

health said Hi! Your site appeared very useful to me. Excellent work, thanks.

health, we are happy that we appeared useful to you. Appearance is half the battle. We’ll try to appear even better in the future!

nikeli, most people overlook the cognitive abilities of our site so it came as a pleasant surpise that you picked up on that. And thanks, I appreciate your prognostication! (I’m not sure about all those links in your comment. I didn’t have time to visit them but I’m sure they’re cognitive too.)

cirky, thanks. We try, but it’s people like you who make it worth all the effort! I’m impressed that you use Bookmarks already; it’s an upcoming technology and doesn’t have all the bugs worked out yet. Do you mind sharing your experience with Bookmarks?

Thank you arvilkg, but I think you’re exagerating. We’re not above hyperbole, though. You are the greatest!

peto40, you’re back! Return visitors are the lifeblood of cheap online troma dolls. Swim dolphins indeed!

Thank you jipeto. Thank you thank you. Tell Bob and Alice “hi” from us.

temnota, Sure! Please send some information on your site and we’ll discuss it (I sure hope “dead or alive” isn’t a threat). Can you get those troma dolls?

ppionerk, I’m sorry; we’re all out of the discount loptochopto, but we’ll get more in soon.

We are impressed by successful stories too. Some are really amazing. Have you heard of Gordon Liddy? Pretty amazing guy. Worked his way up, Marine, FBI, White House, etc. etc. Then he had a decent-sized scrape with the law. But, after being released from prison he has worked his way up other ladders.

ssborni, very good comment. Thanks for writer!

Thank you pasty ibex bill.

geroin, I’m sorry but there’s no Jane here. Wrong number?

Sure, utilize! red rover red rover! Land Cruiser FJ 4×4 ! V8 Hemi Carburator Injection! Dog walking! Monkey excitement! GPS Big dog Pampilut. Elderly Monkey prawns!

pastry, thank you but we’re not for sale in the uk. US and Canada orders only.

Thank you so much, nikel. Again. Your cognitive too.

Sefny said http://techrageo.us/, http://techrageo.us/taxonomy/categories/free, http://techrageo.us/taxonomy/categories/hardware, http://techrageo.us/taxonomy/categories/software, http://techrageo.us/taxonomy/categories/windows, http://techrageo.us/taxonomy/categories/programming/php, http://techrageo.us/taxonomy/categories/mapping, http://techrageo.us/taxonomy/categories/programming/javascript …

Sefny, thanks for the links. Something happened and I had to fix them up a bit.

casinox said health.html

No kidding. You’ve really captured it there, casinox. If you don’t have it, you’ve got nothing.

shoppix said Hello, nice site look this: dating1111.html health2222.html computers3333.html careers11111.html finance99999.html End ^) See you

shoppix, thanks for the compliment. Oh, those are nice. Where did you get them?

Micaelel said http://techrageo.us/, http://techrageo.us/taxonomy/categories/microprocessor, http://techrageo.us/taxonomy/categories/linux, http://techrageo.us/taxonomy/categories/mac, http://techrageo.us/taxonomy/categories/tips, http://techrageo.us/taxonomy/categories/best-practices, http://techrageo.us/taxonomy/categories/security, http://techrageo.us/taxonomy/categories/security/encryption…

Micaelel, thanks for the links. Something happened (again) and I had to fix them up a bit (again).

ppionerkuh, uh, okay thanks! Do you like the US or Canadian side? BTW, I think it’s “Niagara.”

Thank you, marvilk. So interesting comment, thanks! What kind of cats do you have?

temnota said Hello Jane, great site! cocoa | cheap Niagra purchase | asian front parts | happy monkey

Hello? No Jane here.

Thanks, paspar. Those wild cats, you never know what they’re going to get into.

Alvintard said http://techrageo.us Windows url=http://techrageo.us link=http://techrageo.us

Indeed, Alvintard.

barryc said So interesting site, thanks! … …

Thank you, barryc. (Sorry but I had to cut the rest of your comment.)

Thank you, and welcome back, paspar.

paspar said I like your site prawn gallery | ringtone | more cats | cod liver oil | garmin gps v…

paspar, you’re a regular, so you should know we don’t have a prawn gallery. Yet! Do your cats enjoy cod liver oil? Oh, the GPS V is pretty old. You should try the Garmin 60CSx — it’s superb.

No Jane. Let me introduce you to temnota.

Kathyann said http://techrageo.us desk3 url=http://techrageo.us link=http://techrageo.us

Yes, I know.

Thanks. Bookmarks rule. I’m learning about them now!

Sigh. Thank you.

thanks paspar.

perroxtox said gooyeti. http://search.yahoo.com/search?p=prawns http://maps.yahoo.com/beta/index.php happy prawns free happy prawns happy prawns star black happy prawns free happy prawns movie free happy prawns video happy prawns video happy male prawns happy prawns movie happy teen prawns happy sapiens prawns happy prawns site free happy prawns pic free happy black prawns free happy prawns clip happy prawns pic happy prawns blog free happy male prawns happy asian prawns happy sax prawns hardcore happy prawns happy…

perroxtox, I don’t know what to say, except that you must love your prawns. gooyeti?

kickatoxa, thank you. Impression is nine tenths, you know. Have you met perroxtox?

paris france video said hilton hotels movie. body paint big cats. prawn photo asian macro black advice. Cheerleaders striping in college.

paris france video, is the movie to sell conference space, or just marketing to folks travelling? I am not sure I understand the next sentence, but I think some of the players in Cats must have had some body paint, but mostly I’d think it was actual costumes. Closeups of prawns on a black backdrop might be okay, but make sure the lighting is right. If you’ve got asian lenses, use them; otherwise, use what you’ve got. Cheerleaders do a lot of things, but I thought striping is usually done by road crews…?

tixbix said tight bum. phantom of the opera movie. bum. music videos …

tixbix, “bums” are tight because they don’t have money. Don’t you see them asking for loose change, a buck, or all your money? It’s because they’re down on their luck and need money for booze and drugs. Instead of walking by them, next time take a “bum” to the PotO movie with you. Or put them in your music videos.

big chest round bum said big chest round bum. hollywood torture…

Hi, big chest round bum (is that like Dances With Wolves?). I agree — most of what comes out of Hollywood is torture. You can just not go see the movies and not watch them on the TV. Send a message.

girlmode tongs said girlmode tongs. cat prawn gallery magick…

girlmode tongs, do you cook? Wow, that sounds like an exciting show!

jujucat said redhead prawns rooster cats…

jujucat, that’s amazing. Thanks for sharing.

ppioner said I like your site. Granny prawn pics…

Thanks, ppioner. You should put up a flickr gallery.

kipetoe said Your home page its great. Mature Grannies…

Thank you so much, kipetoe.

Again, we granny really just want thank you all you folks take time comment. It mean alot to us really make it all worth it to author. Applejacks monkeyshine rascal fisherfax. Pfestive massive master tunky Enjoy!!! Cat granny dog rooster. Horse dolphonic shippy fun.

Creating a Drag and Drop Schedule For Your Web Application

grant — Tue, 09 Aug 2005 19:14:29 +0000

If you are creating a web application and you need to have the ability to schedule resources (people, machines, Precious Moments figurines, etc) it can sometimes be a cumbersome task. With this drag and drop schedule you won’t have to worry about the end user making typos in an html form and causing more trouble for you later.

Let’s start off by putting the obvious header information along with some javascript variables that we will use later:

Test Schedule

The next thing our page needs is some style. We need a class for our floater objects, for consistancy. Most of this is just fluff, the ‘position’ is the only essential part.

When declaring the ‘body’ element we need to make sure that it runs the setCoords() function each time the mouse moves, so we will know where the pointer is if we are moving an floating object.

Next, we are going to create a nice background for our x and y axis.

Now let’s put some times along the top of the page on the x-axis. You’ll probably want generate these out of a database, but to show you how it is done we will just use static html.

8:00AM

9:00AM

10:00AM

11:00AM

12:00AM

1:00AM

2:00AM

3:00AM

4:00AM

We need to create the y-axis labels now. Again, you’ll probably generate these values from a database but for our example we’ll just use assume we are scheduling “work stations”.

Work Station 1

Work Station 2

Work Station 3

Work Station 4

Finally (at last!) we can create the actual floating objects. We are going to make these all a different color (and all pastel at that). These you would definitely want to generate from a database…else the purpose of this article is probably lost on you. Our object needs to run the setMover() function when it is clicked and it needs to run the unSetMover() function when that click is released (when it is ‘dropped’). If you are scheduling people you can even put a thumbnail image in these floaters so that the end user will really feel at home–pushing around his/her co-workers.

You’ll notice that the third floater does not restrict the movement at all, the user can move it up, down, left and right. This should give you an idea of how movements can be done.

Order 1991-01A
Shearer, Grant

Order 2491-01A
Dummy, Test

Order 1431-01A
Smith, Bob

Order 2236-09A
Springer, Jerry

Order 3507-00
Simpleton Sr, Gary

Order 3567-00
Simpleton Jr, Gary

Order 3337-00
Jingleheimer, Jerry

Order 5507-00
Simpleton Sr, Gary

Order 8456-00
Simpleton Jr, Gary

Order 4321-00
Jingleheimer, Jerry

The ending. The iframe and it’s contents are only needed if you plan on updating your database every time the user “drops” one of the floating objects.

See it in action
(To use the code, just click on “See it in action” and save the page from there)

Some of the css used in the code above does not work in all browsers. The opacity property, for instance, does not appear to work in Internet Explorer. YMMV.

del.icio.us Javascript Linkrolls

bill — Fri, 05 Aug 2005 20:40:33 +0000

del.icio.us now provides linkrolls via javascript.

All you have to do to use it is copy the following script to your editor (it’s all one line, so remove any line breaks):

Then adjust the querystring to your needs as follows

Modify “techrageo.us” to whoever’s del.icio.us links you want to monitor
Modify “tech” to filter by a certain tag, combine them with “+” as in “tech+diy”, or remove the “/tech” altogether to not filter by tags.
extended — include “extended” if you want to see the extended text for each link
tags — include “tags” if you want to see the tags for each link
count — include “count” if you want some number of links displayed besides the default (20, I believe)
title — include “title” if you want del.icio.us to add a title, or simply remove the title portion of the querystring
bullet — include “bullet” and set it to a character if you want a bullet displayed before each link
icon — include “icon” if you want the del.icio.us icon to appear, or remove it for no icon.
sort — include “sort=alpha” if you want the links to be sorted alphabetically. If the sort key is not included, the default is to list the links chronologically.
Drop the resulting script into your web code where you want the links to appear
del.icio.us delivers the link feed inline

Kind of snazzy.