Thinking Outside Of The Grid
We've all heard the phrase "thinking outside of the box". Most of us use the term, but have you ever stopped to think what it really means? According to wikipedia, "Thinking outside of the box" is:
Specifically, let's think about DataGrid components. Although extremely useful and powerful, they are relatively boring controls. They consist of a simple display of tabular data in a grid. They are great for displaying large blocks of data, and are great for sorting data, but they do not provide for much interactivity or visualization.
Now, let's think "Outside of the grid"...
A while back, I wrote about creating Gantt Charts using item renderers within DataGrid components. Using datagrids as a means to visualize data requires stepping outside of the common preconceptions of what a DataGrid could *and* should be used for. I actually received a lot of feedback on this topic, both positive and negative, and I'm very excited that I could provoke such thought. I'm glad to see that people took that idea and ran with it. I feel that you should always be looking for new ways to do things, and finding better ways to utilize what you have.
On the same theme, I've got a new demo. I built this while stranded in Newark airport with a canceled flight. This example extends upon the previously mentioned example and provides an idea for what you can do with datagrids and the drawing API. This example is to visualize real time statistics for a monitoring system. It is based upon a datagrid because that is the best way to visualize and organize the data. It is meant to be:
This demo simply consists of a datagrid and several custom item renderers. Each item renderer has a specific type of visualization that is made possible by taking advantage of the drawing API, and overriding the updateDisplayList method. All of the data for this demo is actually calculated randomly in the Flex client, but this could easily represent data that is gathered by a polling mechanism or through data push using LiveCycle Data Services or a similar product. The colors of the visual components are calculated conditionally based on a configurable threshold value. In this case, if the utilization is above 2/3 (66%), then items are displayed red. Otherwise, they are displayed green. None of the existing functionality of a DataGrid column is lost. The example includes:
Feel free to contact me with any questions or comments at andrew.trice[ at ]cynergysystems.com
Enjoy!.
Thinking outside the box is a cliché or catchphrase used to refer to looking at a problem from a new perspective without preconceptions, sometimes called a process of lateral thought.Specifically with Flex, I firmly believe that it involves taking a step backwards from your current perspective and thinking about new ways to use the tools that you have in hand. Countless times I have mentioned that one of the major advantages that we have in player-based RIA applications are the drawing and bitmap manipulation APIs. You can use these APIs and techniques to bring an additional level of interactivity and analytical power to your applications with very little code and very little overhead.
Specifically, let's think about DataGrid components. Although extremely useful and powerful, they are relatively boring controls. They consist of a simple display of tabular data in a grid. They are great for displaying large blocks of data, and are great for sorting data, but they do not provide for much interactivity or visualization.
Now, let's think "Outside of the grid"...
A while back, I wrote about creating Gantt Charts using item renderers within DataGrid components. Using datagrids as a means to visualize data requires stepping outside of the common preconceptions of what a DataGrid could *and* should be used for. I actually received a lot of feedback on this topic, both positive and negative, and I'm very excited that I could provoke such thought. I'm glad to see that people took that idea and ran with it. I feel that you should always be looking for new ways to do things, and finding better ways to utilize what you have.
On the same theme, I've got a new demo. I built this while stranded in Newark airport with a canceled flight. This example extends upon the previously mentioned example and provides an idea for what you can do with datagrids and the drawing API. This example is to visualize real time statistics for a monitoring system. It is based upon a datagrid because that is the best way to visualize and organize the data. It is meant to be:
- Flexible - It should be able to support data that changes in quantity and value.
- Extensible - It should be able to scale well, and should be easily modified for future usage.
- Interactive - The user should be able to filter, sort, and/or rearrange the data as necessary.
- Visual - The user should be able to quickly and easily see trends in data, without complex analysis.
This demo simply consists of a datagrid and several custom item renderers. Each item renderer has a specific type of visualization that is made possible by taking advantage of the drawing API, and overriding the updateDisplayList method. All of the data for this demo is actually calculated randomly in the Flex client, but this could easily represent data that is gathered by a polling mechanism or through data push using LiveCycle Data Services or a similar product. The colors of the visual components are calculated conditionally based on a configurable threshold value. In this case, if the utilization is above 2/3 (66%), then items are displayed red. Otherwise, they are displayed green. None of the existing functionality of a DataGrid column is lost. The example includes:
- Bar Chart Visualization - This renderer allows you to view the utilization value as a percent width of the column. The bar width will always be with respect to the width of the column.
- Trend Visualization - This renderer allows you to view the progress of data trends and changes. Each time the data is updated, a bitmap manipulation takes place to shift the current bitmap by 3 pixels, and a new line is drawn to represent the current value. More on bitmap manipulation can be found here.
- Column Chart Visualization - This renderer allows you to view the utilization value as a percent height of the column cell. The column will always be with respect to the height of the cell.
- Gauge Visualization - This renderer allows you to view the utilization value as a dashboard-style gauge. The angle of the gauge pointer directly corresponds with the value of utilization (0-100) percentage, with respect to 180 degrees.
- AlphaColor Intensity Visualization - This renderer allows you to view the utilization color and intensity corresponding with the value of utilization (0-100) percentage. The alpha value of the drawn rectangle is equivalent to the utilization value. Items that have a higher utilization are thus drawn with a higher alpha value, and appear more intense.
Feel free to contact me with any questions or comments at andrew.trice[ at ]cynergysystems.com
Enjoy!.
posted by Andrew Trice at 5/14/2007 11:50:00 AM
0 Comments:
Post a Comment
<< Home