Dynamic bar chart: Difference between revisions
From JSXGraph Wiki
mNo edit summary |
A WASSERMANN (talk | contribs) No edit summary |
||
Line 1: | Line 1: | ||
<jsxgraph width="700" height="600" box="box"> | <jsxgraph width="700" height="600" box="box"> | ||
board = JXG.JSXGraph.initBoard(' | board = JXG.JSXGraph.initBoard('jxgbox', {showNavigation:false, showCopyright:false, originX: 50, originY: 450, unitX: 50, unitY: 50, axis:true}); | ||
board.suspendUpdate(); | board.suspendUpdate(); | ||
var s = board.createElement('slider', [[8,7],[11,7],[1,1,1.5]], {name:'S',strokeColor:'black',fillColor:'white'}); | var s = board.createElement('slider', [[8,7],[11,7],[1,1,1.5]], {name:'S',strokeColor:'black',fillColor:'white'}); | ||
var f = [function(){return | var f = [function(){return (s.Value()*4.5).toFixed(2);}, | ||
function(){return | function(){return (s.Value()*(-1)).toFixed(2);}, | ||
function(){return | function(){return (s.Value()*3).toFixed(2);}, | ||
function(){return | function(){return (s.Value()*2).toFixed(2);}, | ||
function(){return | function(){return (s.Value()*(-0.5)).toFixed(2);}, | ||
function(){return | function(){return (s.Value()*5.5).toFixed(2);}, | ||
function(){return | function(){return (s.Value()*2.5).toFixed(2);}, | ||
function(){return | function(){return (s.Value()*(-0.75)).toFixed(2);}, | ||
function(){return | function(){return (s.Value()*3.5).toFixed(2);}, | ||
function(){return | function(){return (s.Value()*2).toFixed(2);}, | ||
function(){return | function(){return (s.Value()*(-1.25)).toFixed(2);}, | ||
]; | ]; | ||
var chart = board.createElement('chart', [f], {chartStyle:'bar',width:0.8,labels:f | var chart = board.createElement('chart', [f], | ||
{chartStyle:'bar',width:0.8,labels:f, | |||
colorArray:['#8E1B77','#BE1679','#DC1765','#DA2130','#DB311B','#DF4917','#E36317','#E87F1A', | |||
'#F1B112','#FCF302','#C1E212'],shadow:true}); | |||
var dataArr = [4,1,3,2,5,6.5,1.5,2,0.5,1.5,-1]; | var dataArr = [4,1,3,2,5,6.5,1.5,2,0.5,1.5,-1]; | ||
var chart2 = board.createElement('chart', dataArr, {chartStyle:'line,point'}); | var chart2 = board.createElement('chart', dataArr, {chartStyle:'line,point'}); | ||
chart2[0].setProperty('strokeColor:black','strokeWidth:2pt'); | chart2[0].setProperty('strokeColor:black','strokeWidth:2pt','shadow:true'); | ||
for(var i=0; i<11;i++) { | for(var i=0; i<11;i++) { | ||
chart2[1][i].setProperty( | chart2[1][i].setProperty({strokeColor:'black',fillColor:'white',face:'[]', size:4, strokeWidth:'2pt'}); | ||
} | } | ||
board.unsuspendUpdate(); | board.unsuspendUpdate(); |
Revision as of 15:32, 28 September 2009
The JavaScript code
<jsxgraph width="700" height="600" box="box">
board = JXG.JSXGraph.initBoard('box', {originX: 50, originY: 450, unitX: 50, unitY: 50, axis:false});
board.suspendUpdate();
board.createElement('axis', [[0,0], [1,0]], {strokeColor:'black'});
board.createElement('axis', [[0,0], [0,1]], {strokeColor:'black'});
var s = board.createElement('slider', [[8,7],[11,7],[1,1,1.5]], {name:'S',strokeColor:'black',fillColor:'white'});
var f = [function(){return this.board.round(s.Value()*4.5,2);},
function(){return this.board.round(s.Value()*(-1),2);},
function(){return this.board.round(s.Value()*3,2);},
function(){return this.board.round(s.Value()*2,2);},
function(){return this.board.round(s.Value()*(-0.5),2);},
function(){return this.board.round(s.Value()*5.5,2);},
function(){return this.board.round(s.Value()*2.5,2);},
function(){return this.board.round(s.Value()*(-0.75),2);},
function(){return this.board.round(s.Value()*(3.5),2);},
function(){return this.board.round(s.Value()*(2),2);},
function(){return this.board.round(s.Value()*(-1.25),2);}
];
var chart = board.createElement('chart', [f], {chartStyle:'bar',width:0.8,labels:f});
chart[0][0].setProperty('fillColor:#8E1B77');
chart[0][1].setProperty('fillColor:#BE1679');
chart[0][2].setProperty('fillColor:#DC1765');
chart[0][3].setProperty('fillColor:#DA2130');
chart[0][4].setProperty('fillColor:#DB311B');
chart[0][5].setProperty('fillColor:#DF4917');
chart[0][6].setProperty('fillColor:#E36317');
chart[0][7].setProperty('fillColor:#E87F1A');
chart[0][8].setProperty('fillColor:#F1B112');
chart[0][9].setProperty('fillColor:#FCF302');
chart[0][10].setProperty('fillColor:#C1E212');
var dataArr = [4,1,3,2,5,6.5,1.5,2,0.5,1.5,-1];
var chart2 = board.createElement('chart', dataArr, {chartStyle:'line,point'});
chart2[0].setProperty('strokeColor:black','strokeWidth:2pt');
for(var i=0; i<11;i++) {
chart2[1][i].setProperty('strokeColor:black','fillColor:white','style:9','strokeWidth:2pt');
}
board.unsuspendUpdate();
</jsxgraph>