<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="2.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:fn="http://www.w3.org/2005/xpath-functions">
<xsl:template match="/">
<html>
<head>
<script type="text/javascript">
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer",
{
title: {
text: "TIMELINE"
},
axisX:{
gridThickness: 0,
stripLines: [
{
value: 1.63,
color: "black"
},
{
value: 2.63,
color: "black"
},
]
},
axisY: {
minimum: new Date(2008,05,10),
labelFormatter: function(e){
return CanvasJS.formatDate(e.value, "YYYY");
},
gridThickness: 0
},
data: [
{
type: "rangeBar",
dataPoints: [
<xsl:for-each select="//SEZ_TIMELINE/person">
<xsl:for-each select="./jobs/job">
{ x: <xsl:value-of select="../../@pos"/>, label: "<xsl:value-of select="../../name"/>", y: [(new Date(<xsl:value-of select="fromdt"/>)).getTime(), (new Date(<xsl:value-of select="todt"/>)).getTime()], name :"<xsl:value-of select="descr"/>" , color: "green"},
</xsl:for-each>
</xsl:for-each>
],
toolTip:{
contentFormatter: function ( e ) {
return "<strong>" + e.entries[0].dataPoint.name + "</strong></br> Start: " + CanvasJS.formatDate(e.entries[0].dataPoint.y[0], "YYYY-MM-DD") + "</br>End : " + CanvasJS.formatDate(e.entries[0].dataPoint.y[1], "YYYY-MM-DD");
}},
indexLabel:"{name}",
indexLabelFormatter: function ( e ) {
if(e.index == 0)
return e.dataPoint.name;
else
return " ";
}
}
]
});
chart.render();
}
</script>
<script type="text/javascript" src="https://cdn.canvasjs.com/canvasjs.min.js">
</script>
</head>
<body>
<div id="chartContainer" style="height: 400px; width:1300px;"></div>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
<----------------------XML FILE----------------->
<?xml version="1.0" encoding="utf-8"?>
<response xmlns:fo="http://www.w3.org/1999/XSL/Format" xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:fn="http://www.w3.org/2005/xpath-functions" xmlns:xdt="http://www.w3.org/2005/xpath-datatypes">
<SEZ_TIMELINE>
<person pos="1">
<name>FABIANI STEFANO</name>
<jobs>
<job pos="1">
<descr>CONSIGLIERE</descr>
<fromdt>2018,05,28</fromdt>
<todt>2018,06,20</todt>
</job>
<job pos="2">
<descr>PRESIDENTE CONSIGLIO AMMINISTRAZIONE</descr>
<fromdt>2018,07,20</fromdt>
<todt>2018,10,21</todt>
</job>
</jobs>
</person>
<person pos="2">
<name>BONUCCI LILIANA</name>
<jobs>
<job pos="1">
<descr>CONSIGLIERE</descr>
<fromdt>2018,05,28</fromdt>
<todt>2018,10,20</todt>
</job>
<job pos="2">
<descr>VICE PRESIDENTE DEL CONSIGLIO D`AMMINISTRAZIONE</descr>
<fromdt>2017,05,08</fromdt>
<todt>2017,10,18</todt>
</job>
</jobs>
</person>
<person pos="3">
<name>CARLI LAURA</name>
<jobs>
<job pos="1">
<descr>CONSIGLIERE</descr>
<fromdt>2017,05,28</fromdt>
<todt>2017,10,20</todt>
</job>
</jobs>
</person>
</SEZ_TIMELINE>
</response>
.
