Difference between revisions of "Spline chart with special highlight"
From JSXGraph Wiki
Jump to navigationJump to searchA WASSERMANN (talk | contribs) |
A WASSERMANN (talk | contribs) |
||
Line 2: | Line 2: | ||
<jsxgraph width="600" height="600"> | <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> | </jsxgraph> | ||
Line 62: | Line 63: | ||
<source lang="xml"> | <source lang="xml"> | ||
<jsxgraph width="600" height="600"> | <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> | </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>