princehyderabad
asked on
vertical Bar graph in XSL
Hello experts,
I want to know how to write XSL code to draw a bar graph vertically for the below xml.
[----------------------
- <Limits>
<Count Value="501" />
<Bandwidth Value="90.0" />
</Limits>
- <Streaming Status="normal">
<StreamCount Status="normal" Value="5" />
<StreamBandwidth Status="critical" Value="77.0" />
</Streaming>
---------------------]
Graph shoud look like this in table format:
[lable] [rectangle box .......] [value of lable from xml]
[initial value ie '0'] [max. value of lable from xml]
Count *****..................... .... 5
0 501
Bandwidth *************........ 77.0
0 90.0
Also it would be great to have the rectanlge box fill with color depending on the 'status' of the value.
Here status are:
<StreamCount Status="normal" Value="5" /> ------------------------[n ormal ie green.gif]
<StreamBandwidth Status="critical" Value="77.0" /> -----------------[critical ie red.gif]
Total 4 color schema: red.gif, green.gif, yellow.gif, organe.gif for critical, normal, warning, unmanaged status.
Depending on the status, the rectanlge box should be occupied by proper 'gif' file.
Regards,
Hyd
I want to know how to write XSL code to draw a bar graph vertically for the below xml.
[----------------------
- <Limits>
<Count Value="501" />
<Bandwidth Value="90.0" />
</Limits>
- <Streaming Status="normal">
<StreamCount Status="normal" Value="5" />
<StreamBandwidth Status="critical" Value="77.0" />
</Streaming>
---------------------]
Graph shoud look like this in table format:
[lable] [rectangle box .......] [value of lable from xml]
[initial value ie '0'] [max. value of lable from xml]
Count *****.....................
0 501
Bandwidth *************........ 77.0
0 90.0
Also it would be great to have the rectanlge box fill with color depending on the 'status' of the value.
Here status are:
<StreamCount Status="normal" Value="5" /> ------------------------[n
<StreamBandwidth Status="critical" Value="77.0" /> -----------------[critical
Total 4 color schema: red.gif, green.gif, yellow.gif, organe.gif for critical, normal, warning, unmanaged status.
Depending on the status, the rectanlge box should be occupied by proper 'gif' file.
Regards,
Hyd
Only thing is its upside down :)
-------a.xml ------------
<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="a.xsl"?>
<nodes>
<node>
- <Limits>
<Count Value="501" />
<Bandwidth Value="90.0" />
</Limits>
- <Streaming Status="normal">
<StreamCount Status="normal" Value="5" />
<StreamBandwidth Status="critical" Value="77.0" />
</Streaming>
</node>
</nodes>
------ a.xsl ------
<?xml version='1.0' encoding='utf-8'?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="xml" indent="yes"/>
<xsl:template match="/*">
<style>
td{text-align:center;font- size:10;fo nt-family: arial;padd ing:0}
span{font-size:1;backgroun d-color:re d;width:30 px;}
</style>
<table border="1" height="150px"><tr>
<xsl:for-each select="node"><td>
<table width="100%" height="100%">
<tr height="1%">
<td width="10px"><br/></td>
<td><br/></td>
<td width="50px"><xsl:value-of select="Streaming/StreamCo unt/@Value "/></td>
<td width="10px"><br/></td>
<td><br/></td>
<td width="50px"><xsl:value-of select="Streaming/StreamBa ndwidth/@V alue"/></t d>
<td width="10px"><br/></td>
</tr>
<tr height="1%">
<td><br/></td>
<td><xsl:value-of select="Limits/Count/@Valu e"/></td>
<td valign="bottom" rowspan="3">
<span>
<xsl:attribute name="style">
<xsl:value-of select="concat('height:',r ound(Strea ming/Strea mCount/@Va lue * 100 div Limits/Count/@Value),'%')" />
</xsl:attribute>
</span>
</td>
<td><br/></td>
<td><xsl:value-of select="Limits/Bandwidth/@ Value"/></ td>
<td valign="bottom" rowspan="3">
<span>
<xsl:attribute name="style">
<xsl:value-of select="concat('height:',r ound(Strea ming/Strea mBandwidth /@Value * 100 div Limits/Bandwidth/@Value),' %')" />
</xsl:attribute>
</span>
</td>
<td><br/></td>
</tr>
<tr height="99%">
<td><br/></td>
<td><br/></td>
<td><br/></td>
<td><br/></td>
<td><br/></td>
</tr>
<tr height="1%">
<td><br/></td>
<td>0</td>
<td><br/></td>
<td>0</td>
<td><br/></td>
</tr>
<tr height="1%">
<td><br/></td>
<td><br/></td>
<td>Node</td>
<td><br/></td>
<td><br/></td>
<td>Bandwidth</td>
<td><br/></td>
</tr>
</table>
</td></xsl:for-each>
</tr></table>
</xsl:template>
</xsl:stylesheet>
:)
Don
-------a.xml ------------
<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="a.xsl"?>
<nodes>
<node>
- <Limits>
<Count Value="501" />
<Bandwidth Value="90.0" />
</Limits>
- <Streaming Status="normal">
<StreamCount Status="normal" Value="5" />
<StreamBandwidth Status="critical" Value="77.0" />
</Streaming>
</node>
</nodes>
------ a.xsl ------
<?xml version='1.0' encoding='utf-8'?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="xml" indent="yes"/>
<xsl:template match="/*">
<style>
td{text-align:center;font-
span{font-size:1;backgroun
</style>
<table border="1" height="150px"><tr>
<xsl:for-each select="node"><td>
<table width="100%" height="100%">
<tr height="1%">
<td width="10px"><br/></td>
<td><br/></td>
<td width="50px"><xsl:value-of
<td width="10px"><br/></td>
<td><br/></td>
<td width="50px"><xsl:value-of
<td width="10px"><br/></td>
</tr>
<tr height="1%">
<td><br/></td>
<td><xsl:value-of select="Limits/Count/@Valu
<td valign="bottom" rowspan="3">
<span>
<xsl:attribute name="style">
<xsl:value-of select="concat('height:',r
</xsl:attribute>
</span>
</td>
<td><br/></td>
<td><xsl:value-of select="Limits/Bandwidth/@
<td valign="bottom" rowspan="3">
<span>
<xsl:attribute name="style">
<xsl:value-of select="concat('height:',r
</xsl:attribute>
</span>
</td>
<td><br/></td>
</tr>
<tr height="99%">
<td><br/></td>
<td><br/></td>
<td><br/></td>
<td><br/></td>
<td><br/></td>
</tr>
<tr height="1%">
<td><br/></td>
<td>0</td>
<td><br/></td>
<td>0</td>
<td><br/></td>
</tr>
<tr height="1%">
<td><br/></td>
<td><br/></td>
<td>Node</td>
<td><br/></td>
<td><br/></td>
<td>Bandwidth</td>
<td><br/></td>
</tr>
</table>
</td></xsl:for-each>
</tr></table>
</xsl:template>
</xsl:stylesheet>
:)
Don
ASKER
Thx Don but that is not it.
I misswrote, I need horizontal bar not vertical bar. Also don ur xsl output is not the way I wanted. It doesnt hv any border nor any rectangle lines box, and this box fill with color for whatever value it has in xml etc.,,,
I misswrote, I need horizontal bar not vertical bar. Also don ur xsl output is not the way I wanted. It doesnt hv any border nor any rectangle lines box, and this box fill with color for whatever value it has in xml etc.,,,
ASKER
I want horizontal bar graph
I want horizontal bar graph
I want horizontal bar graph
I want horizontal bar graph
I want horizontal bar graph
I want horizontal bar graph
I want horizontal bar graph
I want horizontal bar graph
I want horizontal bar graph
---- a.xsl ------
<?xml version='1.0' encoding='utf-8'?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="xml" indent="yes"/>
<xsl:template match="/*">
<style>
td{font-size:10;font-famil y:arial;pa dding:0}
span{font-size:1;height:10 px;}
</style>
<table width="250px"><tr>
<xsl:for-each select="node"><td>
<table width="100%" height="100%">
<tr>
<td width="1%" align="right" style="padding-right:3">No de</td>
<td colspan="2" width="99%">
<div style="border:solid;border -width:1;w idth:100%" >
<span>
<xsl:attribute name="style">
<xsl:choose>
<xsl:when test="Streaming/StreamCoun t/@Status= 'normal'">
<xsl:value-of select="concat('background -color:gre en',';widt h:',round( Streaming/ StreamCoun t/@Value * 100 div Limits/Count/@Value),'%')" />
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="concat('background -color:red ',';width: ',round(St reaming/St reamCount/ @Value * 100 div Limits/Count/@Value),'%')" />
</xsl:otherwise>
</xsl:choose>
</xsl:attribute>
</span>
</div>
</td>
<td width="1%" style="padding-left:3"><xs l:value-of select="Streaming/StreamCo unt/@Value "/></td>
</tr>
<tr>
<td><br/></td>
<td>0</td>
<td align="right"><xsl:value-o f select="Limits/Count/@Valu e"/></td>
<td><br/></td>
</tr>
<tr>
<td width="1%" align="right" style="padding-right:3">Ba ndwidth</t d>
<td colspan="2" width="99%">
<div style="border:solid;border -width:1;w idth:100%" >
<span>
<xsl:attribute name="style">
<xsl:choose>
<xsl:when test="Streaming/StreamBand width/@Sta tus='norma l'">
<xsl:value-of select="concat('background -color:gre en',';widt h:',round( Streaming/ StreamBand width/@Val ue * 100 div Limits/Bandwidth/@Value),' %')" />
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="concat('background -color:red ',';width: ',round(St reaming/St reamBandwi dth/@Value * 100 div Limits/Bandwidth/@Value),' %')" />
</xsl:otherwise>
</xsl:choose>
</xsl:attribute>
</span>
</div>
</td>
<td width="1%" style="padding-left:3"><xs l:value-of select="Streaming/StreamBa ndwidth/@V alue"/></t d>
</tr>
<tr>
<td><br/></td>
<td>0</td>
<td align="right"><xsl:value-o f select="Limits/Bandwidth/@ Value"/></ td>
<td><br/></td>
</tr>
</table>
</td></xsl:for-each>
</tr></table>
</xsl:template>
</xsl:stylesheet>
:)
Don
<?xml version='1.0' encoding='utf-8'?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="xml" indent="yes"/>
<xsl:template match="/*">
<style>
td{font-size:10;font-famil
span{font-size:1;height:10
</style>
<table width="250px"><tr>
<xsl:for-each select="node"><td>
<table width="100%" height="100%">
<tr>
<td width="1%" align="right" style="padding-right:3">No
<td colspan="2" width="99%">
<div style="border:solid;border
<span>
<xsl:attribute name="style">
<xsl:choose>
<xsl:when test="Streaming/StreamCoun
<xsl:value-of select="concat('background
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="concat('background
</xsl:otherwise>
</xsl:choose>
</xsl:attribute>
</span>
</div>
</td>
<td width="1%" style="padding-left:3"><xs
</tr>
<tr>
<td><br/></td>
<td>0</td>
<td align="right"><xsl:value-o
<td><br/></td>
</tr>
<tr>
<td width="1%" align="right" style="padding-right:3">Ba
<td colspan="2" width="99%">
<div style="border:solid;border
<span>
<xsl:attribute name="style">
<xsl:choose>
<xsl:when test="Streaming/StreamBand
<xsl:value-of select="concat('background
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="concat('background
</xsl:otherwise>
</xsl:choose>
</xsl:attribute>
</span>
</div>
</td>
<td width="1%" style="padding-left:3"><xs
</tr>
<tr>
<td><br/></td>
<td>0</td>
<td align="right"><xsl:value-o
<td><br/></td>
</tr>
</table>
</td></xsl:for-each>
</tr></table>
</xsl:template>
</xsl:stylesheet>
:)
Don
ASKER
Hi Don,
Yes, thsi is want I wanted, but Don there is a problem. Your XSL is working fine with IE browser, and in NS there is no graph picture, just a blank line. Check yourself in both browser.
Plus, would you like to add ur design idea, rite now it seems like ok, but the design not looking fine to me, I mean the way values and graphic is lyed out. Can we rearrange values and text ?? Need ur idea. But graphics has 2b verticaly only.
Also like u hv used: 'background-color:green' or 'background-color:red' can we use 'green.gif' or 'red.gif', plz post me the sytnax.
REgards
Yes, thsi is want I wanted, but Don there is a problem. Your XSL is working fine with IE browser, and in NS there is no graph picture, just a blank line. Check yourself in both browser.
Plus, would you like to add ur design idea, rite now it seems like ok, but the design not looking fine to me, I mean the way values and graphic is lyed out. Can we rearrange values and text ?? Need ur idea. But graphics has 2b verticaly only.
Also like u hv used: 'background-color:green' or 'background-color:red' can we use 'green.gif' or 'red.gif', plz post me the sytnax.
REgards
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
or SVG will be fine? :)