Clinical Data Visualization Tools Project

Mentor: Paul Biondich Intern: Sashikanth Damaraju

Contents 1 Updates 2 TODO List 3 Introduction 4 Overall plan 5 Development plan

Updates

A working demo can be found here

Screenshot of current status:

The project does the following:

1. DWR getChartDate has been successfully created getChartObs.
2. JS performs calculations to get the dates into the required format
3. JS interaction. Generates a javascript object - OpenmrsGraph.js and passes it to the swf for rendering.
4. Scalable data points. Render graph using data tuples {(x1,y1),(x2,y2),..} instead of {x1,x2,x3,...} on the fly.

TODO List

1. Tooltips - What's the best place for them to be at ? Top Right.
2. Colors - Waiting for feedback ?
3. More JS integration - See

Introduction

This goal for this project is to create a set of tools that allow end-users to visualize the underlying data within OpenMRS. For this, we first need to define the real data that OpenMRS is built around.

Overall plan

1. The current implementation allows the user to view graphs as an image generated by the server upon choosing a particular concept. Outside the flash widget, I intend to enable to clinicians to see the list of available data on the patient, as opposed to searching for individual concepts, whether or not data exists on it. This would be by altering the popup on the graph page (that currently does a great job of allowing the clinician to search for concepts to be graphed) to first display the available data and allow the user to dynamically filter the set by typing in the text box. They will be allowed to select multiple concepts to be graphed.
2. Non numeric data:

   To be able to visualize non-numeric data on a timeline, the widget will use an interface similar to the MIT Simile's Timeline. This would be part of the Flash part of the widget that interacts with the Sidepanel to show more details of the particular event / reading. The sidepanel will also help to solve an occlusion problem (overlapping of elements) on the graph by moving the text off the graph. To the maximum possible extent, I will try to classify different types of data to enable some 'iconification' (or coloration) of the concept categories (as dots on the timeline)for easy understanding and reading.

3. Tooltips & Concept descriptions

   Like the Google Finance widget, the readings on the graph will be displayed on the top right corner. In addition to horizontal graph lines that guide the clinician with an easy visual reading of the graph. Hovering over a graph for slightly longer will generate a tooltip in the flash widget providing a detailed description of the concept from the dictionary.

4. One of the key points of this widget is the ability to add and remove concepts to be graphed without requiring a complete page reload. An XmlHttpRequest made by the 'Add concept' button will get the required xml data from the server and update the flash widget as soon as data transfer from the server is complete. The new concept to be graphed will be added into the widget, making the widget longer in size. The graphs could be ordered based on the level of criticality of the readings in addition to allowing a simple drag and drop to re-order the graphs. A small 'x' on a graph of a concept would allow the clinician to take it off the screen.
5. Timeline:

   Like the Google Finance widget, a flexible timeline is a very important feature of the widget. This will allow the clinician to change the time duration visible in the view port by dragging the bar that stretches and contracts the time duration in the viewport. Alternatively, I will provide buttons to view standard durations such as 1 week, 1 month, 3 months, 1 year.

6. Servlet:

   If any of the required functionality isn't already available, I will be creating tags and servlets to send the required xml as per the query from the widget. The Xml schema to be generated by the server will be decided upon at the start of the project. I also plan to send certain preferences within the xml, such as graph color, line style, opacity and other customizable settings

1. Future Contributions:
   1. The same widget will be more useful if it can be deployed on other platforms. A minimum functionality applet would allow it's use on Blackberries, Pda's and possibly even mobile phones.
   2. The same widget will be helpful in creating a tool for demographic analysis and visualization of patients region wise.

Development plan

@deprecated. This will definitely change soon.

1. Data generation: decide formats for data, preference parameters
2. server -javascript – flash interaction

   Get the skeletal structure of the data flow in place. This would require getting the servlets and tags in place for the javascript to be able to call the server.

3. Plotting – one concept

   Generation of a single concept graph with the proper data flow. Getting live data from the server

4. Criticality visualization: a red line showing lower/upper bounds of the value. A shade of red to show that patients values have been/are critical.
5. Auto Scaling of the graph based on current data values.
6. Display data values of current mouse position. Axes independent (meaning the values would update over all concepts on the graph, not just the concept under the mouse)
7. Complete Timeline (bottom panel)Pannable graph, using either the timeline or Graph.
8. Flexible time duration in the view port.
9. Generation graphs for multiple concepts.
10. Add / Remove concept. Simple x for remove, filter through concepts in the popup to add.
11. Non numeric – unique top level axes for displaying non-numeric data.
12. Side panel (Ajax-ish) – integration with flash events

PS: Learning Wiki editing too