<$BlogRSDURL$>
  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:

<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!
 
Software Culture
ColdFusion
  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
  1918
  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
Home


Powered by Blogger