Solved

vertical Bar graph in XSL

Posted on 2004-10-12
7
478 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Independent Software Vendors: 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 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

Independent Software Vendors: 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

Suggested Solutions

Title # Comments Views Activity
ASP.NET reading ATOM 2 73
VB.Net. Reading xml value 6 36
C# Formatting DateTime String Value 5 50
MS Access VBA Object Variable Not Set. Can't figure this out. 11 43
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, …
I've attached the XLSM Excel spreadsheet I used in the video and also text files containing the macros used below. https://filedb.experts-exchange.com/incoming/2017/03_w12/1151775/Permutations.txt https://filedb.experts-exchange.com/incoming/201…
Are you ready to implement Active Directory best practices without reading 300+ pages? You're in luck. In this webinar hosted by Skyport Systems, you gain insight into Microsoft's latest comprehensive guide, with tips on the best and easiest way…

735 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