Dynamic bar chart: Difference between revisions
From JSXGraph Wiki
| A WASSERMANN (talk | contribs) No edit summary | 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('box', { | board = JXG.JSXGraph.initBoard('box', {boundingbox: [-1, 9, 13, -3], axis:true}); | ||
| board.suspendUpdate();             | board.suspendUpdate();             | ||
| Line 31: | Line 31: | ||
| ===The JavaScript code=== | ===The JavaScript code=== | ||
| <source lang=" | <source lang="javascript"> | ||
| board = JXG.JSXGraph.initBoard('box', {boundingbox: [-1, 9, 13, -3], axis:true}}); | |||
| board = JXG.JSXGraph.initBoard('box', { | |||
| board.suspendUpdate();             | board.suspendUpdate();             | ||
| Line 60: | Line 59: | ||
| } | } | ||
| board.unsuspendUpdate(); | board.unsuspendUpdate(); | ||
| </source> | </source> | ||
| [[Category:Examples]] | [[Category:Examples]] | ||
| [[Category:Charts]] | [[Category:Charts]] | ||
Revision as of 13:46, 7 June 2011
The JavaScript code
board = JXG.JSXGraph.initBoard('box', {boundingbox: [-1, 9, 13, -3], axis:true}});
board.suspendUpdate();           
var s = board.createElement('slider', [[8,7],[11,7],[1,1,1.5]], {name:'S',strokeColor:'black',fillColor:'white'});
var f = [function(){return (s.Value()*4.5).toFixed(2);},
         function(){return (s.Value()*(-1)).toFixed(2);},
         function(){return (s.Value()*3).toFixed(2);},
         function(){return (s.Value()*2).toFixed(2);},
         function(){return (s.Value()*(-0.5)).toFixed(2);},
         function(){return (s.Value()*5.5).toFixed(2);},
         function(){return (s.Value()*2.5).toFixed(2);},
         function(){return (s.Value()*(-0.75)).toFixed(2);},
         function(){return (s.Value()*3.5).toFixed(2);},
         function(){return (s.Value()*2).toFixed(2);},
         function(){return (s.Value()*(-1.25)).toFixed(2);}
        ];
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 chart2 = board.createElement('chart', dataArr, {chartStyle:'line,point'});
chart2[0].setProperty('strokeColor:black','strokeWidth:2pt','shadow:true');
for(var i=0; i<11;i++) {
    chart2[1][i].setProperty({strokeColor:'black',fillColor:'white',face:'[]', size:4, strokeWidth:'2pt'});
}
board.unsuspendUpdate();
