?
Solved

vertical Bar graph in XSL

Posted on 2004-10-12
7
Medium Priority
?
488 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 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

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

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…
I was working on a PowerPoint add-in the other day and a client asked me "can you implement a feature which processes a chart when it's pasted into a slide from another deck?". It got me wondering how to hook into built-in ribbon events in Office.
This is my first video review of Microsoft Bookings, I will be doing a part two with a bit more information, but wanted to get this out to you folks.
How to fix incompatible JVM issue while installing Eclipse While installing Eclipse in windows, got one error like above and unable to proceed with the installation. This video describes how to successfully install Eclipse. How to solve incompa…

771 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