Browse files

Added ability to have the X axis scroll horizontally with big graphs …

…and only to line graphs. Updated tooltip accordingly.
  • Loading branch information...
1 parent 7790dc7 commit 9cda4600724a92ff1a4d077a7db17cc6ecac605d @irae committed Jun 9, 2010
Showing with 54 additions and 33 deletions.
  1. +26 −20 interactive.html
  2. +19 −10 tooltip.visualize.jQuery.js
  3. +9 −3 visualize.jQuery.js
View
46 interactive.html
@@ -106,9 +106,15 @@
});
</script>
<style type="text/css" media="screen">
- table#us {display:none}
- #us-chart .visualize-labels-x,
+ #us2 td, #us2 th {font-size:10px;padding:1px;}
+ table#us {display:none;}
#us-chart2 .visualize-labels-x {display:none} /*hide this charts xLabels since they superpose each other */
+ #us-chart .visualize-scroller {margin-bottom:50px;}
+ #us-chart canvas {float:left;position:relative;}
+ #us-chart,
+ #us-chart .visualize-labels-y {width:700px !important;}
+ #us-chart .visualize-labels-x {display:none;}
+ #us-chart .visualize-scroller {width:700px;height:350px;overflow-x:auto;}
</style>
</head>
<body>
@@ -178,24 +184,24 @@
<thead>
<tr>
<td>date</td>
- <th>01/30/2007</th>
- <th>02/01/2007</th>
- <th>03/01/2007</th>
- <th>04/01/2007</th>
- <th>05/01/2007</th>
- <th>06/01/2007</th>
- <th>07/01/2007</th>
- <th>08/01/2007</th>
- <th>09/01/2007</th>
- <th>10/01/2007</th>
- <th>11/01/2007</th>
- <th>12/01/2007</th>
- <th>01/01/2008</th>
- <th>02/01/2008</th>
- <th>03/01/2008</th>
- <th>04/01/2008</th>
- <th>05/01/2008</th>
- <th>06/01/2008</th>
+ <th>01 / 30 / 2007</th>
+ <th>02 / 01 / 2007</th>
+ <th>03 / 01 / 2007</th>
+ <th>04 / 01 / 2007</th>
+ <th>05 / 01 / 2007</th>
+ <th>06 / 01 / 2007</th>
+ <th>07 / 01 / 2007</th>
+ <th>08 / 01 / 2007</th>
+ <th>09 / 01 / 2007</th>
+ <th>10 / 01 / 2007</th>
+ <th>11 / 01 / 2007</th>
+ <th>12 / 01 / 2007</th>
+ <th>01 / 01 / 2008</th>
+ <th>02 / 01 / 2008</th>
+ <th>03 / 01 / 2008</th>
+ <th>04 / 01 / 2008</th>
+ <th>05 / 01 / 2008</th>
+ <th>06 / 01 / 2008</th>
</tr>
<tr>
<td>Error margin</td>
View
29 tooltip.visualize.jQuery.js
@@ -38,24 +38,31 @@
var self = $(this),
canvasContain = self.next(),
+ scroller = canvasContain.find('.visualize-scroller'),
+ scrollerW = scroller.width(),
tracker = canvasContain.find('.visualize-interaction-tracker');
// IE needs background color and opacity white or the tracker stays behind the tooltip
tracker.css({
backgroundColor:'white',
opacity:0,
- position:'relative',
zIndex:100
});
var tooltip = $('<div class="'+o.tooltipclass+'"/>').css({
- position:'absolute',
- display:'none',
- zIndex:90
- });
+ position:'absolute',
+ display:'none',
+ zIndex:90
+ })
+ .insertAfter(scroller.find('canvas'));
+
+ var usescroll = true;
+
+ if( typeof(G_vmlCanvasManager) != 'undefined' ){
+ scroller.css({'position':'absolute'});
+ tracker.css({marginTop:'-'+(o.height)+'px'});
+ }
- // Append the tooltip to the canvas container
- canvasContain.append(tooltip);
self.bind('vizualizeOver',function visualizeTooltipOver(e,data){
if(data.canvasContain.get(0) != canvasContain.get(0)) {return;} // for multiple graphs originated from same table
@@ -65,14 +72,16 @@
var p = data.point.canvasCords;
}
var left,right,top,clasRem,clasAd,bottom,x=Math.round(p[0]+data.tableData.zeroLocX),y=Math.round(p[1]+data.tableData.zeroLocY);
- if(o.tooltipalign == 'left' || ( o.tooltipalign=='auto' && x<=o.width/2 ) ) {
- left = x+'px';
+ if(o.tooltipalign == 'left' || ( o.tooltipalign=='auto' && x-scroller.scrollLeft()<=scrollerW/2 ) ) {
+ if($.browser.msie && ($.browser.version == 7 || $.browser.version == 6) ) {usescroll=false;} else {usescroll=true;}
+ left = (x-(usescroll?scroller.scrollLeft():0))+'px';
right = '';
clasAdd="tooltipleft";
clasRem="tooltipright";
} else {
+ if($.browser.msie && $.browser.version == 7) {usescroll=false;} else {usescroll=true;}
left = '';
- right = Math.abs(x-o.width)+'px';
+ right = (Math.abs(x-o.width)- (o.width-(usescroll?scroller.scrollLeft():0)-scrollerW) )+'px';
clasAdd="tooltipright";
clasRem="tooltipleft";
}
View
12 visualize.jQuery.js
@@ -355,7 +355,7 @@ $.fn.visualize = function(options, container){
.width(canvas.width())
.height(canvas.height())
// .css('margin-top',-o.lineMargin)
- .insertBefore(canvas);
+ .insertBefore(scroller);
$.each(yLabels, function(i){
var value = Math.floor(this);
@@ -644,7 +644,10 @@ $.fn.visualize = function(options, container){
//create canvas wrapper div, set inline w&h, append
var canvasContain = (container || $('<div '+(o.chartId?'id="'+o.chartId+'" ':'')+'class="visualize '+o.chartClass+'" role="img" aria-label="Chart representing data from the table: '+ title +'" />'))
.height(o.height)
- .width(o.width)
+ .width(o.width);
+
+ var scroller = $('<div class="visualize-scroller"></div>')
+ .appendTo(canvasContain)
.append(canvas);
//title/key container
@@ -681,7 +684,7 @@ $.fn.visualize = function(options, container){
'position':'relative',
'z-index': 200
})
- .appendTo(canvasContain);
+ .insertAfter(canvas);
var triggerInteraction = function(overOut,data) {
var data = $.extend({
@@ -758,6 +761,9 @@ $.fn.visualize = function(options, container){
//set up the drawing board
var ctx = canvas[0].getContext('2d');
+
+ // Scroll graphs
+ scroller.scrollLeft(o.width-scroller.width());
// init plugins
$.each($.visualizePlugins,function(i,plugin){

0 comments on commit 9cda460

Please sign in to comment.