Generating Pie chart in MII by using Flot

[Former Member]

Dear All,

I am trying to generate Pie chart by using Flot.I have gone through this thread:

But still fighting with this.I am getting the data from MII query in JSON format by using an xslt as Inline transformation.

Called the MII query in irpt page by using AJAX.Pasted the code below:

$.ajax(

},

legend:

});

}

//}

});

Any idea why Pie chart is not getting generated??

Thanks in advance.

Regards

Manisha

[Former Member · Accepted solution]

HI Manisha,

In what format the query is returning data after you apply stylesheet transformation? Since XSLT is case sensitive please note that the column names case is same in query and the XSLT.

Regards,

Musarrat

[Former Member · Accepted solution]

Hi Musarrat,

Thanks for your response. I am getting the query output like this after applying XSLT in Inline Transformation:

<output>

{ "label": "REWORK SCRAP", "data":[

[1999, 30], [2000, 70], [2001, 70], [2002, 80], [2003, 50], [2004, 40], [2005, 20], [2006, 60], [2007, 10], [2008, 30], [2009, 20], [2010, 70]]}

</output>

Regards

Manisha

[Former Member · Accepted solution]

Hi Musarrat,

I am not able to paste the data in correct format.bracket is missing in my last thread.

data is coming as per the data you mentioned in your blog.

Regards

Manisha

[Former Member · Accepted solution]

Hello Manisha,

Flot consumes data in different format ifor pie charts. I took line chart as an example in my blog.If you see the examples in flot zip file you downloaded, you'll notice that pie chart should be fed with data in following format

[
		{ label: "Series1",  data: 10},
		{ label: "Series2",  data: 30},
		{ label: "Series3",  data: 90},
		{ label: "Series4",  data: 70},
		{ label: "Series5",  data: 80},
		{ label: "Series6",  data: 110}
	]

Please change the XSL accordingly. I do not have access to MII server right now so couldn't give you the exact XSL.

Hope it helps.

Regards,

Musarrat

[Former Member · Accepted solution]

Hi Musarrat,

Thank you.I changed the XSLT accordingly as you suggested.I think in the irpt page the below line also should be changed.

onDataReceived(eval('(' + $(data).find("output").text() + ')'))

But I am not getting what needs to be changed.Please suggest me on this.

Thanks.

Regards

Manisha

[Former Member · Accepted solution]

At what event you are triggering the functions? Are you using $(document).ready() wrapper to define all the function?

Regards,

Musarrat

[Former Member · Accepted solution]

Hi Musarrat,

I am invoking the function by using a Button..

<p>

<input class="dataUpdate" type="button" value="Poll for data">

</p>

$("input.dataUpdate").click(function () {

// reset data

window.setInterval(update,1000);

});

Thanks

Manisha

[Former Member · Accepted solution]

Hello Manisha,

I wish I had access to MII right now. Want to help you out.

I got a blog a blog on pie chart and MII on google. May be this will help you

http://jenskyed.wordpress.com/2011/05/18/using-sap-mii-with-flot-pie-chart-library/

Regards,

Musarrat

[Former Member · Accepted solution]

Hi Musarrat,

Thanks a lot :).In fact I am not able to open this link.Can you pls copy paste the content.

Regards

Manisha

[Former Member · Accepted solution]

Hi Musarrat,

Still I am fighting with this.Now I am able to open the link.Changed the HTML code.But XSLT I did not change.

After applying the XSLT,Query Template is returning output as you suggested in the Thread.

So I did not change my XSLT as per this blog.

Still I am anot able to see Pie chart.

Thanks

Manisha

[Former Member · Accepted solution]

Hi Manisha,

Use the following code. it is working for me.

Use XSL as

<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<output>

    [ <xsl:for-each select=" Rowsets/Rowset/Row">
<xsl:if test="position() > 1">,</xsl:if> { "label": <xsl:value-of select="YEAR"/>, "data":<xsl:value-of select="VALUE"/>}</xsl:for-each>]
</output>
</xsl:template>
</xsl:stylesheet>

Gud Luck

Anshul