Spline chart with special highlight: Difference between revisions
From JSXGraph Wiki
| A WASSERMANN (talk | contribs) No edit summary | No edit summary | ||
| (5 intermediate revisions by 2 users not shown) | |||
| Line 2: | Line 2: | ||
| <jsxgraph width="600" height="600"> | <jsxgraph width="600" height="600"> | ||
|  var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1, 10, 11, -2]}); | |||
|  board.suspendUpdate(); | |||
|  var dataArr = [[0,1,2,3,4,5,6,7,8,9,10], [4,1,3,2,5,7,1.5,2,4.5,8,5]];          | |||
|  var axisx = board.create('axis', [[0,0], [1,0]], {strokeColor:'black'}); | |||
|  var axisy = board.create('axis', [[0,0], [0,1]], {strokeColor:'black'}); | |||
|  var chart = board.create('chart', dataArr, {chartStyle:'spline,point',labels:dataArr}); | |||
|  chart[0].setProperty({strokeColor:'#32CD32',highlightStrokeColor:'#32CD32',strokeWidth:3}); | |||
|  board.unsuspendUpdate();   | |||
|  var i, animate; | |||
|  for(i=0; i<chart[1].length; i++) { | |||
|      chart[1][i].setProperty({face:'square',size:5,strokeColor:'#32CD32',fillColor:'#EEE9BF',strokeWidth:3}); | |||
|      chart[1][i].highlight = function() {      | |||
|          var ms = 200, to = 10, from = 5, difference, el = this, start = new Date, animate; | |||
|          difference = (to-from)/ms; | |||
|          function step() { | |||
|              var time = new Date - start, current; | |||
|              if(time < ms) {              | |||
|                  current = from + time * difference; | |||
|                  el.visProp['size'] = current; | |||
|                  el.board.renderer.updatePoint(el); | |||
|                  animate = setTimeout(step,1); | |||
|              } | |||
|              else { | |||
|                  current = from + ms * difference; | |||
|                  el.visProp['size'] = current; | |||
|                  el.board.renderer.updatePoint(el); | |||
|                  clearTimeout(animate); | |||
|              } | |||
|          } | |||
|          animate = setTimeout(step,1); | |||
|      } | |||
|      chart[1][i].noHighlight = function() { | |||
|          var ms = 200, from = 10, to = 5, difference, el = this, start = new Date; | |||
|          difference = (to-from)/ms; | |||
|          function step() { | |||
|              var time = new Date - start, current; | |||
|              if(time < ms) {              | |||
|                  current = from + time * difference; | |||
|                  el.visProp['size'] = current; | |||
|                  el.board.renderer.updatePoint(el); | |||
|                  animate = setTimeout(step,1); | |||
|              } | |||
|              else { | |||
|                  current = from + ms * difference; | |||
|                  el.visProp['size'] = current; | |||
|                  el.board.renderer.updatePoint(el); | |||
|                  clearTimeout(animate); | |||
|              } | |||
|          } | |||
|          animate = setTimeout(step,1);              | |||
|      }                    | |||
|  }   | |||
| </jsxgraph> | </jsxgraph> | ||
| ===JavaScript code to produce this chart=== | ===JavaScript code to produce this chart=== | ||
| <source lang=" | <source lang="javascript"> | ||
|  var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1, 10, 11, -2]}); | |||
|  board.suspendUpdate(); | |||
|  var dataArr = [[0,1,2,3,4,5,6,7,8,9,10], [4,1,3,2,5,7,1.5,2,4.5,8,5]];          | |||
|  var axisx = board.create('axis', [[0,0], [1,0]], {strokeColor:'black'}); | |||
|  var axisy = board.create('axis', [[0,0], [0,1]], {strokeColor:'black'}); | |||
|  var chart = board.create('chart', dataArr, {chartStyle:'spline,point',labels:dataArr}); | |||
|  chart[0].setProperty({strokeColor:'#32CD32',highlightStrokeColor:'#32CD32',strokeWidth:3}); | |||
|  board.unsuspendUpdate();   | |||
|  var i, animate; | |||
|  for(i=0; i<chart[1].length; i++) { | |||
|      chart[1][i].setProperty({face:'square',size:5,strokeColor:'#32CD32',fillColor:'#EEE9BF',strokeWidth:3}); | |||
|      chart[1][i].highlight = function() {      | |||
|          var ms = 200, to = 10, from = 5, difference, el = this, start = new Date, animate; | |||
|          difference = (to-from)/ms; | |||
|          function step() { | |||
|              var time = new Date - start, current; | |||
|              if(time < ms) {              | |||
|                  current = from + time * difference; | |||
|                  el.visProp['size'] = current; | |||
|                  el.board.renderer.updatePoint(el); | |||
|                  animate = setTimeout(step,1); | |||
|              } | |||
|              else { | |||
|                  current = from + ms * difference; | |||
|                  el.visProp['size'] = current; | |||
|                  el.board.renderer.updatePoint(el); | |||
|                  clearTimeout(animate); | |||
|              } | |||
|          } | |||
|          animate = setTimeout(step,1); | |||
|      } | |||
|      chart[1][i].noHighlight = function() { | |||
|          var ms = 200, from = 10, to = 5, difference, el = this, start = new Date; | |||
|          difference = (to-from)/ms; | |||
|          function step() { | |||
|              var time = new Date - start, current; | |||
|              if(time < ms) {              | |||
|                  current = from + time * difference; | |||
|                  el.visProp['size'] = current; | |||
|                  el.board.renderer.updatePoint(el); | |||
|                  animate = setTimeout(step,1); | |||
|              } | |||
|              else { | |||
|                  current = from + ms * difference; | |||
|                  el.visProp['size'] = current; | |||
|                  el.board.renderer.updatePoint(el); | |||
|                  clearTimeout(animate); | |||
|              } | |||
|          } | |||
|          animate = setTimeout(step,1);              | |||
|      }                    | |||
|  }   | |||
| </source> | </source> | ||
| [[Category: | [[Category:Austragungsstueberl]] | ||
Latest revision as of 15:00, 17 January 2012
A mixed chart with splines and points. The points get special highlight and noHighlight-methods in order to have an animated highlighting with a growing resp. decreasing radius.
JavaScript code to produce this chart
 var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1, 10, 11, -2]});
 board.suspendUpdate();
 var dataArr = [[0,1,2,3,4,5,6,7,8,9,10], [4,1,3,2,5,7,1.5,2,4.5,8,5]];        
 var axisx = board.create('axis', [[0,0], [1,0]], {strokeColor:'black'});
 var axisy = board.create('axis', [[0,0], [0,1]], {strokeColor:'black'});
 var chart = board.create('chart', dataArr, {chartStyle:'spline,point',labels:dataArr});
 chart[0].setProperty({strokeColor:'#32CD32',highlightStrokeColor:'#32CD32',strokeWidth:3});
 board.unsuspendUpdate(); 
 var i, animate;
 for(i=0; i<chart[1].length; i++) {
     chart[1][i].setProperty({face:'square',size:5,strokeColor:'#32CD32',fillColor:'#EEE9BF',strokeWidth:3});
     chart[1][i].highlight = function() {    
         var ms = 200, to = 10, from = 5, difference, el = this, start = new Date, animate;
         difference = (to-from)/ms;
         function step() {
             var time = new Date - start, current;
             if(time < ms) {            
                 current = from + time * difference;
                 el.visProp['size'] = current;
                 el.board.renderer.updatePoint(el);
                 animate = setTimeout(step,1);
             }
             else {
                 current = from + ms * difference;
                 el.visProp['size'] = current;
                 el.board.renderer.updatePoint(el);
                 clearTimeout(animate);
             }
         }
         animate = setTimeout(step,1);
     }
     chart[1][i].noHighlight = function() {
         var ms = 200, from = 10, to = 5, difference, el = this, start = new Date;
         difference = (to-from)/ms;
         function step() {
             var time = new Date - start, current;
             if(time < ms) {            
                 current = from + time * difference;
                 el.visProp['size'] = current;
                 el.board.renderer.updatePoint(el);
                 animate = setTimeout(step,1);
             }
             else {
                 current = from + ms * difference;
                 el.visProp['size'] = current;
                 el.board.renderer.updatePoint(el);
                 clearTimeout(animate);
             }
         }
         animate = setTimeout(step,1);            
     }                  
 }
