Just another WordPress.com site

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('{&quot;label&quot;: &quot;', local-name(),'&quot;, &quot;data&quot;: &quot;',.,'&quot;},')" />
  </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)

  1. Federico Cicerchia said:

    I will try this.

    Thanks.

Leave a comment