|
 |
asp_web_howto thread: Office Web Chart Component on ASP page with XML
Message #1 by "Ted Sivalon" <sivalon@y...> on Tue, 19 Feb 2002 15:30:54
|
|
I found a sample bit of code that used the Office Web Chart Component to
create a dynamic chart based off of XML data and using XSL. I've managed
to change the relevant pieces of the XSL document and the XML to meet my
needs except for the ability to use dates on the Y axis of my chart. Any
ideas?
myxmlfile.xml
<?xml version="1.0" encoding="windows-1252"?>
<list next="65" timestamp="82" schemastamp="27">
<Schema next="21">
<ElementType name="item">
<element id="s1" type="id"/>
<!-- must have an id on every row -->
<element id="s12" type="milestone" values=""
view=""/>
<element id="s10" type="base" values="" view=""/>
<element id="s8" type="planned" values="" view=""/>
<element id="s9" type="actual" values="" view=""/>
<element id="s20" type="slip" title="" values=""
view="bar" color=""/>
</ElementType>
<in/>
</Schema>
<title>Project Scheduling System<in/>
</title>
<item>
<id>19</id>
<milestone>Milestone 1</milestone>
<base>March 1, 2002</base>
<planned>March 1, 2002</planned>
<actual>March 1, 2002</actual>
<slip>0</slip>
</item>
<item>
<id>20</id>
<milestone>Milestone 2</milestone>
<base>March 8, 2002</base>
<planned>March 8, 2002</planned>
<actual>March 15, 2002</actual>
<slip>1</slip>
</item>
<item>
<id>21</id>
<milestone>Milestone 3</milestone>
<base>March 22, 2002</base>
<planned>march 22, 2002</planned>
<actual>March 29, 2002</actual>
<slip>0</slip>
</item>
</list>
myxsl.xsl
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
<xsl:script>
var ci = 0;
var bi = 0;
var lastcolor = "";
var colors = new Array
("black", "blue", "red", "green", "magenta", "orange", "brown", "gray", "#6
0A090", "yellow", "purple");
var barcolors = new Array("#B0B0F0", "#F0B0B0", "#B0E0B0", "white");
function GetColor()
{
return colors[ci++];
}
function GetBarColor()
{
lastcolor = barcolors[bi++];
return lastcolor;
}
function GetLastBarColor()
{
return lastcolor;
}
function GetDate(node)
{
var sa = node.text.split("/");
return sa[0] + "/" + sa[1];
}
function GetLabel(node)
{
return node.text;
}
var first = true;
var nodename = "";
function GetName(node)
{
nodename = node.getAttribute("type");
first = true;
return nodename;
}
// This function exists to pad the chart with zeros to make sure the
// lines do not left align themselves.
var lastnode = "";
function GetValue(node)
{
var child = node.selectSingleNode(nodename);
return child.text;
}
function OetValue(node)
{
var result = first ? "0" : "";
var child = node.selectSingleNode(nodename);
if (child) {
if (child.text != "") {
first = false;
result = child.text;
}
}
return result;
}
</xsl:script>
<xsl:template match="/">
<xml xmlns:x="urn:schemas-microsoft-com:office:excel">
<x:WebChart>
<x:OWCVersion>9.0.0.2710</x:OWCVersion>
<x:Width>20664</x:Width>
<x:Height>9260</x:Height>
<x:Chart>
<x:PlotArea>
<x:Interior>
<x:Color>#F0F0F0</x:Color>
</x:Interior>
<x:Graph>
<x:Type>Line</x:Type>
<x:SubType>Standard</x:SubType>
<xsl:for-each select="list/Schema/ElementType/element[@type != 'id' $and$
@type != 'milestone' $and$ @view != 'bar' $and$ @view != 'false']">
<x:Series>
<x:Line>
<x:Color><xsl:eval>GetColor()
</xsl:eval></x:Color>
</x:Line>
<x:Caption>
<x:DataSource>-1</x:DataSource>
<x:Data><xsl:eval>GetName(this)
</xsl:eval></x:Data>
</x:Caption>
<x:Index>2</x:Index>
<x:Category>
<x:DataSource>-1</x:DataSource>
<x:Data><xsl:for-each
select="/list/item/milestone"><xsl:eval>GetLabel(this)
</xsl:eval>,</xsl:for-each></x:Data>
</x:Category>
<x:Value>
<x:DataSource>-1</x:DataSource>
<x:Data><xsl:for-each select="/list/item
[milestone]"><xsl:eval>GetValue(this)</xsl:eval>,</xsl:for-each></x:Data>
</x:Value>
</x:Series>
</xsl:for-each>
<x:ScaleID>69343828</x:ScaleID>
<x:ScaleID>69343968</x:ScaleID>
<x:Overlap>10</x:Overlap>
<x:GapWidth>0</x:GapWidth>
</x:Graph>
<x:Graph>
<x:Type>Column</x:Type>
<x:SubType>Stacked</x:SubType>
<xsl:for-each select="list/Schema/ElementType/element[@type != 'id' $and$
@type != 'milestone' $and$ @view ='bar' $and$ @view != 'false']">
<x:Series>
<x:Border>
<x:Color><xsl:eval>GetBarColor()
</xsl:eval></x:Color>
</x:Border>
<x:Interior>
<x:Color><xsl:eval>GetLastBarColor()
</xsl:eval></x:Color>
</x:Interior>
<x:Caption>
<x:DataSource>-1</x:DataSource>
<x:Data><xsl:eval>GetName(this)
</xsl:eval></x:Data>
</x:Caption>
<x:Index>1</x:Index>
<x:Value>
<x:DataSource>-1</x:DataSource>
<x:Data><xsl:for-each select="/list/item
[milestone]"><xsl:eval>GetValue(this)</xsl:eval>,</xsl:for-each></x:Data>
</x:Value>
</x:Series>
</xsl:for-each>
<x:ScaleID>69343828</x:ScaleID>
<x:ScaleID>100</x:ScaleID>
<x:Overlap>50</x:Overlap>
<x:GapWidth>10</x:GapWidth>
</x:Graph>
<x:Axis>
<x:AxisID>69344108</x:AxisID>
<x:ScaleID>69343968</x:ScaleID>
<x:Type>Value</x:Type>
<x:MajorGridlines>
<x:Line>
<x:Color>#BBBBBB</x:Color>
</x:Line>
</x:MajorGridlines>
<x:MajorUnit>50</x:MajorUnit>
<x:MinorUnit>10</x:MinorUnit>
<x:MajorTick>Outside</x:MajorTick>
<x:Placement>Left</x:Placement>
</x:Axis>
<x:Axis>
<x:AxisID>69337272</x:AxisID>
<x:ScaleID>100</x:ScaleID>
<x:Type>Value</x:Type>
<x:MajorGridlines>
</x:MajorGridlines>
<x:MajorUnit>1</x:MajorUnit>
<x:MajorTick>Outside</x:MajorTick>
<x:Placement>Right</x:Placement>
</x:Axis>
<x:Axis>
<x:AxisID>69344504</x:AxisID>
<x:ScaleID>69343828</x:ScaleID>
<x:Type>Category</x:Type>
<x:MajorGridlines>
<x:Line>
<x:Color>#BBBBBB</x:Color>
</x:Line>
</x:MajorGridlines>
<x:MajorTick>Outside</x:MajorTick>
<x:Placement>Bottom</x:Placement>
</x:Axis>
</x:PlotArea>
<x:Legend>
<x:Placement>Right</x:Placement>
</x:Legend>
</x:Chart>
<x:Scaling>
<x:ScaleID>69343828</x:ScaleID>
</x:Scaling>
<x:Scaling>
<x:ScaleID>69343968</x:ScaleID>
</x:Scaling>
<x:Scaling>
<x:ScaleID>100</x:ScaleID>
</x:Scaling>
</x:WebChart>
</xml>
</xsl:template>
</xsl:stylesheet>
Thanks,
Ted
Message #2 by Bala Ramachandran <bala_isme@y...> on Tue, 19 Feb 2002 17:42:25 -0800 (PST)
|
|
Hi,
would u pls mention the URL, where i can found
the sample code.. i need it.
Thanx,
Bala.
--- Ted Sivalon <sivalon@y...> wrote:
> I found a sample bit of code that used the Office
> Web Chart Component to
> create a dynamic chart based off of XML data and
> using XSL. I've managed
> to change the relevant pieces of the XSL document
> and the XML to meet my
> needs except for the ability to use dates on the Y
> axis of my chart. Any
> ideas?
>
> myxmlfile.xml
> <?xml version="1.0" encoding="windows-1252"?>
> <list next="65" timestamp="82" schemastamp="27">
> <Schema next="21">
> <ElementType name="item">
> <element id="s1" type="id"/>
> <!-- must have an id on every row -->
> <element id="s12" type="milestone" values=""
> view=""/>
> <element id="s10" type="base" values="" view=""/>
> <element id="s8" type="planned" values=""
> view=""/>
> <element id="s9" type="actual" values=""
> view=""/>
> <element id="s20" type="slip" title="" values=""
> view="bar" color=""/>
> </ElementType>
> <in/>
> </Schema>
> <title>Project Scheduling System<in/>
> </title>
> <item>
> <id>19</id>
> <milestone>Milestone 1</milestone>
> <base>March 1, 2002</base>
> <planned>March 1, 2002</planned>
> <actual>March 1, 2002</actual>
> <slip>0</slip>
> </item>
> <item>
> <id>20</id>
> <milestone>Milestone 2</milestone>
> <base>March 8, 2002</base>
> <planned>March 8, 2002</planned>
> <actual>March 15, 2002</actual>
> <slip>1</slip>
> </item>
> <item>
> <id>21</id>
> <milestone>Milestone 3</milestone>
> <base>March 22, 2002</base>
> <planned>march 22, 2002</planned>
> <actual>March 29, 2002</actual>
> <slip>0</slip>
> </item>
> </list>
>
> myxsl.xsl
> <xsl:stylesheet
> xmlns:xsl="http://www.w3.org/TR/WD-xsl">
> <xsl:script>
> var ci = 0;
> var bi = 0;
> var lastcolor = "";
> var colors = new Array
> ("black", "blue", "red", "green", "magenta",
> "orange", "brown", "gray", "#6
> 0A090", "yellow", "purple");
> var barcolors = new Array("#B0B0F0", "#F0B0B0",
> "#B0E0B0", "white");
> function GetColor()
> {
> return colors[ci++];
> }
> function GetBarColor()
> {
> lastcolor = barcolors[bi++];
> return lastcolor;
> }
> function GetLastBarColor()
> {
> return lastcolor;
> }
> function GetDate(node)
> {
> var sa = node.text.split("/");
> return sa[0] + "/" + sa[1];
> }
> function GetLabel(node)
> {
> return node.text;
> }
> var first = true;
> var nodename = "";
> function GetName(node)
> {
> nodename = node.getAttribute("type");
> first = true;
> return nodename;
> }
>
> // This function exists to pad the chart with zeros
> to make sure the
> // lines do not left align themselves.
> var lastnode = "";
> function GetValue(node)
> {
> var child = node.selectSingleNode(nodename);
> return child.text;
> }
> function OetValue(node)
> {
> var result = first ? "0" : "";
> var child = node.selectSingleNode(nodename);
> if (child) {
> if (child.text != "") {
> first = false;
> result = child.text;
> }
> }
> return result;
> }
> </xsl:script>
> <xsl:template match="/">
> <xml
> xmlns:x="urn:schemas-microsoft-com:office:excel">
> <x:WebChart>
> <x:OWCVersion>9.0.0.2710</x:OWCVersion>
> <x:Width>20664</x:Width>
> <x:Height>9260</x:Height>
> <x:Chart>
> <x:PlotArea>
> <x:Interior>
> <x:Color>#F0F0F0</x:Color>
> </x:Interior>
> <x:Graph>
> <x:Type>Line</x:Type>
> <x:SubType>Standard</x:SubType>
> <xsl:for-each
> select="list/Schema/ElementType/element[@type !
> 'id' $and$
> @type != 'milestone' $and$ @view != 'bar' $and$
> @view != 'false']">
> <x:Series>
> <x:Line>
>
> <x:Color><xsl:eval>GetColor()
> </xsl:eval></x:Color>
> </x:Line>
> <x:Caption>
>
> <x:DataSource>-1</x:DataSource>
>
> <x:Data><xsl:eval>GetName(this)
> </xsl:eval></x:Data>
> </x:Caption>
> <x:Index>2</x:Index>
> <x:Category>
>
> <x:DataSource>-1</x:DataSource>
> <x:Data><xsl:for-each
>
select="/list/item/milestone"><xsl:eval>GetLabel(this)
> </xsl:eval>,</xsl:for-each></x:Data>
> </x:Category>
> <x:Value>
>
> <x:DataSource>-1</x:DataSource>
> <x:Data><xsl:for-each select="/list/item
>
[milestone]"><xsl:eval>GetValue(this)</xsl:eval>,</xsl:for-each></x:Data>
> </x:Value>
> </x:Series>
> </xsl:for-each>
> <x:ScaleID>69343828</x:ScaleID>
> <x:ScaleID>69343968</x:ScaleID>
> <x:Overlap>10</x:Overlap>
> <x:GapWidth>0</x:GapWidth>
> </x:Graph>
> <x:Graph>
> <x:Type>Column</x:Type>
> <x:SubType>Stacked</x:SubType>
> <xsl:for-each
> select="list/Schema/ElementType/element[@type !
> 'id' $and$
> @type != 'milestone' $and$ @view ='bar' $and$ @view
> != 'false']">
> <x:Series>
> <x:Border>
>
> <x:Color><xsl:eval>GetBarColor()
> </xsl:eval></x:Color>
> </x:Border>
> <x:Interior>
>
> <x:Color><xsl:eval>GetLastBarColor()
> </xsl:eval></x:Color>
> </x:Interior>
> <x:Caption>
>
> <x:DataSource>-1</x:DataSource>
>
> <x:Data><xsl:eval>GetName(this)
>
=== message truncated ===
__________________________________________________
Do You Yahoo!?
Yahoo! Sports - Coverage of the 2002 Olympic Games
http://sports.yahoo.com
Message #3 by "Ted Sivalon" <sivalon@y...> on Wed, 20 Feb 2002 21:54:46
|
|
Here is the sample code URL I derived my code from
http://msdn.microsoft.com/library/default.asp?url=/library/en-
us/dnexxml/html/xml10162000.asp
I ended up using
<x:Number><x:FormatString>Short Date</x:FormatString></x:Number>
and converting the dates to days since 1/1/1900.
Ted
> I found a sample bit of code that used the Office Web Chart Component to
> create a dynamic chart based off of XML data and using XSL. I've
managed
> to change the relevant pieces of the XSL document and the XML to meet my
> needs except for the ability to use dates on the Y axis of my chart.
Any
> ideas?
>
> myxmlfile.xml
> <?xml version="1.0" encoding="windows-1252"?>
> <list next="65" timestamp="82" schemastamp="27">
> <Schema next="21">
> <ElementType name="item">
> <element id="s1" type="id"/>
> <!-- must have an id on every row -->
> <element id="s12" type="milestone" values=""
> view=""/>
> <element id="s10" type="base" values="" view=""/>
> <element id="s8" type="planned" values="" view=""/>
> <element id="s9" type="actual" values="" view=""/>
> <element id="s20" type="slip" title="" values=""
> view="bar" color=""/>
> </ElementType>
> <in/>
> </Schema>
> <title>Project Scheduling System<in/>
> </title>
> <item>
> <id>19</id>
> <milestone>Milestone 1</milestone>
> <base>March 1, 2002</base>
> <planned>March 1, 2002</planned>
> <actual>March 1, 2002</actual>
> <slip>0</slip>
> </item>
> <item>
> <id>20</id>
> <milestone>Milestone 2</milestone>
> <base>March 8, 2002</base>
> <planned>March 8, 2002</planned>
> <actual>March 15, 2002</actual>
> <slip>1</slip>
> </item>
> <item>
> <id>21</id>
> <milestone>Milestone 3</milestone>
> <base>March 22, 2002</base>
> <planned>march 22, 2002</planned>
> <actual>March 29, 2002</actual>
> <slip>0</slip>
> </item>
> </list>
>
> myxsl.xsl
> <xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
> <xsl:script>
> var ci = 0;
> var bi = 0;
> var lastcolor = "";
> var colors = new Array
>
("black", "blue", "red", "green", "magenta", "orange", "brown", "gray", "#6
> 0A090", "yellow", "purple");
> var barcolors = new Array("#B0B0F0", "#F0B0B0", "#B0E0B0", "white");
> function GetColor()
> {
> return colors[ci++];
> }
> function GetBarColor()
> {
> lastcolor = barcolors[bi++];
> return lastcolor;
> }
> function GetLastBarColor()
> {
> return lastcolor;
> }
> function GetDate(node)
> {
> var sa = node.text.split("/");
> return sa[0] + "/" + sa[1];
> }
> function GetLabel(node)
> {
> return node.text;
> }
> var first = true;
> var nodename = "";
> function GetName(node)
> {
> nodename = node.getAttribute("type");
> first = true;
> return nodename;
> }
>
> // This function exists to pad the chart with zeros to make sure the
> // lines do not left align themselves.
> var lastnode = "";
> function GetValue(node)
> {
> var child = node.selectSingleNode(nodename);
> return child.text;
> }
> function OetValue(node)
> {
> var result = first ? "0" : "";
> var child = node.selectSingleNode(nodename);
> if (child) {
> if (child.text != "") {
> first = false;
> result = child.text;
> }
> }
> return result;
> }
> </xsl:script>
> <xsl:template match="/">
> <xml xmlns:x="urn:schemas-microsoft-com:office:excel">
> <x:WebChart>
> <x:OWCVersion>9.0.0.2710</x:OWCVersion>
> <x:Width>20664</x:Width>
> <x:Height>9260</x:Height>
> <x:Chart>
> <x:PlotArea>
> <x:Interior>
> <x:Color>#F0F0F0</x:Color>
> </x:Interior>
> <x:Graph>
> <x:Type>Line</x:Type>
> <x:SubType>Standard</x:SubType>
> <xsl:for-each select="list/Schema/ElementType/element[@type != 'id'
$and$
> @type != 'milestone' $and$ @view != 'bar' $and$ @view != 'false']">
> <x:Series>
> <x:Line>
> <x:Color><xsl:eval>GetColor()
> </xsl:eval></x:Color>
> </x:Line>
> <x:Caption>
> <x:DataSource>-1</x:DataSource>
> <x:Data><xsl:eval>GetName(this)
> </xsl:eval></x:Data>
> </x:Caption>
> <x:Index>2</x:Index>
> <x:Category>
> <x:DataSource>-1</x:DataSource>
> <x:Data><xsl:for-each
> select="/list/item/milestone"><xsl:eval>GetLabel(this)
> </xsl:eval>,</xsl:for-each></x:Data>
> </x:Category>
> <x:Value>
> <x:DataSource>-1</x:DataSource>
> <x:Data><xsl:for-each select="/list/item
> [milestone]"><xsl:eval>GetValue(this)</xsl:eval>,</xsl:for-each></x:Data>
> </x:Value>
> </x:Series>
> </xsl:for-each>
> <x:ScaleID>69343828</x:ScaleID>
> <x:ScaleID>69343968</x:ScaleID>
> <x:Overlap>10</x:Overlap>
> <x:GapWidth>0</x:GapWidth>
> </x:Graph>
> <x:Graph>
> <x:Type>Column</x:Type>
> <x:SubType>Stacked</x:SubType>
> <xsl:for-each select="list/Schema/ElementType/element[@type != 'id'
$and$
> @type != 'milestone' $and$ @view ='bar' $and$ @view != 'false']">
> <x:Series>
> <x:Border>
> <x:Color><xsl:eval>GetBarColor()
> </xsl:eval></x:Color>
> </x:Border>
> <x:Interior>
> <x:Color><xsl:eval>GetLastBarColor()
> </xsl:eval></x:Color>
> </x:Interior>
> <x:Caption>
> <x:DataSource>-1</x:DataSource>
> <x:Data><xsl:eval>GetName(this)
> </xsl:eval></x:Data>
> </x:Caption>
> <x:Index>1</x:Index>
> <x:Value>
> <x:DataSource>-1</x:DataSource>
> <x:Data><xsl:for-each select="/list/item
> [milestone]"><xsl:eval>GetValue(this)</xsl:eval>,</xsl:for-each></x:Data>
> </x:Value>
> </x:Series>
> </xsl:for-each>
> <x:ScaleID>69343828</x:ScaleID>
> <x:ScaleID>100</x:ScaleID>
> <x:Overlap>50</x:Overlap>
> <x:GapWidth>10</x:GapWidth>
> </x:Graph>
> <x:Axis>
> <x:AxisID>69344108</x:AxisID>
> <x:ScaleID>69343968</x:ScaleID>
> <x:Type>Value</x:Type>
> <x:MajorGridlines>
> <x:Line>
> <x:Color>#BBBBBB</x:Color>
> </x:Line>
> </x:MajorGridlines>
> <x:MajorUnit>50</x:MajorUnit>
> <x:MinorUnit>10</x:MinorUnit>
> <x:MajorTick>Outside</x:MajorTick>
> <x:Placement>Left</x:Placement>
> </x:Axis>
> <x:Axis>
> <x:AxisID>69337272</x:AxisID>
> <x:ScaleID>100</x:ScaleID>
> <x:Type>Value</x:Type>
> <x:MajorGridlines>
> </x:MajorGridlines>
> <x:MajorUnit>1</x:MajorUnit>
> <x:MajorTick>Outside</x:MajorTick>
> <x:Placement>Right</x:Placement>
> </x:Axis>
> <x:Axis>
> <x:AxisID>69344504</x:AxisID>
> <x:ScaleID>69343828</x:ScaleID>
> <x:Type>Category</x:Type>
> <x:MajorGridlines>
> <x:Line>
> <x:Color>#BBBBBB</x:Color>
> </x:Line>
> </x:MajorGridlines>
> <x:MajorTick>Outside</x:MajorTick>
> <x:Placement>Bottom</x:Placement>
> </x:Axis>
> </x:PlotArea>
> <x:Legend>
> <x:Placement>Right</x:Placement>
> </x:Legend>
> </x:Chart>
> <x:Scaling>
> <x:ScaleID>69343828</x:ScaleID>
> </x:Scaling>
> <x:Scaling>
> <x:ScaleID>69343968</x:ScaleID>
> </x:Scaling>
> <x:Scaling>
> <x:ScaleID>100</x:ScaleID>
> </x:Scaling>
> </x:WebChart>
> </xml>
> </xsl:template>
> </xsl:stylesheet>
>
> Thanks,
> Ted
|
|
|
View Cart
