Every once in a while you need to get to an XML element that is tucked within some namespace or another, but you really are not in the mood to deal with namespaces. You really don’t want to mess with XmlNamespaceManager or its ilk; or maybe you only have XPath to work with.

When this comes up, it usually takes me a few moments to remember, but the magic is the local-name() function.

XML

<gw:bookstore xmlns:gw="http://www.moonbats.com/gw">
	<gw:book>
		<gw:title>Warming Up To The New Ice Age</gw:title>
		<gw:author>A. Nother Lemming</gw:author>
	</gw:book>
	<gw:book>
		<gw:title>The Sky Is Falling</gw:title>
		<gw:author>Chicken Little</gw:author>
	</gw:book>
	<gw:book>
		<gw:title>Glaciers Will Burn Us All</gw:title>
		<gw:author>Chicken Little</gw:author>
	</gw:book>
	<gw:book>
		<gw:title>Data: A Cookbook</gw:title>
		<gw:author>Grant Me Money</gw:author>
	</gw:book>
</gw:bookstore>

XPath

//*[local-name()='title']

This basically says to select any element where the local name, i.e. the element name minus the namespace, is equal to ‘title’.

This can be extended with other XPath functions. In the following example we want to get the titles of books by Chicken Little.

//*[ local-name() = 'title' and (../*[local-name() = 'author'
	and contains( text(), 'Chicken Little' ) ]) ]

Here we’re selecting elements with a local name of ‘title’ and a sibling element named author and where that sibling’s value contains ‘Chicken Little’.

This syntax is not as convenient as something like /*:title, but at least it does the trick.

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:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns="*"
  xmlns:local="*" xmlns:view="view.*">
 
<mx:Script>
  <![CDATA[
    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 } ]);
  ]]>
</mx:Script>
 
  <mx:Panel x="10" y="10" width="100%" height="100%" title="Profit By Period">
 
    <mx:PieChart id="profitPie" dataProvider="{profitPeriods}" showDataTips="true" width="100%" height="100%">
      <mx:series>
        <mx:PieSeries field="profit" nameField="period" labelPosition="callout" showDataEffect="{interpolate}" />
      </mx:series>
    </mx:PieChart>
  </mx:Panel>
</mx:Application>

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.

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

<html>
<body>
Circle In A Square<br/>
<embed width="100" height="100" src="/wp-content/code/phpsvg1.svg"/>
</body>
</html>


SVG Code

<?xml version="1.0"?>
<svg width="100px" height="100px" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="50" height="50"
fill="#777" stroke="red" stroke-width="3" />
<circle cx="16" cy="16" r="8" fill="black" stroke="yellow" stroke-width="3"/>
</svg>


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.

<embed width="100" height="100" src="/wp-content/code/phpsvg1.svg"/>


Basic SVG Tags

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

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:

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

So, the following PHP generates the above SVG drawing.

<?php
$svg = <<<END
<?xml version="1.0" standalone="no"?>
<svg width="100px" height="100px" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<rect x="10" y="10" width="50" height="50"
fill="navy" stroke="red" stroke-width="3" />
<circle cx="16" cy="16" r="8" fill="black" stroke="yellow" stroke-width="3"/>
</svg>
END;
header("Content-Type: image/svg+xml");
echo $svg;
?>