Skip to Content

We wanted to use the Flex Charts on the page without worrying how charts are getting the data, some thing similar to normal Applets that we use in MII pages. There an idea struck in my mind to make the use of Object oriented approach of Flex to get some really good reusable components, which could be used as Java Applets like we do in normal HTML MII web page. Just provide the Query Template and Display template to display the data.

I created some of the custom charts by extending the standard charts of Flex so that only the QueryTemplate is provided to the display object from where data has to be fetched.

In this little exercise I will demonstrate how we can leverage the MII QueryTemplate with the Flex charts to get the highly interactive dashboards. I will consider the tags from default Simulator server to get the dashboard.

First let’s make two tag QueryTemplate, one in Current Mode and one in History mode.

image

I have considered three tags here L1OEE, L2OEE and L3OEE and saved the QueryTemplate as OEE_Tags_Current, similarly make another QueryTemplate in History Mode and Saved as OEE_Tags_History, keeping the other settings as default.

Now lets make a Flex Application which will include Bar Chart with the current values form the Tag Query, On selection of each of the Bar the History data will be shown in another line chart for that selected Tag.

Lets start the application in design mode as shown below,

 !https://weblogs.sdn.sap.com/weblogs/images/251841369/DesignPage.JPG|alt=|src=https://weblogs.sdn.sap.com/weblogs/images/251841369/DesignPage.JPG!

Please note that the charts shown above are NOT the standard charts that are available on Flex development environment but the custom charts that are build inheriting the Standard Charts, You can find code Custom Line Chart as snippet

here

for your reference. 

Here is little snippet of the code for this application which shows how the QueryTemplate is used to get the data for each of these charts.

<u>For Current Column Chart</u>+dataSource=”Training/Rupesh/Blogs/OEE_Tags_Current” </u>dataOnCreate=”{true}” id=”columnchart1″ height=”173″ width=”702″></p><p class=”MsoNormal”> <WComponents:series></p><p class=”MsoNormal”>     <mx:ColumnSeries labelField=”L1OEE” displayName=”L1OEE” yField=”L1OEE”/></p><p class=”MsoNormal”>     <mx:ColumnSeries labelField=”L2OEE” displayName=”L2OEE” yField=”L2OEE”/></p><p class=”MsoNormal”>     <mx:ColumnSeries labelField=”L3OEE” displayName=”L3OEE” yField=”L3OEE”/></p><p class=”MsoNormal”> </WComponents:series></p><p class=”MsoNormal”></WComponents:WColumnChart></p><p class=”MsoNormal”> </p><p class=”MsoNormal”><u>For the History Line Chart</u></p><p> </p><p><WComponents:WLineChart x=”34″ y=”314″ id=”HistoryChart” height=”220″ width=”702″ <u>dataSource=”Training/Rupesh/Blogs/OEE_Tags_History”+The dataOnCreate attribute in Column chart tells the compiler that we need to populate the OEE for three tags on creation of the chart, we have set this to true since we need the three values to be populated on load of the webpage.

Now we need to add selection event to the all the series of  WColumnChart to populate the data on the history line chart. The updated code will look like this

<WComponents:WColumnChart x=”34″ y=”120″ dataSource=”Training/Rupesh/Blogs/OEE_Tags_Current” showAllDataTips=”true” dataTipMode=”single” dataOnCreate=”{true}” id=”columnchart1″ height=”173″ width=”702″ >click=”updateHistoryChart(event)”</u>/></p><p>      <mx:ColumnSeries labelField=”L2OEE” displayName=”L2OEE” yField=”L2OEE” <u>click=”updateHistoryChart(event)”</u>/></p><p>      <mx:ColumnSeries labelField=”L3OEE” displayName=”L3OEE” yField=”L3OEE” <u>click=”updateHistoryChart(event)”/Now we need to put the updateHistoryChart(event) in the script to handle the click event and update the history chart, idea is to get history chart for the selected OEE item.

The updateHistoryChart(event) method will look some thing like this:

private function updateHistoryChart(e:MouseEvent):void{

var selectedOEE:String = ColumnSeries(e.currentTarget).yField;

HistoryChart.getData();// This method is to call the Query Template and get data

LineChartSeries.yField=selectedOEE; // This is to render the line chart for the selected tag

lineCategoryAxis.title = selectedOEE; // this is to update title of Line chart

}

That’s it. This completes our page. The final look of the page will be like this

!https://weblogs.sdn.sap.com/weblogs/images/251841369/FinalPage.JPG|alt=|src=https://weblogs.sdn.sap.com/weblogs/images/251841369/FinalPage.JPG!</body>

To report this post you need to login first.

5 Comments

You must be Logged on to comment or reply to a post.

  1. Abesh Bhattacharjee
    Hi Rupesh,
    Really appreciate your effort on this blog.
    But I think this example of little use to community if you do not share the source code of the custom components.
    If there is some hurdle in sharing the source code of the custom component, it would be great if you could write a separate blog with a simple example of how can one go about creating one 🙂
    Best
    Abesh
    (0) 
    1. Rupesh Bajaj Post author
      Hi Abesh
      Thanks for the comment, I am already in a process to write a blog which explains how we can use custom components which handles data,

      I could not share the whole of the code since it’s in Beta stage and also there are many files involved.

      I have taken note of your point and will cover in my next post

      Regards
      Rupesh

      (0) 
  2. iyappan l
    hi i am acessing query template and display the value in the data grid. I followed as per your video clip. But while i try to execute i am getting security error acessing url

    i am new to both this technology (xMII and flex). Can you please give me suggestion on this.

    I will be very happy if i am able to solve this. So i can proceed to next step

    (0) 
    1. Rupesh Bajaj Post author
      Hi iyyapan,
      There are few things that you need to take care before actually using this.
      1. make sure the browser instance that you are working on has xmii server authentication.( To do this, loging to xmii server on one browser, copy paste the link for the output of flex onto this browser address bar)
      2.beofre you start on this exercise, I suggest you first complete the blog published by abesh bhatachargee)

      regards

      (0) 

Leave a Reply