Ukázky grafů

Zde najdete ukázky jednotlivých typů grafu: OSGR, MSGR, XYGR. Dále pak použití jednoduchého skritptu HTML2GR pro generování grafu z HTML tabulky. Slouží jako ukázka toho, jak lze začlenit skript MSGR do jiného skriptu.

V ukázkách je vidět vždy vstupní XML soubor a jemu odpovídající graf. Ten je kvůli komptaibilitě zobrazen v bitmapovém formátu (některé starší prohlížeče SVG nepodporují). Odpovídající SVG lze dostat kliknutím na obrázek.

OSGR

V následujícím grafu vidíme, že barvy jednotlivých sloupců jsou obarveny podle barevného schématu "warm", ale lze je "lokálně" změnit, jako je tomu u druhého sloupce. Toto je možné u všech vlastností, které má smysl měnit pro jednotlivé sloupce.

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE osgr SYSTEM "osgr.dtd"> <osgr xmlns="http://graph2svg.googlecode.com" colorScheme="warm" labelIn="percent"> <title>Revenues (in thousnds €)</title> <names> <name>Mon</name> <name>Tue</name> <name>Wed</name> <name>Thu</name> <name>Fri</name> </names> <values> <value>12.5</value> <value color="blue">10.1</value> <value>5.8</value> <value>9.7</value> <value>16</value> </values> </osgr>

Dále můžeme sledovat chování stejných dat při různých nastaveních atributů. Pod obrázky uvádíme jen tyto atributy (atributy kořenového elementu osgr), zbytek souboru je stejný, pouze lokální změna druhého sloupce je vynechána.

colType="cylinder"
colorScheme="cold"
xAxisDivision="both"
yAxisDivision="2"
xGrid="major"
yGrid="minor"

effect="3D"
colorScheme="warm"
xAxisDivision="both"
yAxisDivision="5"
yGrid="major"

colType="none"
lineType="solid"
pointType="squareF"
xAxisDivision="both"
xGrid="minor"
yAxisType="shifted"
yAxisDivision="2"

Grafy s jednou datovou řadou mohou být rovněž zobrazeny jako výsečový (kotoučový) graf.

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE osgr SYSTEM "osgr.dtd"> <osgr xmlns="http://graph2svg.googlecode.com" graphType="pie" effect="3D" legend="left" labelOut="value"> <title>Revenues (in thousnds €)</title> <names> <name>Mon</name> <name>Tue</name> ... </names> <values> <value>12.5</value> <value>10.1</value> ... </values> </osgr>

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE osgr SYSTEM "osgr.dtd"> <osgr xmlns="http://graph2svg.googlecode.com" graphType="pie" colorScheme="warm" labelOut="name" labelIn="value"> <title>Revenues (in thousnds €)</title> <names> <name>Mon</name> <name>Tue</name> ... </names> <values> <value>12.5</value> <value>10.1</value> ... </values> </osgr>

MSGR

Pro zobrazení více datových řad slouží grafy typu MSGR. Následující vstupní soubor odpovídá prvnímu obrázku. Druhý obrázek stejně jako další dvě ukázky používají stejná data, ale mají jiné atributy kořenového elementu. Ty jsou uvedeny pod nimi.

Snadno lze rovněž daná data přepočíst na skládaný nebo procentní skládaný graf.

Schémata rovněž umožňují kombinování různých vzhledů jednotlivých datových řad. Pomocí speciálních typů sloupců lze vytvořit krabičkový graf, tzv. Parethův graf nebo zobrazit odchylky.

XYGR

Grafy typu XYGR slouží k zobrazení různých bodů a křivek v rovině. Souřadnice jsou zadávány zvlášť pro x-ovou a y-ovou souřadnici. Lze pomocí něj například vytvořit následující náčrtek.

<?xml version="1.0" encoding="utf-8"?> <xygr xmlns="http://graph2svg.googlecode.com" lineType="solid"> <title>Average costs</title> <curve smooth="yes"> <name>AC</name> <point x="1.3" y="75"/> <point x="4" y="42"/> <point x="10" y="75"/> </curve> <curve smooth="yes" color="grey"> <name>AVC</name> <point x="0" y="30"/> <point x="3.2" y="26"/> <point x="10" y="66"/> </curve> ... <curve color="red" pointType="circle"> <name x="3.3" y="23">M'</name> <point x="3.2" y="26"/> </curve> </xygr>

Asi nejlepší uplatnění však tento typ grafu nalezne při zobrazení funkcí. Je samozřejmně možné vytvořit zdrojový XML soubor ručně, ale my zde ukážeme XSLT skript, který jej vytvoří automaticky a rovnou převede do SVG. Poslouží nám rovněž jako ukázka toho, jak začlenit již hotové skripty do jiných skriptů.

<?xml version="1.0" encoding="windows-1250"?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:m="http://graph2svg.googlecode.com" xmlns:gr="http://graph2svg.googlecode.com" xmlns:math="http://exslt.org/math" extension-element-prefixes="math" exclude-result-prefixes="math xs m" version="2.0"> <xsl:include href="xygr2svg.xsl"/> <xsl:output method="xml" encoding="utf-8" indent="yes"/> <xsl:param name="xMin" select="-1"/>  <xsl:param name="xMax" select="6.5"/>  <xsl:param name="xStep" select="0.3"/>  <xsl:template match="/"> <xsl:variable name="gr"> <gr:xygr yAxisDivision="5"> <gr:title>graf of function</gr:title> <gr:curve> <gr:name>sin x</gr:name> <xsl:for-each select="0 to (floor(($xMax -$xMin) div $xStep) cast as xs:integer)"> <xsl:variable name="x" select="$xMin + (.)*$xStep"/>  <gr:point x="{$x}" y="{math:sin($x)}"/>  </xsl:for-each> </gr:curve> </gr:xygr> </xsl:variable> <xsl:call-template name="m:xygr2svg"> <xsl:with-param name="graph" select="$gr/gr:xygr"/> </xsl:call-template> </xsl:template> </xsl:stylesheet>

HTML2GR

HTML2GR je poměrně jednoduchý skript, který ze zadané tabulky v HTML souboru vytvoří graf. Je další ukázkou toho, jak lze spojovat skripty, konkrétně je použit skript msgr2svg. Ale protože XSLT procesory neumí pracovat přímo s HTML, je potřeba nejdříve převést HTML stránku do XHTML, který už je v XML formátu. Lze k tomu použít například TIDY

Skript vypadá takto:

<?xml version="1.0" encoding="windows-1250"?> <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xh="http://www.w3.org/1999/xhtml" xmlns:m="http://graph2svg.googlecode.com" xmlns:gr="http://graph2svg.googlecode.com" exclude-result-prefixes="m xh" version="2.0"> <xsl:include href="msgr2svg.xsl"/> <xsl:output method="xml" encoding="utf-8" indent="yes"/> <xsl:param name="tabNum" select="1"/>  <xsl:param name="dataCols" select="2 to 12"/>  <xsl:param name="dataRows" select="3 to 6"/>  <xsl:param name="titlesCol" select="1"/>  <xsl:param name="namesRow" select="2"/>  <xsl:param name="grTitleRow" select="1"/>  <xsl:param name="grTitleCol" select="1"/>  <xsl:template match="/"> <xsl:variable name="graph"> <xsl:apply-templates select="(//xh:table)[$tabNum]"/> </xsl:variable> <xsl:call-template name="m:msgr2svg"> <xsl:with-param name="graph" select="$graph/gr:msgr"/> </xsl:call-template>  </xsl:template> <xsl:template match="xh:table"> <xsl:variable name="rows" select="(xh:tr|xh:tbody/xh:tr|xh:thead/xh:tr|xh:tfoot/xh:tr)"/> <gr:msgr pointType="cross"> <gr:title><xsl:value-of select="(m:row2seq($rows[$grTitleRow]))[$grTitleCol]"/></gr:title> <gr:names> <xsl:for-each select="(m:row2seq($rows[$namesRow]))[position() = $dataCols]"> <gr:name> <xsl:value-of select="."/> </gr:name> </xsl:for-each> </gr:names> <xsl:for-each select="$rows[position() = $dataRows]"> <gr:values> <title> <xsl:value-of select="m:row2seq(.)[$titlesCol]"/> </title> <xsl:for-each select="m:row2seq(.)[position() = $dataCols]"> <gr:value> <xsl:value-of select="translate(., ',+', '.')"/> </gr:value> </xsl:for-each> </gr:values> </xsl:for-each> </gr:msgr> </xsl:template> <xsl:function name="m:row2seq"> <xsl:param name="row"/> <xsl:sequence select=" for $a in $row/(xh:td|xh:th) return if ($a/@colspan) then ( (for $b in (1 to $a/@colspan) return $a) ) else $a"/> </xsl:function> </xsl:stylesheet>

graph2svg, autor: Jakub Vojtíšek

Co to je graph2svg

Ukázky grafů

Stáhnout

Jak se graph2svg používá

Informace o verzích

Související odkazy

Ukázky grafů

OSGR

MSGR

XYGR

HTML2GR