Just some simple code to illustrate.
First i made a simple querytemplate:
select
10 as price1,
50 as price2,
20 as price3,
20 as price4
And created a stylesheet for transforming the Rowsets/Rowset/Row into a json string:
<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" >
<xsl:output method="text" encoding="UTF-8"/>
<xsl:template match="/">
<xsl:text>[</xsl:text>
<xsl:for-each select="//Rowsets/Rowset/Row[1]/*">
<xsl:value-of select="concat('{"label": "', local-name(),'", "data": "',.,'"},')" />
</xsl:for-each>
<xsl:text>{"test":"100"}]</xsl:text><!-- was to lazy to check for last element wich should have no comma after..-->
</xsl:template>
</xsl:stylesheet>
And now i created a html page with som jQuery scripts:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Flot Pie Examples</title>
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="http://people.iola.dk/olau/flot/excanvas.min.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="http://people.iola.dk/olau/flot/jquery.js"></script>
<script language="javascript" type="text/javascript" src="http://people.iola.dk/olau/flot/jquery.flot.js"></script>
<script language="javascript" type="text/javascript" src="http://people.iola.dk/olau/flot/jquery.flot.pie.js"></script>
<script type="text/javascript">
function onDataReceived(series) {
var data = [];
//We need to parse the returned dataset, as the data values are parsed as strings and not numbers
for(var i = 0, len = series.length; i<len; i++) {
data.push({"label":series[i].label,"data":Number(series[i].data) });
}
$.plot($("#placeholder"), data,
{
series: {
pie: {
show: true
}
},
grid: {
hoverable: true,
clickable: true
} });
}
$.ajax({
url: "http://[server IP]:50000/XMII/Illuminator?QueryTemplate=[Query Template url]&Content-Type=text%2Fhtml&StyleSheet=http://localhost:50000/XMII/CM/Jeky/flot_pie_export.xsl",
method: 'GET',
dataType: 'json',
success: onDataReceived
});
</script>
</head>
<body>
<div id="placeholder" style="width:600px;height:300px;border: 2px solid #000;"></div>
</body>
</html>
And now i have a nice piechart 🙂
There is room for improvements, but i just hacked i up as a proof of concept.
Remember for this to work, the users need the role SAP_XMII_DynamicQuery!
Comments on: "Using SAP MII with Flot Pie chart library" (1)
I will try this.
Thanks.