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.
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,
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
herefor 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
5 Comments
