XML Data Driven CSS Charts? Whaaa!!!

No its not crazy talk. CSS Charts are possible nowadays and they can even be semantically correct. Let’s say you already have started using CSS based charts on your site. Wouldn’t it be nice if the CSS charts were update able via an XML file. You are in the right place! This technique is going to show you how to make accessible charts that are scalable and easy to update.

The Basic Structure Markup

Below you will find the basic structure for the chart. I used a definition list since it does a great job of showing relation between values. You could also use list items, but I didn’t like the way it looked semantically.

[html]

Chart Title

Unit 195%

Unit 275%

Unit 350%

Unit 425%

Unit 510%

Unit 635%

Various Units

[/html]

Style that Chart!

I am not going to go into a lot of detail about each part of the CSS. The basic structure is pretty straight forward and doesn’t require you be a brain surgeon. Please see the CSS file located in the source zip at the end of the post. I am however going to talk about some of the CSS that controls the height and color.

Heights

The height of the bars in this tutorial are controlled by CSS so it is required that you create classes for the various heights so the XML parser can associate. I create the heights in 5% increments, you can changed to whatever you want.

Here is a snippet of the heights:

[css]
dl.xmlGraph.vertical dd dl dd span.h5 { height:5%; }
dl.xmlGraph.vertical dd dl dd span.h95 { height:95%; }
dl.xmlGraph.vertical dd dl dd span.h100 { height:100%; }
[/css]

Colors

We are going to create a few generic colors that we will offer as options for the bar colors.

[css]
.green { background-color:#009900; }
.lghtGreen { background-color:#8fad53; }
.lghtOrange { background-color:#CC9900; }
[/css]

The Data Structure

Now lets get into the meat of this technique. The data! As you already know the data is going to be stored in an XML file. Below is the generic structure.

[html]


Various Units
Complete









[/html]

The Data Parser

This is where the technique really starts to come together. We now start utilizing both the XML file and CSS selectors to achieve our goal…data driven charts! Below is a snippet of the parser so you can get an idea of what were trying to do and get the basic jist of things. The full files will be available at the end of this article so you can dissect.

[code]
<%

If graphTitle “” Then
stringBuffer = “

Chart Title

”
stringBuffer = stringBuffer & “

” & vbCrLf
If graphTitle “” Then stringBuffer = stringBuffer & “

” & graphTitle & “

” & vbCrLf
stringBuffer = stringBuffer & “

” & vbCrLf
End If
stringBuffer = stringBuffer & “

” & vbCrLf & “

” & vbCrLf
stringBuffer = stringBuffer & “

” & vbCrLf

Dim params
Set params = graphXML.selectNodes(“//params”)
Set sets = graphXML.selectNodes(“//set”)

x = 0

For each valset in sets
If x = 0 Then
classAttribute = ” class=””first”””
ElseIf x = (sets.length – 1) Then
classAttribute = ” class=””last”””
Else
classAttribute = “”
End If

x = x + 1

Set attribs = valset.attributes
setName = “”
setValue = “”
setColor = “”
For each attrib in attribs
If attrib.name = “name” Then setName = attrib.text
If attrib.name = “value” Then setValue = attrib.text
If attrib.name = “color” Then setColor = attrib.text
Next
stringBuffer = stringBuffer & “

” & vbCrLf

If setName “”
Then stringBuffer = stringBuffer & vbTab & “” & setName & “” & vbCrLf

If setValue “”
Then stringBuffer = stringBuffer & vbTab & “” & setValue & “%” & vbCrLf
stringBuffer = stringBuffer & “

” & vbCrLf
onFirst = false

Next
stringBuffer = stringBuffer & “

” & vbCrLf & “

” & vbCrLf
response.Write(stringBuffer)

%>
[/code]

Keep in mind that it’s always a good idea to have error handling in place to handle any kind of exception that can occur. I didn’t include in code snippet due to space constraints, plus I didn’t want to bore you guys.

The Final Product

This is how you would structure your ASP page to finally bring all the elements together. Just by calling the ASP file in as a file include then reference the below code in the body.

[html]

[/html]

[html]
<% Call CreateGraph("xmlData.xml ") %>
[/html]

Below I created an example page utilizing the techniques discussed in this article. I have also attached the source file so you can rummage through the code. I am always open to new methods…drop me line and well discuss.

Happy charting!!!

DEMO: view page

Source Files: download