Difference between revisions of "Spline chart with special highlight"

From JSXGraph Wiki
Jump to navigationJump to search
Line 2: Line 2:
  
 
<jsxgraph width="600" height="600">
 
<jsxgraph width="600" height="600">
            board = JXG.JSXGraph.initBoard('jxgbox', {originX: 50, originY: 500, unitX: 50, unitY: 50});
+
var board = JXG.JSXGraph.initBoard('jxgbox', {originX: 50, originY: 500, unitX: 50, unitY: 50});
            board.suspendUpdate();
+
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 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.createElement('axis', [[0,0], [1,0]], {strokeColor:'black'});
+
var axisx = board.create('axis', [[0,0], [1,0]], {strokeColor:'black'});
            var axisy = board.createElement('axis', [[0,0], [0,1]], {strokeColor:'black'});
+
var axisy = board.create('axis', [[0,0], [0,1]], {strokeColor:'black'});
            var chart = board.createElement('chart', dataArr, {chartStyle:'line,point',labels:dataArr});
+
var chart = board.create('chart', dataArr, {chartStyle:'line,point',labels:dataArr});
            //chart[0].setProperty({strokeColor:'#32CD32',highlightStrokeColor:'#32CD32',strokeWidth:'3px',shadow:true});
+
chart[0].setProperty({strokeColor:'#32CD32',highlightStrokeColor:'#32CD32',strokeWidth:'3px',shadow:false});
            board.unsuspendUpdate();  
+
board.unsuspendUpdate();  
            var i;
+
var i, animate;
            for(i=0; i<chart[1].length; i++) {
+
for(i=0; i<chart[1].length; i++) {
                chart[1][i].setProperty({face:'square',size:5,strokeColor:'#32CD32',fillColor:'#EEE9BF',strokeWidth:'3px',shadow:true});
+
    //chart[1][i].setProperty({face:'square',size:5,strokeColor:'#32CD32',fillColor:'#EEE9BF',strokeWidth:'3px',shadow:true});
                chart[1][i].highlight = function() {     
+
    chart[1][i].setProperty({face:'square',size:5,strokeColor:'#32CD32',fillColor:'#EEE9BF',strokeWidth:'3px',shadow:false});
                    var ms = 200, to = 10, from = 5, difference, el = this, start = new Date, animate;
+
    chart[1][i].highlight = function() {     
                    difference = (to-from)/ms;
+
        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;
+
        function step() {
                        if(time < ms) {             
+
            var time = new Date - start, current;
                            current = from + time * difference;
+
            if(time < ms) {             
                            el.visProp['size'] = current;
+
                current = from + time * difference;
                            el.board.renderer.updatePoint(el);
+
                el.visProp['size'] = current;
                            animate = setTimeout(step,1);
+
                el.board.renderer.updatePoint(el);
                        }
+
                animate = setTimeout(step,1);
                        else {
+
            }
                            current = from + ms * difference;
+
            else {
                            el.visProp['size'] = current;
+
                current = from + ms * difference;
                            el.board.renderer.updatePoint(el);
+
                el.visProp['size'] = current;
                            clearTimeout(animate);
+
                el.board.renderer.updatePoint(el);
                        }
+
                clearTimeout(animate);
                    }
+
            }
                    animate = setTimeout(step,1);
+
        }
                   
+
        animate = setTimeout(step,1);
                }
+
 
                chart[1][i].noHighlight = function() {
+
    }
                    var ms = 200, from = 10, to = 5, difference, el = this, start = new Date;
+
    chart[1][i].noHighlight = function() {
                    difference = (to-from)/ms;
+
        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;
+
        function step() {
                        if(time < ms) {             
+
            var time = new Date - start, current;
                            current = from + time * difference;
+
            if(time < ms) {             
                            el.visProp['size'] = current;
+
                current = from + time * difference;
                            el.board.renderer.updatePoint(el);
+
                el.visProp['size'] = current;
                            animate = setTimeout(step,1);
+
                el.board.renderer.updatePoint(el);
                        }
+
                animate = setTimeout(step,1);
                        else {
+
            }
                            current = from + ms * difference;
+
            else {
                            el.visProp['size'] = current;
+
                current = from + ms * difference;
                            el.board.renderer.updatePoint(el);
+
                el.visProp['size'] = current;
                            clearTimeout(animate);
+
                el.board.renderer.updatePoint(el);
                        }
+
                clearTimeout(animate);
                    }
+
            }
                    animate = setTimeout(step,1);             
+
        }
                }                   
+
        animate = setTimeout(step,1);             
            }  
+
    }                   
 +
}  
 
</jsxgraph>
 
</jsxgraph>
  
Line 62: Line 63:
 
<source lang="xml">
 
<source lang="xml">
 
<jsxgraph width="600" height="600">
 
<jsxgraph width="600" height="600">
            board = JXG.JSXGraph.initBoard('jxgbox', {originX: 50, originY: 500, unitX: 50, unitY: 50});
+
var board = JXG.JSXGraph.initBoard('jxgbox', {originX: 50, originY: 500, unitX: 50, unitY: 50});
            board.suspendUpdate();
+
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 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.createElement('axis', [[0,0], [1,0]], {strokeColor:'black'});
+
var axisx = board.create('axis', [[0,0], [1,0]], {strokeColor:'black'});
            var axisy = board.createElement('axis', [[0,0], [0,1]], {strokeColor:'black'});
+
var axisy = board.create('axis', [[0,0], [0,1]], {strokeColor:'black'});
            var chart = board.createElement('chart', dataArr, {chartStyle:'spline,point',labels:dataArr});
+
var chart = board.create('chart', dataArr, {chartStyle:'line,point',labels:dataArr});
            chart[0].setProperty({strokeColor:'#32CD32',highlightStrokeColor:'#32CD32',strokeWidth:'3px',shadow:true});
+
chart[0].setProperty({strokeColor:'#32CD32',highlightStrokeColor:'#32CD32',strokeWidth:'3px',shadow:false});
            board.unsuspendUpdate();  
+
board.unsuspendUpdate();  
            var i;
+
var i, animate;
            for(i=0; i<chart[1].length; i++) {
+
for(i=0; i<chart[1].length; i++) {
                chart[1][i].setProperty({face:'square',size:5,strokeColor:'#32CD32',fillColor:'#EEE9BF',strokeWidth:'3px',shadow:true});
+
    //chart[1][i].setProperty({face:'square',size:5,strokeColor:'#32CD32',fillColor:'#EEE9BF',strokeWidth:'3px',shadow:true});
                chart[1][i].highlight = function() {     
+
    chart[1][i].setProperty({face:'square',size:5,strokeColor:'#32CD32',fillColor:'#EEE9BF',strokeWidth:'3px',shadow:false});
                    var ms = 200, to = 10, from = 5, difference, el = this, start = new Date, animate;
+
    chart[1][i].highlight = function() {     
                    difference = (to-from)/ms;
+
        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;
+
        function step() {
                        if(time < ms) {             
+
            var time = new Date - start, current;
                            current = from + time * difference;
+
            if(time < ms) {             
                            el.visProp['size'] = current;
+
                current = from + time * difference;
                            el.board.renderer.updatePoint(el);
+
                el.visProp['size'] = current;
                            animate = setTimeout(step,1);
+
                el.board.renderer.updatePoint(el);
                        }
+
                animate = setTimeout(step,1);
                        else {
+
            }
                            current = from + ms * difference;
+
            else {
                            el.visProp['size'] = current;
+
                current = from + ms * difference;
                            el.board.renderer.updatePoint(el);
+
                el.visProp['size'] = current;
                            clearTimeout(animate);
+
                el.board.renderer.updatePoint(el);
                        }
+
                clearTimeout(animate);
                    }
+
            }
                    animate = setTimeout(step,1);
+
        }
                   
+
        animate = setTimeout(step,1);
                }
+
 
                chart[1][i].noHighlight = function() {
+
    }
                    var ms = 200, from = 10, to = 5, difference, el = this, start = new Date;
+
    chart[1][i].noHighlight = function() {
                    difference = (to-from)/ms;
+
        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;
+
        function step() {
                        if(time < ms) {             
+
            var time = new Date - start, current;
                            current = from + time * difference;
+
            if(time < ms) {             
                            el.visProp['size'] = current;
+
                current = from + time * difference;
                            el.board.renderer.updatePoint(el);
+
                el.visProp['size'] = current;
                            animate = setTimeout(step,1);
+
                el.board.renderer.updatePoint(el);
                        }
+
                animate = setTimeout(step,1);
                        else {
+
            }
                            current = from + ms * difference;
+
            else {
                            el.visProp['size'] = current;
+
                current = from + ms * difference;
                            el.board.renderer.updatePoint(el);
+
                el.visProp['size'] = current;
                            clearTimeout(animate);
+
                el.board.renderer.updatePoint(el);
                        }
+
                clearTimeout(animate);
                    }
+
            }
                    animate = setTimeout(step,1);             
+
        }
                }                   
+
        animate = setTimeout(step,1);             
            }  
+
    }                   
 +
}  
 
</jsxgraph>
 
</jsxgraph>
 
</source>
 
</source>

Revision as of 11:02, 3 August 2010

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

<jsxgraph width="600" height="600">
 var board = JXG.JSXGraph.initBoard('jxgbox', {originX: 50, originY: 500, unitX: 50, unitY: 50});
 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:'line,point',labels:dataArr});
 chart[0].setProperty({strokeColor:'#32CD32',highlightStrokeColor:'#32CD32',strokeWidth:'3px',shadow:false});
 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:'3px',shadow:true});
     chart[1][i].setProperty({face:'square',size:5,strokeColor:'#32CD32',fillColor:'#EEE9BF',strokeWidth:'3px',shadow:false});
     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>