Creating Dynamic Bar Charts
---------------------------
Please Note that this is one of three tutorials
included in the Women Application that i created
that can be seen in action at
http://webdev.webleicester.co.uk/test/women/
and is freely downloadable here
http://webdev.webleicester.co.uk/test/women.zip
Quick Version:
--------------
The women application has a list of women where it records the amount of times the page
has been viewed, with the ability to vote from 1 to 5, has average votes, and total amount of votes
what we are going to do is to create a dynamic list of each woman and have a tick box next to each, then at the end, a selection
box which will allow us to select what it will be judged as either The average score on the votes, OR the total amount of hits
to begin with we have this
index.cfm
---------
<html>
<head>
<!--- Get all of the data required using Relationships --->
<cfquery name="GetWomen"
datasource="#application.dsn#">
SELECT *
FROM women, votes, category, nationality
where (women.id = votes.Woman_id)
AND (women.cat=category.cat_id)
AND (women.nat=nationality.nat_id)
</cfquery>
<title>Women Stats</title>
</head>
<body><div align="center"><center>
<table border="0"
cellpadding="0"
cellspacing="0"
style="border-collapse: collapse" bordercolor="#111111"
width="806"
height="51"
id="AutoNumber1">
<tr><td width="685"
height="20"
colspan="6"
bordercolor="#000000"
bgcolor="#C0C0C0">
<p align="center"><b><font
face="Verdana"
size="2"
color="#800080">WOMEN STATS</font></b></td></tr>
<!--- this will set all our headers --->
<tr>
<td width="21" height="4"
align="center"></td>
<td width="123"
height="4"
align="center">
<b><font
face="Verdana"
size="2">Name<br></font></b>
</td>
<td width="115" height="4"
align="center">
<b><font
face="Verdana"
size="2">Page Views<br></font></b>
</td>
<td width="171"
height="4" align="center">
<b><font
face="Verdana"
size="2">Numbers of Votes<br></font></b>
</td>
<td width="154"
height="4"
align="center">
<b><font
face="Verdana"
size="2">Average Score<br></font></b>
</td>
<td width="100"
height="4"
align="center">
<b><font
face="Verdana"
size="2">Info<br></font></b>
</td>
</tr>
<!--- the form will then start here --->
<FORM ACTION="chart.cfm"
METHOD="Post">
<CFOUTPUT QUERY="GetWomen">
<!--- the next will output alternate row colours for easier reading --->
<tr bgcolor="###iif(currentrow MOD
2,DE('ffffff'),DE('efefef'))#">
<td width="18"
height="22"
align="center">
<!--- the check box will then contain the id, nothing that isn't
ticked will go forward --->
<input
type="checkbox"
name="id"
value="#id#">
</td>
<td width="122"
height="22" align="center">
<b><font
color="##FF9933"
face="Verdana"
size="1">#name#</font></b>
</td>
<td width="115"
height="22"
align="center">
<b><font
face="Verdana" color="##FF9933"
size="2">#visits#</font></b>
</td>
<td width="171"
height="22"
align="center">
<b><font
face="Verdana"
color="##FF9933"
size="2">#totalvotes#</font></b>
</td>
<td width="153"
height="22"
align="center">
<b><font
color="##FF9933"
face="Verdana"
size="2">#avg_vote#</font></b>
</td>
<td width="100"
height="22" align="center">
<b>
<!--- below is just stating what nationality and what media the female is in --->
<font face="Verdana"
size="1"
color="##FF9933">#nati#
#catg#</font></b>
</td>
<td width="118"
height="22"
align="center"> </td>
</tr>
</CFOUTPUT>
</table>
<br>
<!--- this table will then define whether you do this by votes, or by hits! --->
<table border="0"
cellpadding="0"
cellspacing="0"
style="border-collapse: collapse"
bordercolor="#111111"
width="806"
height="51"
id="AutoNumber1">
<tr>
<td>
<br><p><p
align="center">X - Axis
<select
size="1"
name="xaxis">
<option
value="avg_vote">By Average Votes</option>
<option
value="visits">By Total Page Visits</option>
</select>
</p>
<center>
<input
type="submit"
value="Submit"
name="submit">
<!--- history.go(-1) is basically if you cancel, takes you to the last page you visited before --->
<input
type="Button"
value="Cancel" name="Cancel"
onClick="history.go(-1)"></center>
</td>
</tr>
<table>
</form>
</center>
</div>
<p><br><br></p>
<!--- just include a navigation by for ease of use --->
<cfinclude template="../includes/nav.cfm">
</body></html>
So now you've done your form to decide Who will be counted
and by what they will be counted, lets now look at the form that makes the bar chart!
chart.cfm
---------
<html><head><title>bar chart</title></head><body>
<!--- gather all the information using Relationships
but now will use the IN command, basically this
will allow us to get Several results from the one
query as form.id will equal how ever many you selected
from the last page --->
<cfquery name="GetWomen"
datasource="#application.dsn#">
SELECT *
FROM Women, votes
WHERE (women.id=votes.woman_id)
AND women.id IN (#Form.id#)
</cfquery>
<cfoutput>
<!--- we are now going to use the CFIF statement to find out what exactly should be our yAxisTitle so if our last form defined Visits, we don't
want it to say Amount of votes! --->
<cfif #form.xaxis# IS "visits">
<cfchart
name="myChart"
format="jpg"
yAxisTitle="Total number of Hits"
xAxisTitle="Womans Name"
font="Arial"
gridlines=6
showXGridlines="yes"
showYGridlines="yes"
showborder="yes"
show3d="yes" >
<cfchartseries
type="bar"
query="GetWomen"
valueColumn="#form.xaxis#"
itemColumn="name"
seriesColor="olive"
paintStyle="plain" />
</cfchart>
<!--- obviously as we only have two ways it can be sorted it has to be by vote! ---->
<cfelse>
<cfchart
name="myChart"
format="jpg"
yAxisTitle="Average Vote"
xAxisTitle="Womans Name"
font="Arial"
gridlines=6
showXGridlines="yes"
showYGridlines="yes"
showborder="yes"
show3d="yes" >
<cfchartseries
type="bar"
query="GetWomen"
valueColumn="#form.xaxis#"
itemColumn="name"
seriesColor="olive"
paintStyle="plain" />
</cfchart>
</cfif>
<center>
</p>
<p>
</p>
<!--- now we write a file, statsdir will be the directory you have this placed defined in the APPLICATION FILE, same for Statsurl --->
<cffile action="WRITE"
charset="ISO-8859-1"
file="#application.statsdir#\chart.jpg"
output="#myChart#">
<img src="#application.statsurl#/chart.jpg">
</cfoutput>
</body>
</html>
And thats it!!
You've succesfully chosen what will go in to your chart, and how it will be sorted
-
Creating a Link Management System
This quick tutorial, shows you how to creat a Link system, that will count the amount of hits that your links create.
Author: Alex Allen-Turl
Views: 18,318
Posted Date: Tuesday, December 17, 2002 -
Creating a Voting System
This is a very quick tutorial on how to create a voting system for page relavances and other such things from a scale of 1 to 5!
Author: Alex Allen-Turl
Views: 18,924
Posted Date: Saturday, December 21, 2002 -
Creating Databases in MS SQL2000
How to get your Data into MS SQL2000 and interface with Coldfusion in 34 Easy Steps!
Author: Alex Allen-Turl
Views: 20,959
Posted Date: Sunday, December 15, 2002 -
Creating Dynamic Bar Charts
A tutorial showing you how you can create a dynamic bar chart!
Author: Alex Allen-Turl
Views: 19,958
Posted Date: Tuesday, December 24, 2002 -
Creating Dynamic Image Galleries
A tutorial showing you how you can upload one Full sized picture, and have a thumbnail automatically created for you, along with descriptions of the image!
Author: Alex Allen-Turl
Views: 29,772
Posted Date: Tuesday, December 24, 2002 -
Creating Relationships with ColdFusion
This tutorial shows how you create Relationships between tables to speed up queries and decrease the overall size of the database
Author: Alex Allen-Turl
Views: 16,516
Posted Date: Friday, December 13, 2002 -
Extensionless Coldfusion
Ever wanted to be like google and run your scripts without an extension? This tutorial shows you how with Apache or IIS!
Author: Alex Allen-Turl
Views: 10,718
Posted Date: Thursday, October 27, 2005 -
The Easiest Way to make a form!
This is by far the most easiest and simplest way to make a form and update it to the database, very low maintenance and very very quick!!
Author: Alex Allen-Turl
Views: 20,752
Posted Date: Tuesday, December 24, 2002
