XML Data Driven CSS Charts
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.
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:
-
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%; }
Colors
We are going to create a few generic colors that we will offer as options for the bar colors.
-
.green { background-color:#009900; }
-
.lghtGreen { background-color:#8fad53; }
-
.lghtOrange { background-color:#CC9900; }
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.
-
<graphData>
-
<graph>
-
<params>
-
<title>Chart Title</title>
-
<xAxis>Various Units</xAxis>
-
<yAxis>Complete</yAxis>
-
</params>
-
<values>
-
<set name=Unit 1 value=95 color=green />
-
<set name=Unit 2 value=75 color=lghtGreen />
-
<set name=Unit 3 value=50 color=lghtBlue />
-
<set name=Unit 4 value=25 color=blue/>
-
<set name=Unit 5 value=10 color=purple/>
-
<set name=Unit 6 value=35 color=lghtGrey/>
-
</values>
-
</graph>
-
</graphData>
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.
-
<%
-
-
If graphTitle "" Then
-
stringBuffer = "<dt>Chart Title</dt>"
-
stringBuffer = stringBuffer & "<dd>" & vbCrLf
-
If graphTitle "" Then stringBuffer = stringBuffer & "<h3>" & graphTitle & "</h3>" & vbCrLf
-
stringBuffer = stringBuffer & "</dd>" & vbCrLf
-
End If
-
stringBuffer = stringBuffer & "<dd>" & vbCrLf & "<dl>" & vbCrLf
-
stringBuffer = stringBuffer & "<dd></dd>" & 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 & "<dd>" & vbCrLf
-
-
If setName ""
-
Then stringBuffer = stringBuffer & vbTab & "<strong>" & setName & "</strong>" & vbCrLf
-
-
If setValue ""
-
Then stringBuffer = stringBuffer & vbTab & "<span><em>" & setValue & "%</em></span>" & vbCrLf
-
stringBuffer = stringBuffer & "</dd>" & vbCrLf
-
onFirst = false
-
-
Next
-
stringBuffer = stringBuffer & "</dl>" & vbCrLf & "</dd>" & vbCrLf
-
response.Write(stringBuffer)
-
-
%>
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.
-
<!-- #include file="xmlChartParser.asp" -->
-
<% Call CreateGraph("xmlData.xml ") %>
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
Want an avatar? Get a gravatar! • You can link to this comment
Great article thanks for the insight!!!
Want an avatar? Get a gravatar! • You can link to this comment
Thank you Mr.Palacios for your very informative info on CSS charts. You were right to express how we feel about them WHAAA!!! I followed your advice and technique and am on my way to successful charting. I hope we can continue to see articles from you in other areas.
Thanks again,
Karen
Want an avatar? Get a gravatar! • You can link to this comment
Great article, I am updating my charts as we speak… It is time for a change and with these changes I will rule the world!