SAP Mobile Analytics
Chart Interactions Form & Behaviour Release 1.0
Specifications for development team. [priority charts for R1: Line Chart, Bar Chart, Bubble Chart, Pie Chart, Table]
History Version
Date
Comment
1.0
Feb 12 2011
All charts: influence diagram and chart interactions form and David King behaviour. Changes (see log) . influence diagram / charts interactions as in Mobile Analytics Player functional spec.
April 7 2011
Author
1
LEGAL DISCLAIMER The information in this document is confidential and proprietary to SAP and may not be disclosed without the permission of SAP. This document is not subject to any license agreement or any other service or subscription agreement with SAP. SAP has no obligation to pursue any course of business outlined in this document or any related document, or to develop or release any functionality mentioned therein. This document, or any related presentation and SAP's strategy and possible future developments, products and or platforms directions and functionality are all subject to change and may be changed by SAP at any time for any reason without notice. The information in this document is not a commitment, promise or legal obligation to deliver any material, code or functionality. This document is provided without a warranty of any kind, either express or implied, including but not limited to, the implied warranties of merchantability, fitness for a particular purpose, or non-infringement. This document is for informational purposes and may not be incorporated into a contract. SAP assumes no responsibility for errors or omissions in this document, and shall have no liability for damages of any kind including without limitation direct, special, indirect, or consequential damages that may result from the use of this document. This limitation shall not apply in cases of intent or gross negligence. All forward-looking statements are subject to various risks and uncertainties that could cause actual results to differ materially from expectations. Readers are cautioned not to place undue reliance on these forward-looking statements, which speak only as of their dates, and they should not be relied upon in making purchasing decisions.
2
Charts in Mobile Analytics Player •
Appear in Split views with the Influence model
•
Split view charts can be tapped to maximize to view full chart mode.
•
Full Chart views will have:
•
–
Semantic Zooming where applicable
–
Stretching the charts to increase/decrease the distance between values
–
Interactive Legends where applicable.
See Player Functional Spec document for details on where charts appear in split view and full view.
Charts & Axes (Split View) Chart Title
Chart Title
Chart Title
3
2
5
5
5
4
4
4
3
3
3
2
2
2
1
1
1
0
0
0
1
1. X Axis has no labels. User moves finger along chart surface to see values on the charts. Double tap takes user to Full Chart view. 2. Y Axis Labels: In the split view, the Y axis labels will always show single digits or up to 2 digits (if absolutely necessary). These smaller versions of charts are just for reference and need not have the entire value shown.
3. Values of the dimension are shown in the section above the chart.
Full View Chart Anatomy
3. Reset: Allows you to reset modifications 4.
5 6
7
3
Pinch open/close within the chart area invokes semantic zooming or stretching. Semantic zooming is applicable only in hierarchical datasets. When the chart does not display hierarchical data sets, or if the Lock on the semantic zoom axis is enabled, the pinch open gesture stretches the chart by increasing the distance between the increments. Whether one or both axis have hierarchical data, the angle of pinch does not determine how much each axis zooms.
5.
6. 7.
made to a chart. Sends the chart back to default state. Minimize: Charts in the Mobile Analytics player are modifiable only when in expanded mode. This icon allows you to minimize the chart to original size. For more details – refer to the player Environment F+B. Locking Axes: When both axis consist of dimensions or measures that can contribute to a semantic zoom, the lock icon allows you to lock the axis in order to semantically zoom only along one axis. This icon appears ONLY when both axis can be semantically zoomed. Table Icon: Allows you to switch the chart to a table view. Charts icon: Allows you to switch chart types.
Swiping: 1. Bar Charts: shows vertical line and pop-over with value of nearest dimension (bar). 2. Line Charts: shows vertical line and pop-over with value of nearest dimension (point on line). 3. Bubble: Pans the chart surface when applicable. 4. Pie: Rotates the pie, clockwise or anti-clockwise. Two Finger Swipe – Pans the Graph. Two finger swipe does not apply to Pie Charts
5 6. The Range Selector shows a limited view
6
within a range. It can appear for the Y axis for horizontal bar charts only. Always show a Range Selector with Bar and Line charts.
Semantic Zooming and Stretching details
Grid Lines For Bar and Line Charts the grid lines above show the distance between each dimension on the X Axis. When user pinches open on the chart surface, the grid lines stretch up to a certain amount (amount TBD in development) before semantic zooming begins (possible with hierarchical dimensions in a dataset). If hierarchical dimensions are not a part of this chart, the stretching continues and stops at a certain point (this is TBD in development). To increase the distance between measures for finer viewing of data (Y Axis for vertical bar and line charts), the user will access this through chart filters. Bubble charts are different and the interaction of zooming is specified on slide 13. Re-loading of charts: Ensure smooth transitions while re-loading charts.
Range Selector Anatomy This Range Selector style applies to:
1. Line 2. Bar 3. ‌ Others TBD Shows the full range of the axis. Range Modifiers: Allows you to drag one or both to alter the range being viewed within the chart area.
Range Selector Rules: 1. Appear only for axis containing dimensions. 2. Provide a Range Selector for all line and bar charts. 3. If semantic zooming is relevant for the data set, ensure the range selector appropriately changes based on the zoom level (hierarchy level). 4. Pie Charts never have Range Selectors.
Range being viewed. You can tap & hold to move this exact range to the left or right in the Range Selector.
Bubble charts have their own style of a Range Selector (see Bubble Chart spec).
Axis Labeling 9
500
8 400 7
LANDSCAPE
300 6 200
PORTRAIT
5
100 4
3
Label 1 Long Lab… Label 3
Label 4
Label 5
Label 6
Label 7
2
1
Label 1
Label 2
Label 3
Label 4
Label 5
• Intelligent labels – Label all entities on the X axis till they start overlapping. Once overlap occurs, show labels on alternate entities. Once overlap occurs in this case, don’t show labels. • Y Axis labels are not to exceed 3 digits. • Charts should be loaded to the full chart area. So if there the chart is Revenue per week in 2010, show all 52 weeks in the chart area.
Double Tap in Charts – Handling the navigation path All
Americas…
North America
x
1. Double Tapping an entity in a chart takes you within the hierarchy of that entity if applicable. 2. Once within the hierarchy trail – a navigation path builds above the chart to show the path of progress. 3. The user is able to re-trace his/her path by single tapping the relevant level in the nav path. Motion Graphics: Smooth animation is expected when going from level to level. In bar charts, going downward in the hierarchy the double tap breaks the element into smaller bars, which spread across the chart area and take up the entire area. For line charts, the double tapping a data point breaks it into the relevant number of data points and the line spreads across the chart area in both directions. In Bubble charts, the bubble breaks into smaller bubbles and the chart area zooms in to the relevant coordinates in the bubble chart. In Pie Charts, the double tapped pie breaks into the relevant no. of pies and spreads in both clockwise and anticlockwise direction to take over the entire area of the pie. Going back up the hierarchy should reverse the animation.
Bar Chart x
• Always show a Range Selector with a bar chart, so user can determine the range to view, using the Range Selector. • Single Tap to highlight a bar in the chart. On tap, a pop-over appears with a pointer to the selected bar with the relevant data shown in text within the bubble. Content TBD. • X icon: Tapping x icon removes the pop-over and the vertical line and un-highlights the bar. • Bar Charts can be semantically zoomed. • Swipe finger across the bar chart to show a vertical line with the value of the element (see next slide). The pop-over and line travel from bar to bar in the chart. • Double Tap: bar to go deeper within the hierarchy of only that bar (if present). Do nothing (only highlight the bar) if hierarchy is not present. • Pinch Open/Close: Stretches/Semantically zooms where applicable. When Semantically zooming, go deeper into the hierarchy of all elements on the chart.
Label 1
Label 2
Label 3 44 px height tap region for small bars in dataset
Motion Graphics: When loading the full view of the bar chart for the first time, animate the bars so they rise from the dimension axis and reach their actual value. E.g.: For vertical bar, bars rise from X-Axis.
Bar Chart cont’d x
• There may be situations where a large no. of bars will be present within the chart area. To cater to these scenarios - When you swipe across the surface of any bar chart, a vertical line appears to show you the value of the data point (along the line). Dragging your finger across moves the vertical line across the elements on the bar chart. The line and popover stays when you release the touch on the chart. • X icon: Tapping x icon removes the pop-over and the vertical line. • Touch and hold in the same spot invokes the multi-select tool (see later slide for details). • Single tap selects a bar element and shows pop-over on top of the bar (previous slide).
Note: No Labels when more than 10 bars in Portrait and 14 in landscape
Line Chart x
2
1. When you touch anywhere on the surface of
a line chart, a vertical line appears to show you the value of the data point (along the line). Show a node on the line (as shown). If no data point is present at the location of touch, show value of closest data point in pop-over. Dragging your finger across moves the vertical line across the line chart. The vertical line and pop-over stays at the last point of release from the chart. 2. X icon: Tapping x icon removes the pop-over and the vertical line. 3. Pinch Open/Close: stretches the chart area and semantically zooms when applicable. First stretch the chart and then semantically zoom. Note: When Pinching open/close, two fingers are interacting with the chart area, so no popover or vertical line should be present.
1
Motion Graphics: When loading Line charts for the first time, load the chart area (without the line) and Range Selector frame, draw the line from left to right. Once the entire line is drawn, show the line within the Range Selector.
Line Chart data points 1. Show Dots in a line chart when: Tap area for
each dot is 44x44px and gap between the tap area is 15px. If these conditions are not met, do not show dots. 2. Vertical line with pop-over (earlier slides) are to be shown when dots are visible or not visible. 3. Double Tap: on a dot reveals the hierarchy within that dot only. 4. Pinch Open: Reveals the hierarchy within all the dots.
44px
44px
44px
15px
If there are multiple lines on the chart, a legend must be shown (In Portrait: Below the chart, In Landscape: to the Right side of the chart). The Legend is active. Tapping a legend highlights x the respective line in the chart. The other lines are dimmed (Visual Design TBD). To bring back all lines to active, tap the active line legend again.
Line Chart cont’d
Place the legend below the Range Selector in Portrait view. Swiping your finger along the chart area shows a vertical line and the pop-over shows the values of all the dimensions along the vertical line. If the pop-over cannot show all dimensions, a chevron is provided to expose the next value (s). X icon: Tapping x icon removes the pop-over and the vertical line. Multiple Lines Scenario: If no line is highlighted and user taps the chart area, the information pop-over will move over the chart area (as shown) to accommodate for the multiple values that need to be represented. If one line is highlighted, dragging your finger across the chart area shows the value only for the highlighted line (see previous slide). Motion Graphics: For multi line charts, all lines are drawn at the same time (from left to right).
Line 1
Line 2
No more than 5 lines in a multi line chart.
Line 3
Bubble Charts 1. Pinch Open/Close: Semantically zooms the x
3
2.
3. 1
4. 5. 6.
2
bubble chart, if applicable (Here the bubbles should be data with inherent hierarchies, like Product Categories). The location of pinch determines which area is zoomed (see Google Maps). When zoomed in to the appropriate limit (TBD), The bubble(s) in view smoothly start breaking into smaller bubbles (one level down in the hierarchy). If no hierarchy is present within the chart, the view zooms to the part of the chart being pinched open – the bubble simply increases smoothly in size. Swipe: along the chart surface shows a vertical line and pop-over with value of the bubble. The vertical line and pop-over moves from bubble to bubble (horizontally). Releasing the touch on the chart area leaves the line and pop-over at the last point of contact. Tapping a bubble highlights it and shows a popover with the relevant information about the bubble. Tapping another bubble shifts the highlight and moves the pop-over to the highlighted bubble. Range Selector: For Bubble Charts, the Range Selector appears to the top right of the chart. X icon: Tapping x icon removes the pop-over and the vertical line.
Motion Graphics: When the chart area loads in full view, bubbles should grow from a point to the target size gradually.
Bubble Chart Range Selector
Range Selector for bubble charts: 1. Always shown with full view of a bubble chart. 2. When user pinches open to zoom in to chart area, the “in view” range or “window” becomes smaller and vice versa for pinch open. 3. The “window” can also be moved around by holding it. 4. When the “window” is moved around the chart area re-loads to show the area within the window in the Range Selector.
Pie Chart The Whole pie is a touch surface. To rotate the chart, tap, hold and move the pie chart surface clockwise or anticlockwise. The value pop-over remains on a pie chart always â&#x20AC;&#x201C; to show the value of the portion of the pie the pop-over points to. In landscape mode the pop-over moves to the right. Tapping the chevrons (< or >) in the pop-over moves the pie surface in the clockwise (>) or anticlockwise (<) direction.
Pie Chart Motion Graphics Motion Graphics: When the pie loads for the first time in full view, the whole pie is shown along with the pop-over for one slice in the pie. The pointer of the pop-over points slightly off the central axis of the slice. The pie then rotates clockwise so the pop-overâ&#x20AC;&#x2122;s pointer points to the central axis.
Time Series Browsing in Charts Allows users to browse data over a period of time. For charts equipped with time series browsing, • Pressing this icon launches a pop-over, which shows the time series control. After the pop-over is visible, it takes the user from start to end of the time series. The play button becomes a Pause button. User can pause this at any time or take control of the slider to automatically pause the time series. If the user presses Pause, it reverts to Play state and continues the time series from the point the user left the slider at. • Slider control: Allows you to slide to a specific year to view the data for that year. • The pop-over can be dismissed at any time by tapping anywhere outside it. • Animation in charts when time series is in progress will be worked out during development.
2004
Tables 4
Measures
Dimension Titleâ&#x20AC;Ś
1
Tabular views should be available for every chart visualization. A control is provided (as shown in the chart anatomy â&#x20AC;&#x201C; slide 4) to switch to the chart view. The Dimension and Measures columns stay anchored to the page always.
Dimension Names
1
2
3
3
Table Gestures: 1. Horizontal swipe: Moves the columns (measure names) including the headers, horizontally, left to right or right to left. 2. Vertical swipe: Moves the rows (dimensions) including the row header (dimension names), vertically, up or down. 3. Angled swipe: Regardless of the angle of the swipe, the rows (dimensions) and columns (measures) scroll. 4. Dimension Title always stays on screen regardless of scroll direction.
Tables cont’d
Dimension Title…
Measure
Dimension 1
1. If multiple dimension types are available in this table (Region, Product Category, Time etc…), the dimension title is tappable. Tapping this title shows a list of available dimensions. Tapping one, changes the table to show measures for that particular dimension.
Dimension Title…
Region Product Category Company
Dimension Names
Time
1. Each Measure column when tapped once, 2
takes the entire table width to show just the values of that particular measure. The table content area changes to show the values of that measure (numbers) and a bar chart (for a quick visual and numerical overview). Tapping the table content area again sends the table back to the original table visualization (previous slide). Note: When the Table has just one measure in view, this is the default view of that table.
APPENDIX