Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

vertical Bar graph in XSL

Posted on 2004-10-12
7
Medium Priority
?
510 Views
Last Modified: 2012-06-27
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" />  ------------------------[normal  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
0
Comment
Question by:princehyderabad
  • 3
  • 3
7 Comments
 
LVL 15

Expert Comment

by:dualsoul
ID: 12295453
hm....you want pure HTML at output?

or SVG will be fine? :)
0
 
LVL 8

Expert Comment

by:a_twixt_in_the_tale
ID: 12300142
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;font-family:arial;padding:0}
            span{font-size:1;background-color:red;width:30px;}
      </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/StreamCount/@Value"/></td>
                        <td width="10px"><br/></td>
                        <td><br/></td>
                        <td width="50px"><xsl:value-of select="Streaming/StreamBandwidth/@Value"/></td>
                        <td width="10px"><br/></td>
                  </tr>

                  <tr height="1%">
                        <td><br/></td>
                        <td><xsl:value-of select="Limits/Count/@Value"/></td>
                        <td valign="bottom" rowspan="3">
                              <span>
                                    <xsl:attribute name="style">
                                          <xsl:value-of select="concat('height:',round(Streaming/StreamCount/@Value * 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:',round(Streaming/StreamBandwidth/@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
0
 

Author Comment

by:princehyderabad
ID: 12300466
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.,,,
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:princehyderabad
ID: 12300477
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
0
 
LVL 8

Expert Comment

by:a_twixt_in_the_tale
ID: 12305381
---- 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-family:arial;padding:0}
            span{font-size:1;height:10px;}
      </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">Node</td>
                        <td colspan="2" width="99%">
                              <div style="border:solid;border-width:1;width:100%">
                                    <span>
                                          <xsl:attribute name="style">
                                                <xsl:choose>
                                                      <xsl:when test="Streaming/StreamCount/@Status='normal'">
                                                            <xsl:value-of select="concat('background-color:green',';width:',round(Streaming/StreamCount/@Value * 100 div Limits/Count/@Value),'%')" />
                                                      </xsl:when>
                                                      <xsl:otherwise>
                                                            <xsl:value-of select="concat('background-color:red',';width:',round(Streaming/StreamCount/@Value * 100 div Limits/Count/@Value),'%')" />
                                                      </xsl:otherwise>
                                                </xsl:choose>
                                          </xsl:attribute>
                                    </span>
                              </div>
                        </td>
                        <td width="1%" style="padding-left:3"><xsl:value-of select="Streaming/StreamCount/@Value"/></td>
                  </tr>
                  <tr>
                        <td><br/></td>
                        <td>0</td>
                        <td align="right"><xsl:value-of select="Limits/Count/@Value"/></td>
                        <td><br/></td>
                  </tr>
                  <tr>
                        <td width="1%" align="right" style="padding-right:3">Bandwidth</td>
                        <td colspan="2" width="99%">
                              <div style="border:solid;border-width:1;width:100%">
                                    <span>
                                          <xsl:attribute name="style">
                                                <xsl:choose>
                                                      <xsl:when test="Streaming/StreamBandwidth/@Status='normal'">
                                                            <xsl:value-of select="concat('background-color:green',';width:',round(Streaming/StreamBandwidth/@Value * 100 div Limits/Bandwidth/@Value),'%')" />
                                                      </xsl:when>
                                                      <xsl:otherwise>
                                                            <xsl:value-of select="concat('background-color:red',';width:',round(Streaming/StreamBandwidth/@Value * 100 div Limits/Bandwidth/@Value),'%')" />
                                                      </xsl:otherwise>
                                                </xsl:choose>
                                          </xsl:attribute>
                                    </span>
                              </div>
                        </td>
                        <td width="1%" style="padding-left:3"><xsl:value-of select="Streaming/StreamBandwidth/@Value"/></td>
                  </tr>
                  <tr>
                        <td><br/></td>
                        <td>0</td>
                        <td align="right"><xsl:value-of select="Limits/Bandwidth/@Value"/></td>
                        <td><br/></td>
                  </tr>
            </table>
      </td></xsl:for-each>
      </tr></table>
</xsl:template>
</xsl:stylesheet>

:)
Don
0
 

Author Comment

by:princehyderabad
ID: 12310916
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

0
 
LVL 8

Accepted Solution

by:
a_twixt_in_the_tale earned 2000 total points
ID: 12316376
> in NS there is no graph picture,
Done

> but the design not looking fine to me
its the way u said in the question. pls specify alternative design.

>  But graphics has 2b verticaly only
vertically ?!!?

>  can we use 'green.gif' or 'red.gif'
Done

-----------changed 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="/*">
<html>
      <head>
            <style>
                  td{font-size:10;font-family:arial;padding:0}
            </style>
      </head>
      
      <body>
      <table width="250px"><tr><td>
    <xsl:for-each select="node">
            <table width="100%" height="100%">
                  <tr>
                        <td width="1%" align="right" style="padding-right:3">Count</td>
                        <td colspan="2" width="99%">
                              <table style="border:solid;border-width:1;width:100%"><tr><td>
                                    <table>
                                          <xsl:attribute name="style">
                                                <xsl:choose>
                                                      <xsl:when test="Streaming/*/@Status='normal'">
                                                            <xsl:value-of select="concat('height:10;background-image:url(green.gif)',';width:',round(Streaming/StreamCount/@Value * 100 div Limits/Count/@Value),'%')" />
                                                      </xsl:when>
                                                      <xsl:otherwise>
                                                            <xsl:value-of select="concat('height:10;background-image:url(red.gif)',';width:',round(Streaming/StreamCount/@Value * 100 div Limits/Count/@Value),'%')" />
                                                      </xsl:otherwise>
                                                </xsl:choose>
                                          </xsl:attribute>
                                          <tr><td style='font-size:1'><br/></td></tr>
                                    </table>
                              </td></tr></table>
                        </td>
                        <td width="1%" style="padding-left:3"><xsl:value-of select="Streaming/StreamCount/@Value"/></td>
                  </tr>
                  <tr>
                        <td><br/></td>
                        <td>0</td>
                        <td align="right"><xsl:value-of select="Limits/Count/@Value"/></td>
                        <td><br/></td>
                  </tr>
                  <tr>
                        <td width="1%" align="right" style="padding-right:3">Bandwidth</td>
                        <td colspan="2" width="99%">
                              <table style="border:solid;border-width:1;width:100%"><tr><td>
                                    <table>
                                          <xsl:attribute name="style">
                                                <xsl:choose>
                                                      <xsl:when test="Streaming/StreamBandwidth/@Status='normal'">
                                                            <xsl:value-of select="concat('height:10;background-image:url(green.gif)',';width:',round(Streaming/StreamBandwidth/@Value * 100 div Limits/Bandwidth/@Value),'%')" />
                                                      </xsl:when>
                                                      <xsl:otherwise>
                                                            <xsl:value-of select="concat('height:10;background-image:url(red.gif)',';width:',round(Streaming/StreamBandwidth/@Value * 100 div Limits/Bandwidth/@Value),'%')" />
                                                      </xsl:otherwise>
                                                </xsl:choose>
                                          </xsl:attribute>
                                          <tr><td style='font-size:1'><br/></td></tr>
                                    </table>
                              </td></tr></table>
                        </td>
                        <td width="1%" style="padding-left:3"><xsl:value-of select="Streaming/StreamBandwidth/@Value"/></td>
                  </tr>
                  <tr>
                        <td><br/></td>
                        <td>0</td>
                        <td align="right"><xsl:value-of select="Limits/Bandwidth/@Value"/></td>
                        <td><br/></td>
                  </tr>
            </table>
      <br/>
      </xsl:for-each></td>
      </tr></table>
      </body>
</html>
</xsl:template>
</xsl:stylesheet>
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction In my previous article (http://www.experts-exchange.com/Microsoft/Development/MS-SQL-Server/SSIS/A_9150-Loading-XML-Using-SSIS.html) I showed you how the XML Source component can be used to load XML files into a SQL Server database, us…
Browsing the questions asked to the Experts of this forum, you will be amazed to see how many times people are headaching about monster regular expressions (regex) to select that specific part of some HTML or XML file they want to extract. The examp…
this video summaries big data hadoop online training demo (http://onlineitguru.com/big-data-hadoop-online-training-placement.html) , and covers basics in big data hadoop .
As many of you are aware about Scanpst.exe utility which is owned by Microsoft itself to repair inaccessible or damaged PST files, but the question is do you really think Scanpst.exe is capable to repair all sorts of PST related corruption issues?

580 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question