Solved

vertical Bar graph in XSL

Posted on 2004-10-12
7
468 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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 

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 500 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
selectSingleNode in Access 2013 11 53
XSLT Assistance 9 48
Extract XML Data from using TSQL 5 46
XML Data Missing in PHP SimpleXML 8 44
The Problem How to write an Xquery that works like a SQL outer join, providing placeholders for absent data on the outer side?  I give a bit more background at the end. The situation expressed as relational data Let’s work through this.  I’ve …
The Confluence of Individual Knowledge and the Collective Intelligence At this writing (summer 2013) the term API (http://dictionary.reference.com/browse/API?s=t) has made its way into the popular lexicon of the English language.  A few years ago, …
You have products, that come in variants and want to set different prices for them? Watch this micro tutorial that describes how to configure prices for Magento super attributes. Assigning simple products to configurable: We assigned simple products…
Concerto provides fully managed cloud services and the expertise to provide an easy and reliable route to the cloud. Our best-in-class solutions help you address the toughest IT challenges, find new efficiencies and deliver the best application expe…

943 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

Need Help in Real-Time?

Connect with top rated Experts

1 Experts available now in Live!

Get 1:1 Help Now