Tuesday, October 18, 2005

The Dynamic SRC of IMG

Forta's post, Serving Images From Databases, about changing the SRC attribute on IMG dynamically to get image directly from database rather than a static SRC, has been quite active even though the post was dated on June 6, 2005. I'm still receiving comments from thread to date, this is probably the longest running post.

What intrigues me about the post is not about serving directly images from database, it's the use of dynamic SRC on IMG that I find fascinating. Recently, I need to integrates charting on project, and I wanted charting engine that's simple to setup and fast to render, OWTChart comes to my mind. I've used OWTChart prior to ColdFusion 5, I find OWTChart a superior CGI charting engine, and to set up and use the engine takes no more than 2 steps:
1. Dropping the OWTChart CGI program to CGI path of Web server
2. Pass an URL to OWTChart to get a streamed chart.

Combine OWTChart with dynamic SRC on IMG, you get an easy and yet powerful charting solution: no Applet, no Jar, no server-side coding, just plain Javascript to drive the charts. Here a sample usage to get a line chart:

var chartWidth = "600";
var chartHeight = "374";
var chartPath = "http://server/cgi-bin/owtchart.exe";

function getChartPath() {
return chartPath;

// util functions for OWTChart
function getLineChart(chartType,chartWidth,chartHeight,values,labels) {
return chartPath + "?Type=" + chartType + "&W=" + chartWidth + "&H=" + chartHeight +
"&NumSets=1&NumPts=" + values.split(",").length +
"&Vals=" + getLineChartValues(values) + "&xlabels=" + getLineChartXLables(labels);

function getLineChartValues(values) {
var aValues = values.split(",");
var chartValues = "";
for (var n = 0; n < aValues.length; n++) {
chartValues += aValues[n];
if (n < aValues.length - 1) {
chartValues += "!";
return chartValues;

function getLineChartXLables(labels) {
var aLabels = labels.split(",");
var chartLabels = "";
for (var n = 0; n < aLabels.length; n++) {
chartLabels += aLabels[n];
if (n < aLabels.length - 1) {
chartLabels += "%3B";
return chartLabels;
// end util functions

function getChart() {
var chartType = "Line";//"3DLine";
var myChart = document.images["myChart"];
myChart.height = parseInt(chartHeight)+50;
myChart.width = parseInt(chartWidth)+30;
document.getElementById("chartArea").style.display = "block";

<div id="chartArea" style="display: none">
<img id="myChart" name="myChart" src=""/>

Now now that you need is to call getChart() to get a line chart from OWTChart, and the chart is rendered on myChart IMG. Simple as pie!
Software Culture
  03/01/2004 - 04/01/2004
  05/01/2004 - 06/01/2004
  07/01/2004 - 08/01/2004
  08/01/2004 - 09/01/2004
  09/01/2004 - 10/01/2004
  10/01/2005 - 11/01/2005
  Smart talk always right?
  Drools on AppFuse
  Braille, braille
  The Dynamic SRC of IMG
  Preferred Locale on AppFuse
  告訴你為什麼程式不 work
  絲綢之路 2000:致命病毒
  AJAX on AppFuse
  Meet Mr. Writely
  健檢, e檢
  Open source ColdFusion
  Rich DHTML client
  cfspring, seriously
  Where are they?
  An Architect's View
  Martin Fowler
  Loud Thinking
  Raible Designs   fullasagoog

Powered by Blogger