Displaying bar charts with a fish-eye distortion effect
A system and a method are disclosed for visually displaying data points using charts on a display screen with limited display area. A fish-eye distortion region allows presentation of detailed information for some data points compared to other data points that are displayed. The chart can be moved relative to the distortion region thereby changing the data points displayed within the fish-eye that present additional information. The relative movement between the chart and the distortion region is triggered by different kinds of inputs from the user including, tilting of the device, swiping with a pointing device and selecting a particular data point.
1. A method for displaying on a display screen of a mobile device a bar chart representing a plurality of data points, the method comprising:
displaying a first set of bars on the display screen, each bar representing one of the plurality of data points and having a first width and a variable height according to a value of the represented data point;
displaying a second set of bars on the display screen, each bar representing one of the plurality of data points and having a second width and a variable height according to a value of the represented data point, the second width being greater than the first width;
displaying a third set of bars on the display screen, each bar displayed between bars of the first set and bars of the second set and representing one of the plurality of data points, and each having a third width and a variable height according to a value of the represented data point, the third width being greater than the first width and less than the second width; and
responsive to receiving a user input, altering the display of at least one of the bars in the third set to have the first width, and altering at least one of the bars in the second set to have the third width.
2. The method of claim 1 , wherein each bar has at least one associated label, and the label is not displayed for bars in the first set, and is displayed for bars in the second set.
3. The method of claim 2 wherein each bar has at least a second associated label, and the label is not displayed for bars in the third set, and is displayed for bars in the second set.
4. The method of claim 2 wherein each bar has at least a second associated label, and the label is not displayed for bars in the first set, and is displayed for bars in the second and third sets.
5. The method of claim 1 , wherein the width of a bar in the second set of bars is determined based on an amount of information displayed for the bar.
6. The method of claim 1 , wherein bars of the first set are displayed in a first color and bars of the second set are displayed in a second color.
7. The method of claim 6 wherein bars of the third set are displayed in a third color.
8. The method of claim 1 , wherein bars of the first set are displayed in a first shading and bars of the second set are displayed in a second shading.
9. The method of claim 8 wherein bars of the third set are displayed in a third shading.
10. The method of claim 1 , wherein the second set and the third set are displayed in a fixed region on the display.
11. The method of claim 1 , wherein the second set and the third set are displayed in a moveable region on the display.
12. The method of claim 11 , wherein altering the display further comprises moving the moveable region to incorporate the at least one of the bars in the first set.
13. The method of claim 1 , wherein the second set of bars is displayed in a rectangular portion of the chart display area parallel to a bar displayed in the bar chart.
14. The method of claim 1 , wherein the user input includes physically tilting the display screen.
15. The method of claim 14 , wherein a rate at which the display is altered is dependent at least in part upon the degree of tilt of the display screen.
16. The method of claim 1 , wherein the user input includes a swiping gesture across the display screen.
17. The method of claim 1 , wherein a label determined to be displayed for a bar is displayed as a popup associated with the bar.
18. The method of claim 1 , wherein a label determined to be displayed for a bar is displayed overlaying the bar.
19. The method of claim 1 , further comprising:
responsive to receiving a selection of a bar in the second set of bars, displaying a second chart associated with the selected bar.
20. A system for displaying on a display screen of a mobile device a chart representing a plurality of data points, the system comprising:
a computer processor; and
a computer-readable storage medium storing computer program modules configured to execute on the computer processor, the computer program modules comprising:
an input/output driver module configured to:
display a first set of bars on the display screen, each bar representing one of the plurality of data points and having a first width and a variable height according to a value of the represented data point;
display a second set of bars on the display screen, each bar representing one of the plurality of data points and having a second width and a variable height according to a value of the represented data point, the second width being greater than the first width;
display a third set of bars on the display screen, each bar displayed between bars of the first set and bars of the second set and representing one of the plurality of data points, and each having a third width and a variable height according to a value of the represented data point, the third width being greater than the first width and less than the second width; and
responsive to receiving a user input, alter the display of at least one of the bars in the third set to have the first width, and alter at least one of the bars in the second set to have the third width.
21. A computer program product having a non-transitory computer-readable storage medium storing computer-executable code for displaying on a display screen of a mobile device a chart representing a plurality of data points, the code comprising:
an input/output driver module configured to:
display a first set of bars on the display screen, each bar representing one of the plurality of data points and having a first width and a variable height according to a value of the represented data point;
display a second set of bars on the display screen, each bar representing one of the plurality of data points and having a second width and a variable height according to a value of the represented data point, the second width being greater than the first width;
display a third set of bars on the display screen, each bar displayed between bars of the first set and bars of the second set and representing one of the plurality of data points, and each having a third width and a variable height according to a value of the represented data point, the third width being greater than the first width and less than the second width; and
responsive to receiving a user input, alter the display of at least one of the bars in the third set to have the first width, and alter at least one of the bars in the second set to have the third width.
22. The system of claim 20 , wherein each bar has at least one associated label, and the label is not displayed for bars in the first set, and is displayed for bars in the second set.
23. The system of claim 22 wherein each bar has at least a second associated label, and the label is not displayed for bars in the third set, and is displayed for bars in the second set.
24. The system of claim 20 , wherein the width of a bar in the second set of bars is determined based on an amount of information displayed for the bar.
25. The system of claim 20 , wherein bars of the first set are displayed in a first color and bars of the second set are displayed in a second color.
26. The computer program product of claim 21 , wherein each bar has at least one associated label, and the label is not displayed for bars in the first set, and is displayed for bars in the second set.
27. The computer program product of claim 26 wherein each bar has at least a second associated label, and the label is not displayed for bars in the third set, and is displayed for bars in the second set.
28. The computer program product of claim 21 , wherein the width of a bar in the second set of bars is determined based on an amount of information displayed for the bar.
29. The computer program product of claim 21 , wherein bars of the first set are displayed in a first color and bars of the second set are displayed in a second color.