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

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

generating graphs and charts from database queries using svg graciela gonzalez gaurav dalal dept. of...

Documents