How to Create a Chart with HTML/CSS/ASP/AJAX Part 1(JavaScript timer and AJAX call)

Recently I worked with a client who had purchased software for creating real-time graphs and charts. They had the software provider build them several charts that displayed the real-time data and they needed some thresholds on the data. The software only provided thresholding on their 3d objects, but not on the 2d. After using the reports for about 3 weeks, they decided that the 3d objects were not working for them. This is when they called me and after looking at the software we decided to completely replace it and provide a custom solution using the real-time data engine, HTML, CSS, ASP, and AJAX. Below is what we came up with, but you could make it look better by creating some image files to build the bars rather than just changing the background color.

To begin with, we need to create an HTML page or you could use any extension you would like. This is going to be the page the content is displayed on. Later in the article we will build a ASP page that generates the chart and is called using AJAX from the main page. I will not go into all of the details of creating a page and the entire layout, but rather focus on the items related to the chart.

mainpage.asp

The first thing I needed to do was to build a javascript timer to execute the AJAX calls every 10 seconds.

var timerID = 0;
var startTime = null;

// this is called from the body onload event
function StartTimer(){
    startTime = new Date();
    // i needed to call the javascript function that calls the chart script
    this.getChart();
    // This sets the timer to call updatetimer function and sets the timeout for 10 seconds
    timerID = setTimeout("UpdateTimer()", 10000);
}

// it is good practice to clean up after ourselves.
// this will stop the timer and clean up. call this from the body unload event.
function StopTimer(){
    if (timerID){
        clearTimeout(timerID);
        timerID = 0;
    }

    startTime = null;
}

Now we have have a timer that calls getChart every 10 seconds. Now we need to be able to make the AJAX calls, therefore we instantiate XmlHttpRequest object. This customer only uses IE, though users have different versions, so I only needed to handle versions of IE. I most instances, you will need to check other browser types as well.

var XmlHttp;
function getXmlHttpObject(handler){
    var XmlHttp = null;
    if(navigator.userAgent.indexOf("MSIE") >= 0){
        var xmlName = "Msxml2.XMLHTTP";
        if(navigator.appVersion.indexOf("MSIE 5.5") >= 0){
            xmlName = "Microsoft.XMLHTTP";
        }
        try{
            XmlHttp = new ActiveXObject(xmlName);
            XmlHttp.onreadystatechange = handler;
            return XmlHttp;
        }catch(e){
            alert("Error. Scripting for ActiveX might be disabled.");
            return;
        }
    }
}

We are now ready for our getChart handler. For this instance, I used the GET method but you could just as easily use the POST method as well.

function getChart(){
    var url = "generatechart.asp";
    xmlHttp = getXmlHttpObject(processChart);
    xmlHttp.open("GET", url, true);
    // this next is not required, but in  the past
    // i have had issues with getting stale content
    xmlHttp.setRequestHeader("If-Modified-Since","Sat, 1 Jan 2000 00:00:00 GMT");
    xmlHttp.send(null);
}

The final thing we need to do is process the results. In the handler, you should have noticed the getXmlHttpObject(processChart). That calls the following function to deal with the return from the server call.

function processChart(){
    if(xmlHttp.readyState==4 || xmlHttp.readyState=="complete"){
        document.getElementById("charts").innerHTML = xmlHttp.responseText;
    }
}

This was a very basic example of making AJAX calls and processing the results. The requirements for this project did not call for anything extremely advanced, so I kept it very simple (K.I.S.S.). In the second part, we will be building the ASP page that generates the chart.