generating graphs and charts from database queries using svg graciela gonzalez gaurav dalal dept. of...
Post on 24-Dec-2015
219 Views
Preview:
TRANSCRIPT
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
top related