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!


Anonymous Anonymous said...

^^ 謝謝你的分享,祝你生活永遠多彩多姿!.........................

10:28 AM  
Anonymous Anonymous said...


6:32 PM  
Anonymous Anonymous said...


8:59 PM  
Anonymous Anonymous said...


I keep coming to this website[url=http://www.weightrapidloss.com/lose-10-pounds-in-2-weeks-quick-weight-loss-tips].[/url]Plenty of useful information on coldfusion-lifeasastruct.blogspot.com. I am sure due to busy scedules we really do not get time to care about our health. Let me show you one truth. Research presents that nearly 70% of all USA grownups are either chubby or overweight[url=http://www.weightrapidloss.com/lose-10-pounds-in-2-weeks-quick-weight-loss-tips].[/url] So if you're one of these people, you're not alone. In fact, most of us need to lose a few pounds once in a while to get sexy and perfect six pack abs. Now the question is how you are planning to have quick weight loss? [url=http://www.weightrapidloss.com/lose-10-pounds-in-2-weeks-quick-weight-loss-tips]Quick weight loss[/url] is really not as tough as you think. If you improve some of your daily diet habbits then, its like piece of cake to quickly lose weight.

About me: I am blogger of [url=http://www.weightrapidloss.com/lose-10-pounds-in-2-weeks-quick-weight-loss-tips]Quick weight loss tips[/url]. I am also health trainer who can help you lose weight quickly. If you do not want to go under painful training program than you may also try [url=http://www.weightrapidloss.com/acai-berry-for-quick-weight-loss]Acai Berry[/url] or [url=http://www.weightrapidloss.com/colon-cleanse-for-weight-loss]Colon Cleansing[/url] for quick weight loss.

10:00 AM  

Post a Comment

<< Home

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