Solved

vertical Bar graph in XSL

Posted on 2004-10-12
7
460 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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

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

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

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 Client Need Led Us to RSS I recently had an investment company ask me how they might notify their constituents about their newsworthy publications.  Probably you would think "Facebook" or "Twitter" but this is an interesting client.  Their cons…
Sending a Secure fax is easy with eFax Corporate (http://www.enterprise.efax.com). First, Just open a new email message.  In the To field, type your recipient's fax number @efaxsend.com. You can even send a secure international fax — just include t…
This demo shows you how to set up the containerized NetScaler CPX with NetScaler Management and Analytics System in a non-routable Mesos/Marathon environment for use with Micro-Services applications.

743 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

12 Experts available now in Live!

Get 1:1 Help Now