• Home
  • About
  • Contact
  • Advertise

Devlounge

Design, Develop, and Grow

  • Home
  • Code
  • Design
  • Design Focus
  • Interviews
  • Publishing
  • Strategy
  • Webapps
  • Extras

Cool Tools for Creative Blog Content

June 8, 2014 By Noemi

designing blogs

Creating a blog is fast and easy today. Even with little or no background graphic designing or web developing, one can still be able to make an attractive blog with a great potential to drive traffic moving forward.

With the numerous free design tools available online these days, there’s every opportunity to build a blog suited to your personal preference. It just takes a little patience and resourcefulness and soon, you’ll be on your way to creating a great looking and interactive blog.

Depending on the type of content you want to add to your blog and blog posts, there are various applications you can use with a little investment or some, without having to spend a single cent. We share some of them here to help you build your dream blog. [Read more…]

XML Data Driven CSS Charts

October 23, 2008 By Nicholas Palacios

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]

Chart Title
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

Code & Tutorials

Which Front-End Development Languages Will Grow in 2017?

Your Guide to Leveraging APIs as a Developer

Bitcoin Processing Website Integration For Web Developers

Website Security For 2016 That All Developers Need To Know

5 Reasons You Need to Be Using jQuery

About Devlounge

Want to read more about Devlounge, or maybe you want to contact us, or even advertise? Oh, and don't forget to subscribe to updates!

The Best of Devlounge

Vectr: a free graphics editor on your desktop and in the browser

Search