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:

<script>
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;
   myChart.src=getLineChart(chartType,chartWidth,chartHeight,
some_y_value_list,some_x_value_list);
        document.getElementById("chartArea").style.display = "block";
        scroll(0,parseInt(chartHeight)*1.5);
}
</script>

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

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! 
¶ 10:25 AM comments(1)