Een (javascript) lijn diagram maken vanuit XML/XSL

hels · 21 april 2010

L.S.

Ik wil een lijn diagram plaatsen via een XSLT conversie van een XML bestand.

Het diagram werkt; dit heb ik in HTML getest, maar vanuit XSL krijg ik het niet aan de praat. Ik kan javascript gebruiken vanuit XSLT, dus dat is niet het probleem.

Weet iemand een goede manier om ZONDER FLASH een lijn diagram te genereren vanuit XSLT?

Ik heb mijn demo (werkend vanuit html) en het (nietwerkende) XSL scripts hier geplaatst.

q.css

=====

Citaat:

#myCanvas {

z-index: -1;

overflow: auto;

position: relative;

border: #555 1px dashed;

background: #d66;

width: 320px;

height: 300px;

}

q.html (WERKEND !!!)

====================

Citaat:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>

<head>

<title>Kaart</title>

</head>

<body>

<h3>Test grafiek</h3>

</body>

</html>

q.xml

=====

Citaat:

<?xml version='1.0' encoding='ISO-8859-1'?>

<?xml-stylesheet type='text/xsl' href='q.xsl'?>

<data>

<Med>

<Med_ID>1</Med_ID>

<Med_Naam>John Doe</Med_Naam>

</Med>

</data>

q.xsl (Wat ik werkend wil krijgen)

==================================

Citaat:

<?xml version='1.0' encoding='ISO-8859-1'?>

<xsl:stylesheet version='1.0'

xmlns:xsl='http://www.w3.org/1999/XSL/Transform'

xmlns='http://www.w3.org/1999/xhtml'>

<xsl:template match='data'>

<html>

<head>

<title>Kaart</title>

</head>

<body>

<h3>Test grafiek</h3>

<xsl:value-of select="Med/Med_Naam" /><br />

</body>

</html>

</xsl:template>

</xsl:stylesheet>

demo.js

=======

Citaat:

var g1 = new line_graph();

var g2 = new line_graph();

g1.add('2007', 30);

g1.add('2008', 100);

g1.add('2009', 50);

g1.add('2012', 30);

g2.add('', 50);

g2.add('', 20);

g2.add('', 10);

g2.add('', 55);

g1.setMax(125);

g1.setColor(0);

g2.setMax(125);

g2.setColor(1);

g1.render('myCanvas', '', 250, 280 );

g2.render('myCanvas', '', 250, 280 );

Wat zie ik over het hoofd ?

Weet iemand een manier om een grafiek (lijn diagram) in xslt te plaatsen ???

Groet, Henk

wolff · 19 mei 2010

De verklaring van jouw probleem is redelijk simpel:

Jouw teken methode maakt gebruik van het Document Object Model (DOM), wat betekent dat het elementen van je document manipuleerd.

Het document van je is het XML document, wat je niet ziet.

Je kunt lijnen maken door vanuit je XSL divs te genereren bijv:

<div style="position: absolute; left: 99px; top: 85px; width: 1px; height: 9px; clip: rect(0pt, 1px, 9px, 0pt); background-color: rgb(80, 127, 175);"></div> levert je een verticale lijn op.

Op deze manier kun je horizontale en verticale lijnstukken met een breedte van 1 pixel maken.

Persoonlijk zou ik kiezen voor het met genereren van een SVG grafiek, die je embed in de html.

(Zie Google)

Inloggen

Een (javascript) lijn diagram maken vanuit XML/XSL

Aanbevolen berichten

hels

wolff

Maak een account aan of log in om te reageren

Account aanmaken

Inloggen

Wie is er online 0 leden

Overig

Activiteit