MeadInKent Website
Self Contained CSS

Simple charts based on Access database data

A routine within an Access database creates small text files containing some HTML and CSS code to produce bar or column charts. The text files can be imported into a web page as iFrames. Therefore they are independent and the main page does not need to be refreshed. If more complex or attractive charts are needed, exporting picture files of charts on forms may be a better solution.

A vertical column chart

Another imported iFrame styled (using CSS) as an Office table. The data in this query was used to produce the previous chart.

A horizontal bar chart

Another iFrame containing a table with horizontal bars in the second column.

Each of these iFrames were generated by an Access database VBA procedure.

The VBA code is as follows:

Sub MakeCSSBars()

		' A table containing horizontal bars in one of the columns

		Dim cHeight As Integer, cWidth As Integer, cColour As String

		Dim cScaleMax As Integer, cScaleMin As Integer, cFileName As String

		Dim MyDb As Database, MySet As Recordset

		

		Set MyDb = CurrentDb()

		Set MySet = MyDb.OpenRecordset("ChartCSSDataB")

		


		cWidth = 300	'width in pixels of main chart area

		cColour = "#C7F1C7" ' colour of bars / cols

		cScaleMax = 40

		cScaleMin = 0

		cFileName = "C:\SiteOct02\MyCSSChart2.htm"

		

		Open cFileName For Output As #1 ' open a new text file - the HTML frame

		

		Print #1, "<style type='text/css'>"

		Print #1, "body {font-family: Arial, Helvetica;font-size: 11pt; 
		margin-left:10px; margin-right: 40px; margin-top: 10px}"

		Print #1, "td.full {padding: 0pt 0pt 0pt 0pt; border-style: transparent; 
		border:0px; font-family: Arial, Helvetica;font-size: 12pt;}"

		Print #1, "div.horizbar {float: left; width: 100px; height: 20px; 
		margin: 0px; border: 1px solid rgba(0, 0, 0, .2);background-color: " & 
		cColour & ";}"

		Print #1, "</style>"

		Print #1, "<table><tr><td class='full' style='width: 
		160px'>Directorate</td><td>"

		Print #1, " <table style='width: " & Str(cWidth) & "px; border-collapse: 
		collapse; font-size:x-small; color:green'><tr>"

		Print #1, " <td style='width: 33%' align='Left'>" & Str(cScaleMin) & 
		"</td>"

		Print #1, " <td style='width: 34%' align='Center'>" & Format((cScaleMax 
		- cScaleMin) / 2, "0") & "</td>"

		Print #1, " <td style='width: 33%' align='Right'>" & Str(cScaleMax) & 
		"</td></tr>"

		Print #1, " </table></td></tr>"

		

		MySet.MoveFirst

		Do Until MySet.EOF ' loop through the query records 
		-----------------------

		Print #1, "<tr><td class='full'>" & MySet!dlabel & "</td><td><div 
		class='horizbar' style='width:" & Format(MySet!dvalue / (cScaleMax - 
		cScaleMin) * cWidth, "0") & "px' title='" & MySet!dtitle & 
		"'></div></td></tr>"

		MySet.MoveNext

		Loop

		Print #1, "</table>"

		Print #1, "<p><span style='font-size: xx-small; color:gray'> Chart 
		source - iFrame(MyCSSChart2.htm) created by VBA Sub 
		MakeCSSBars()</span></p>"

		Close #1

		MySet.Close

		MyDb.Close

		Debug.Print Time(), "MakeCSSBars()", cFileName

		End Sub

Sub MakeCSSCols()

		' Create an iFrame containing simple chart with vertical columns

		Dim cHeight As Integer, cWidth As Integer, cColour As String

		Dim cScaleMax As Integer, cScaleMin As Integer, cFileName As String

		Dim MyDb As Database, MySet As Recordset

		

		Set MyDb = CurrentDb()

		Set MySet = MyDb.OpenRecordset("ChartCSSDataA")

		

		cHeight = 150 ' height in pixels of main chart area

		cWidth = 300

		cColour = "#C7F1C7" ' colour of bars / cols

		cScaleMax = 50

		cScaleMin = 0

		cFileName = "C:\SiteOct02\MyCSSChart1.htm"

		

		Open cFileName For Output As #1 ' open a new text file - the HTML page

		

		Print #1, "<style type='text/css'>"

		Print #1, "body {font-family: Arial, Helvetica;font-size: 11pt; 
		margin-left:10px; margin-right: 40px; margin-top: 10px}"

		Print #1, "td.full {padding: 2pt 0pt 0pt 0pt; border-style: transparent; 
		border:0px; font-family: Arial, Helvetica;font-size: 12pt;}"

		Print #1, "div.verticbar {float: left; padding: 0px; width: 90%; height: 
		100%; margin: 2px; border: 1px solid rgba(0, 0, 0, .2); 
		background-color: " & cColour & ";}"

		Print #1, "</style>"

		Print #1, "<table style='width: " & Str(cWidth) & "px; border-collapse: 
		collapse; font-size:x-small;'>"

		Print #1, " <tr style='height: " & Str(cHeight) & "px' 
		valign='bottom'><td>"

		Print #1, " <table style='height: " & Str(cHeight - 10) & "px; 
		font-size:x-small; color:green'>"

		Print #1, " <tr><td class='full' valign='Top'>" & Str(cScaleMax) & 
		"</td></tr>"

		Print #1, " <tr><td class='full' valign='Middle'>" & Format((cScaleMax - 
		cScaleMin) / 2, "0") & "</td></tr>"

		Print #1, " <tr><td class='full' valign='Bottom'>" & Str(cScaleMin) & 
		"</td></tr>"

		Print #1, " </table></td>"

		

		MySet.MoveFirst

		Do Until MySet.EOF ' loop through the query records -------------------

		Print #1, "<td class='full'><div class='verticbar' style='height:" & 
		Format(MySet!dvalue / (cScaleMax - cScaleMin) * cHeight, "0") & "px' 
		title='" & MySet!dtitle & "'></div></td>"

		MySet.MoveNext

		Loop

		Print #1, " </tr><tr style='text-align:center'><td>&nbsp;</td>"

		

		MySet.MoveFirst

		Do Until MySet.EOF ' loop againh through the query records 
		-----------------

		Print #1, "<td class='full'>" & MySet!dlabel & "</td>"

		MySet.MoveNext

		Loop

		

		Print #1, "</tr></table>"

		Print #1, "<p><span style='font-size: xx-small; color:gray'> Chart 
		source - iFrame(MyCSSChart2.htm) created by VBA Sub 
		MakeCSSCols()</span></p>"

		Close #1

		MySet.Close

		MyDb.Close

		Debug.Print Time(), "MakeCSSCols()", cFileName

		End Sub


		
		Sub MakeCSSTbl()

		' An iFrame containing a table formatted as an office style worksheet

		Dim MyDb As Database, MySet As Recordset, cFileName As String, 
		cWidthPerc As Integer

		

		Set MyDb = CurrentDb()

		Set MySet = MyDb.OpenRecordset("ChartCSSDataA")

		

		cWidthPerc = 50

		cFileName = "C:\SiteOct02\MyCSSTable1.htm"

		

		Open cFileName For Output As #1 ' open a new text file - the HTML page

		

		Print #1, "<style type='text/css'>"

		Print #1, "body {font-family: Arial, Helvetica;font-size: 11pt; 
		margin-left:10px; margin-right: 40px; margin-top: 10px}"

		Print #1, "td.edge {font-weight: bold; text-align: center; 
		background-color:#EFEBDE; border:1px solid black; border-left-width: 
		0px; border-top-width: 0px;font-size: 11pt;}"

		Print #1, "td.cell_r {border:1px solid silver; border-left-width: 
		0px;border-top-width: 0px; text-align:right;font-size: 11pt;}"

		Print #1, "td.cell {border:1px solid silver; border-left-width: 
		0px;border-top-width: 0px;font-size: 11pt;}"

		Print #1, "</style>"

		Print #1, "<p><em>Select Query: ChartCSSDataA</em></p>"

		Print #1, "<table style='width: " & Str(cWidthPerc) & "%; 
		border-collapse: collapse;'>"

		Print #1, "<tr><td class='edge'>dSort</td>"

		Print #1, "<td class='edge'>dTitle</td>"

		Print #1, "<td class='edge'>dLabel</td>"

		Print #1, "<td class='edge'>dValue</td></tr>"

		

		MySet.MoveFirst

		Do Until MySet.EOF ' loop through the query records --------------------

		Print #1, "<tr height=30px><td class='cell'>" & MySet!dsort & "</td>"

		Print #1, "<td class='cell'>" & MySet!dtitle & "</td>"

		Print #1, "<td class='cell'>" & MySet!dlabel & "</td>"

		Print #1, "<td class='cell_r'>" & MySet!dvalue & "</td></tr>"

		MySet.MoveNext

		Loop

		

		Print #1, "</table>"

		Print #1, "<p><span style='font-size: xx-small; color:gray'> Table 
		source - iFrame(MyCSSTable1.htm) created by VBA Sub 
		MakeCSSTbl()</span></p>"

		Close #1

		MySet.Close

		MyDb.Close

		Debug.Print Time(), "MakeCSSTbl()", cFileName

		

		End Sub

filename: SelfContWithCSSChartFrames.html