Scalable Vector Graphics (SVG) Charts v1.24

This version of SVGChart is an enhanced version originally written by: Paul T. Walchli (web: home.att.net/~p.walchli/ email: p.walchli@att.net). Paul released a very good demo of creating charts with SVG and ASP. What I have done is taken his code and made it reusable (plug the SVG object into any .ASP page - to call the reusable page, supply the data, and it will do everything else for you).

I have not re-written a great deal of Paul's original code, just hacked it about so that it will accept all data and configuration info from it's QueryString. I have also changed the colouring and formatting and fixed a few issues. There is still plenty to be done yet and this code isn't clean yet, (some dead code and possibly a few more display bugs) but at this point it is fully functional and the charts look fantastic.

Things still requiring attention in future versions: More error checking; Bezier curves in the Line chart; different shaped data points in the Line chart; vertical bars in the bar chart.

See SVGDemo.asp for a full demo.

Usage

<object type="image/svg+xml" data="SVGChart.asp?ChartType=_&Width=_&Height=_&ChartName=_&XName=_&YName=_&DataElement1=_&SeriesName1=_&SeriesData1=_" width="_" height="_"></object>

where _ is an appropriate value (see Variables below).
In ASP, this would appear as (with sample dummy data):

ChartWidth = 500
ChartHeight = 350
strQueryString = "ChartType=Bar" & _
    "&Width=" & ChartWidth & _
    "&Height=" & ChartHeight & _
    "&ChartName=Bar Chart Test" & _
    "&XName=Calls" & _
    "&YName=Month" & _
    "&DataElement1=Jan&DataElement2=Feb&DataElement3=Mar&DataElement4=Apr&DataElement5=May" & _
    "&SeriesName1=series1&SeriesName2=series2" &_
    "&SeriesData1=13,43,16,10,44" & _
    "&SeriesData2=43,16,10,44,13"
Response.Write ("<object type=""image/svg+xml"" data=""SVGChart.asp?" & strQueryString & """ width=""" & ChartWidth & """ height=""" & ChartHeight & """></object>")

or if you where supplying the data from a temporary array (because you've probably done all the calculations in ASP from a data source like a database) your code could look something like this:

ChartWidth = 500
ChartHeight = 350
strQueryString = "ChartType=Line" & _
    "&Width=" & ChartWidth & "&Height=" & ChartHeight & _
    "&ChartName=Event Summary" & _
    "&YName=Events"
if ColumnInc = 1 then strQueryString = strQueryString & "&XName=Days"
if ColumnInc = 7 then strQueryString = strQueryString & "&XName=Weeks"
for DateColumn = 1 to TotalDateColumns
    strQueryString = strQueryString & "&DataElement" & DateColumn & "=" & Dates(0,DateColumn)
next
for DataRow = 1 to TotalDataRows
    strQueryString = strQueryString & "&SeriesName" & DataRow & "=" & RowLabels(DataRow)
next
for DataRow = 1 to TotalDataRows
    strQueryString = strQueryString & "&SeriesData" & DataRow & "="
    for DateColumn = 1 to TotalDateColumns
        strQueryString = strQueryString & OutputQty(DataRow,DateColumn) & ","
    next
    strQueryString = left(strQueryString,len(strQueryString)-1)
next
response.Write ("<p><object type=""image/svg+xml"" data=""SVGChart.asp?" & strQueryString & """ width=""" & ChartWidth & """ height=""" & ChartHeight & """></object>")

Variables

ChartType
Valid case sensitive types are: Line , Bar , and Pie

Width
Total pixel width of the chart. 400 to 500 is a good size. This must be the same value as the width in the object tag.

Height
Total pixel height of the chart. 300 to 400 is a good size. This must be the same value as the height in the object tag.

ChartName
The text to appear at the top of the chart.

XName
Line and Bar charts only.
Text to appear on the X-Axis of the graph.

YName
Line and Bar charts only.
Text to appear on the Y-Axis of the graph.

DataElementx
For Line and Bar charts, there may be as many elements as you wish. (But don't get too carried away). Pie charts must only have 1 DataElement. Declare each as DataElement1, DataElement2, and so on. The number of elements MUST match the number of elements (numbers) listed in each SeriesDatax item. In the above example, there is DataElement1 through to DataElement5. There are also 5 numbers listed in each SeriesDatax.

SeriesNamex
Line and Bar charts only.
You can have as many Series as you wish. But don't get too carried away - the chart will get complex very quickly. If the number of SeriesNamex's must match the number of SeriesDatax's.

SeriesDatax
Pie charts must be have only one SeriesDatax (SeriesData1). The number of SeriesDatax items must be the same as the number of SeriesNamex's.
Values must be separated by commas. The quantity of values in the SeriesDatax must be the same as DataElementx's.
Any negative values passed to a Pie chart will become absolute.
Countries that use commas as a decimal separator must change it to a period "." or remove the LCID setting in the Chart engine and change the Split delimiter to something else.

Colours
If you wish to change any colours or anything else, see the top of the SVGChart.asp file.

Debugging

There is not a great deal of error trapping implemented, so be careful about what data is passed through the data parameter. Here are some bugging tips:

To see these charts, a Scalable Vector Graphics viewer plugin must be installed into your browser.
Free plugins are available from many sources including Adobe and IBM.

If you improve this code, please send me a copy! Thanks!

Hunter Beanland
hunter @ beanland.net.au
http://www.beanland.net.au/programming/dotnet/

Version History
1.24 Pie Chart: Fixed adding total of values, reduced some of the font sizes
1.23 Line Chart: Fixed bottom ranging being 1 increment too low
1.22 Line Chart: Fixed ranging of the Y axis, spacing of X axis, & display of last element
1.21 Added LCID = US as the code doesn't read international decimal separators well. (Thanks to Thor Schliemann)
1.2 First version. Previous versions by Paul T. Walchli