Generating Graphs and Charts from Database Queries using SVG Graciela Gonzalez Gaurav Dalal Dept. of...
-
Upload
clare-hamilton -
Category
Documents
-
view
215 -
download
0
Transcript of Generating Graphs and Charts from Database Queries using SVG Graciela Gonzalez Gaurav Dalal Dept. of...
Generating Graphs and Charts from Database Queries using SVG
Graciela GonzalezGaurav DalalDept. of Computer ScienceSam Houston State UniversityHuntsville, TX.
2
Structure
SQL+D Charon Architecture Examples Advantages
3
SQL+D<SQL Query> [DISPLAY <disp specs>]
<disp specs> panel <id>, (<container panels> )*WITH <disp element>
<container panels> <panel list> ON <id>.<loc>[(<layout>)]
<panel list> panel <id> (, panel <id>)*
<loc> North | South | East | West | Center
<layout> Horizontal | Vertical | Overlay
<disp element> <graph specs> | <chart specs>
< chart specs> (AttrX, AttrY) AS <chart elem> ON <id>
<graph specs> nodes(Attr1, Attr2, ..., Attrn) AS text ON <id>
| edge ( (Attr1 TO Attr2)| (Attr1, Attr2) )
[LABEL string | LABEL Attrn] ON <id>
< chart elem> linechart | barchart | piechart | xyscatter
<query>
4
250400
Size Fixed Dimension: 400
x 400 Center:250x250 North & South: 400 x
75 East & West: 75x250 Sub Panels
400
75
250
75
North
South
East
West
Center
5
Charon
Web Service Application Accepts Requests having:
Database Access Info SQL+D query
Queries the Database Builds Multimedia Presentations based on
Resultset. Sends Response in the desired output
format. (e.g., SMIL, SVG, other XML formats)
6
Architecture
(b) Access Info & SQL
Display Generator
Database Interface
Client
Merger
Output Gateway
(k) Output Response
External Applications / Web services
(h) Data and Formatting
Details
(i) Results
(c) Access Info & SQL
Query
(d) Results
Database
(j) Formatted
Output
(f) Display
& Output Details
(g) XSL-based
stylesheet
(a) Output Request
(e) Flat XML
Web S
ervice
7
(j) Formatted Output<Data> <File> <Name>smil1.smil</Name> <contents> <smil> <head> <meta content="SMIL" name="title"/> .
. </body> </smil> </contents> <File> </File> <Name>bar1.svg</Name> <contents> <svg> <rect fill="red" height="140" stroke="black" width="12" x="25" y="110.0000"/> . . </svg> </contents> </File></Data>
Architecture
Display Generator
Database Interface
Client
Merger
Output Gateway
(k) Output Response
External Applications / Web services
(c) Access Info & SQL
Query
(d) Results
Database
Web S
ervice
(a) Output Request<SQLD> <Connection> <url>jdbc:odbc:sales</url> <username>gaurav</username> <password>12345</password> </Connection> <Query> SELECT Sales.Month, Sales.Amount FROM Product INNER JOIN Sales ON Product.ProductID = Sales.ProductID AND year = ‘2003’ AND ProductID='3' DISPLAY PANEL main WITH (month, total) AS barchart ON main.Center; </Query> <Output>
<Format>SMIL</SMIL> <Size> <Width>400</Width> <Height>400</Height> </Size> </Output></SQLD>
(b) Access Info & SQL<Query> <url>jdbc:odbc:movie</url> <username>gaurav</username> <password>12345</password> <SQL>SELECT Sales.Month, Sales.Amount FROM Product INNER JOIN Sales ON Product.ProductID = Sales.ProductID AND year = ‘2003’ AND ProductID='3'; </SQL></Query>
(e) Flat XML<Results>
<Record Index="1"> <Sales.Month>Jan</Sales.Month> <Sales.Amount>11000</Sales.Amount> </Record>
<Record Index="2"> <Sales.Month>Feb</Sales.Month> <Sales.Amount>55555</Sales.Amount> </Record>
</Results>
(f) Display & Output DetailsDISPLAY PANEL main WITH (month, total) AS
barchart ON main.Center
(g) XSL-based stylesheet<?xml version="1.0"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="./Results"> <Data> <File> <Name>smil1.smil</Name> <contents> <smil> <head> <meta content="SMIL" name="title"/> <layout> <root-layout height="400" width="400"/> <region height="400" id="main" width="400"/> </layout> </head>
<body> <seq> <barchart datafield="Sales.Amount" size="300" textfield="Sales.Month"/> </seq> </body> </smil> </contents> </File> </Data> </xsl:template></xsl:stylesheet>
(i) Results<svg>
<rect fill="red" height="140" stroke="black" width="12" x="25" y="110.0000" /><rect fill="red" height="125" stroke="black" width="12" x="50" y="125.0000" />
<text style="font-size:12; stroke:black; writing-mode:tb;" x="25" y="260">Jan</text><text style="font-size:12; stroke:black; writing-mode:tb;" x="50" y="260">Feb</text>
<line stroke="black" x1="12" x2="12" y1="12" y2="250"/><line stroke="black" x1="12" x2="250" y1="250" y2="250"/>
<line stroke="black" x1="30" x2="55" y1="235" y2="210" /><line stroke="black" x1="55" x2="80" y1="210" y2="225" />
<text style="font-size:8; stroke:black;" x="0" y="250">0</text><text style="font-size:8; stroke:black;" x="0" y="225">25</text>
</svg>(h) Data and Formatting DetailsBarchart ("300", "Sales.Month", "Sales.Amount")
8
Examples
ChartsPassing the attributes of the
resultset as input to a external XSLT application.
GraphsRunning an external application to
get the SVG image from SQL+D.
9
Bar Charts
Required Inputs Required Size (in pixels) Text Field Data Field (s)
10
Bar Charts-Query SALES (month, year, value) SELECT * FROM SALES WHERE year =
‘2003’ DISPLAY PANEL main WITH (month, total) AS barchart ON main.Center.
month total
11
•X-offset = 250 / 2 * 10 = 12.5•Y-offset = 25000 / 250 = 100Width = X offset•X = 2 * X-offset * position•Height = value / Y-offset•y = Size - Height
Bar Charts-Algorithm1. Generate the X-axis and Y-
axis given the current size.2. X-offset = Size / 2 * # of
Records3. Y-offset = Max value / Size4. Generate each bar using the
'rect' element.5. Generate the text labels for
each bar.
•<rect
•height = “140”•y=“110.0000” />
•x = “25”
•stroke = “black”
•width= “12.5”
•fill = “red”
12
Line Charts
Required Inputs Required Size (in pixels) Text Field Data Field (s)
13
Line Charts - Query PRICES (date, high, low, close).
SELECT * FROM PRICES WHERE DATE => "05/28/2003" AND DATE <= "05/02/2003" DISPLAY PANEL main WITH
(date, high, low, close) AS linechart ON main.Center
date high, low, close
14
Y1 = Value / Y-offsetY2 = Next Value / Y-offset
Line Charts - Algorithm1. Generate the X-axis
and Y-axis given the current size.
2. X-offset = Size / # of Records
3. Y-offset = Max value / Size.
4. For each data line, Generate each line using the 'line' element
5. Generate the text label for each line.
6. Generate the legend.
•<line
•y1 = “235” •y2 =“210” />•x2 = “50”
•stroke = “black”
•x1 = “0”
X1 = X-offset * (position -1) X2 = X-offset * position•X-offset = 250 / 5 = 50•Y-offset = 25000 / 250 = 100
15
Pie Charts
Required Inputs Required Size (in pixels) Text Field Data Field
16
Pie Charts - Query OCCUPATION (state, occupation,
population). SELECT OCCUPATION.occupation ,
OCCUPATION.population FROM OCCUPATION WHERE OCCUPATION.state = "California" DISPLAY PANEL main WITH (occupation, population) AS piechart ON main.Center
occupationpopulatio
n
17
Pie Charts - Algorithm1. Ratio = ∑values * ∏/
1802. For each slice,
1. Calculate the angle of each slice using the ratio.
2. Generate each slice using the ‘path' element.
3. Generate the legend.
x = [cos (angle expressed in radians)-1]*size
= [0.866-1]*100
= -13.39
y = sin (angle expressed in radians)*size
= 0.5 * 100
= 50
•<path d=“
•M 0,0
•L 100,0
•a 100, 100, 0, 0, 1
•-13.39
•50
•z“
•style="fill:blue“
• transform="rotate(60)“ />
+
∏/12 radians+
∏/6 radians
∏/6 radians
18
Graphs
Nodes & Edges are defined using the attributes of the resultset.
Created using a graph-generating application called GraphViz ©.
19
Graphs - Query
20
Graphs - Query
SELECT REQ.ClassID, PREREQ.prereq FROM PREREQ, REQ WHERE REQ.major = “BSCS” AND REQ.ClassID = PREREQ.ClassID
DISPLAY PANEL main WITH Nodes (REQ.ClassID, PREREQ.prereq) AS boxedtext ON main.Center, Edge (PREREQ.prereq TO REQ.classid) ON main.Center
Nodes (REQ.ClassID, PREREQ.prereq)
Edge (PREREQ.prereq TO REQ.classid)
21
Graphs -Algorithm
1. Generate an XSL stylesheet which generates the dot format.
a) Nodes:i. Tagged by a unique integer (i.e., the row
number)ii. Labeled by the value of the data.
b) Edges: Pair of Nodes identified through the tag numbers
22
Graphs - Query
2. Generating the dot file.digraph G {
1 -> 3;2 -> 3;
1[label="MTH 171"] 2[label="CS 164"]
3[label="CS 165"] }
1 -> 3;
1[label="MTH 171"]
DISPLAY PANEL main WITH Nodes (REQ.classid, PREREQ.prereq) AS boxedtext ON main.Center, Edge(PREREQ.prereq TO REQ.classid) ON main.Center
23
Graphs - Algorithm
3. Run the program through the Merger subcomponent using the dot file.
24
Graphs - Output
25
Advantages
Simple to Learn Dynamic Code Generation Extensible High Level Of Implementation
Thank You