The Web Hit Counter Demo Explained

Introduction

The web hit counter demo is an illustration of how rChart can be used to display real-time results from a web hit counter. By real-time, we mean that the data being charted is current as of the reference to the chart page; each time a user revisits or reloads the page, the chart will reflect any updates to an underlying database which have occurred since the last visit or page load.

The web hit counter demo illustrates several key features of the server component, including use of parameterized queries, text substitution, drill-down linking, and streaming output.

To understand this example, the reader should be familiar with asp programming, and have at least a basic understanding of SQL. Also, familiarity with MS Access would be helpful to examine the demo in detail.

The web hit counter demo is located in the Samples\WebCounter folder of the rChart installation. There are shortcuts to the chart workspaces and readme file under rChart|Samples|Web Counter on the Start menu.

Demo Components

The complete web poll demo consists of the following key elements:

A database which contains the data to be charted
A chart workspace file which describes all aspects of the chart, plus information about the data to be charted (in this case, two workspaces: daily-site-hits.fcw, and hourly-site-hits.fcw)
An ASP page which uses the rChart server component to construct a chart (in this case, two pages: daily-site-hits.asp and hourly-site-hits.asp)

Additionally, the demo includes some other pages to add information to the database and provide a complete working example. These pages use the standard ADODB component.

Functional Overview

The Database (rChartHitLog.mdb)

The poll database contains only one table: HitLog. One row in this table represents one page hit. The database also contains two queries based on HitLog, which rChart uses as if they were tables:

RecentHits - this query summarizes HitLog information into total hits and date for each of the past 14 days.
RecentHourlyHits - this query summarizes HitLog information into total hits, date, and hour of day for each hour of the past 14 days

hitlog.asp

This file is intended to be included at the top of each page the hit counter is to track. Typically, you might add a line like:

This basically adds a row to HitLog each time it is referenced. It does a few other interesting things too, in order to collect meaningful traffic activity, such as use a cookie to indicate unique visits, and capture other interesting information about the client computer. Beyond adding a timestamped row to HitLog, none of this activity is relevant to the charting demonstration.

hit_counter_demo.asp

This is the "home" page for the hit counter demo. All this page does is provide the means to accumulate hits in the database, and offers a link to daily-site-hits.asp.

daily-site-hits.asp

This page displays results from HitLog as a bar graph summary of daily page hits for the past 14 days (one bar per day).

hourly-site-hits.asp

This page displays results from HitLog as a line/point graph summary of hourly page hits for a given date (one point per hour).

daily-site-hits.fcw

This rChart workspace defines a bar graph. To obtain its data, it simply uses the query RecentHits.

hourly-site-hits.fcw

This rChart workspace defines a chart which contains two plots (a line plot and a point plot), both of which draw from the same data in order to produce a more interesting result.

It uses the User1 substitution parameter (%1) in the title so that part of the title can be supplied externally. It uses the following parameterized query for obtaining its data:

SELECT HourOfDay&':00' As Hour,HitCount FROM RecentHourlyHits Where Date=#:A# Order By HourOfDay

How It Works

When daily-site-hits.asp is invoked, it creates an instance of the rChart server, loads the appropriate chart workspace (daily-site-hits.fcw), triggers the data refresh, and tells rChart to stream to the browser. Although this script attempts to pass information from the request querystring into the chart object, none of it actually gets used in this example.

The chart template for daily hits (daily-site-hits.fcw) has the following URL associated with the bar plot:

hourly-site-hits.asp?A=%c&User1=%c

When the chart is rendered, each bar will become a hotspot (clickable link), with a date (the "category name") substituted in to the URL where "%c" appears.

For example: if one of the bars was for the date 30-Apr-2003, it will become a hotspot linked to:

hourly-site-hits.asp?A=30-Apr-2003&User1=30-Apr-2003

If the user clicks on one of the bars, they will be taken to hourly-site-hits.asp, and another chart will be displayed for a specific date.

When hourly-site-hits.asp is invoked, it:

Creates an instance of the rChart server
Loads the appropriate workspace (hourly-site-hits.fcw)
Supplies appropriate values to the chart's User1 and query parameter A. When the chart is rendered, the contents of User1 is substituted into the chart's title (replaces %1). Using the above example, the chart's title of "(North American Eastern Time, %1)" will become "(North American Eastern Time, 30-Apr-2003)". Also, the contents of parameter A are substituted into the query.
Triggers a refresh of the chart's data. Using the above example, rChart will execute the following query:

SELECT HourOfDay&':00' As Hour,HitCount FROM RecentHourlyHits Where Date=#30-Apr-2003# Order By HourOfDay
The script calls the rChart server component's CreateSWFStream method, which tells it to render the chart and stream it directly to the browser.
Finally, the script does some cleanup

Note that aside from using the rChart streaming method, this page does nothing with the response stream, as it would come into conflict with the action of CreateSWFStream.