The links bring up an error like: Sorry, we could not bring you any results for "webdev" at this current time. Please try a different category.
By: Alex Allen-Turl
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
About This Tutorial
Author: Alex Allen-Turl
Total Views: 38,765
Submission Date: December 24, 2002
Last Update Date: June 05, 2009
All Tutorials By This Autor: 7
Skill Level: Beginner
Platforms Tested: CF5Total Views: 38,765
Submission Date: December 24, 2002
Last Update Date: June 05, 2009
All Tutorials By This Autor: 7
Discuss This Tutorial
Advertisement
