Dynamic bar chart: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
(3 intermediate revisions by 2 users not shown)
Line 1: Line 1:
<jsxgraph width="700" height="600" box="box">
<jsxgraph width="700" height="600" box="box">
board = JXG.JSXGraph.initBoard('box', {originX: 50, originY: 450, unitX: 50, unitY: 50, axis:true});
board = JXG.JSXGraph.initBoard('box', {boundingbox: [-1, 9, 13, -3], axis:true});
board.suspendUpdate();           
board.suspendUpdate();           


Line 14: Line 14:
         function(){return (s.Value()*3.5).toFixed(2);},
         function(){return (s.Value()*3.5).toFixed(2);},
         function(){return (s.Value()*2).toFixed(2);},
         function(){return (s.Value()*2).toFixed(2);},
         function(){return (s.Value()*(-1.25)).toFixed(2);},
         function(){return (s.Value()*(-1.25)).toFixed(2);}
         ];
         ];
var chart = board.createElement('chart', [f],  
var chart = board.createElement('chart', [f],  
Line 22: Line 22:
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','shadow:true');
chart2[0].setProperty('strokeColor:black','strokeWidth:2','shadow:true');
for(var i=0; i<11;i++) {
for(var i=0; i<11;i++) {
     chart2[1][i].setProperty({strokeColor:'black',fillColor:'white',face:'[]', size:4, strokeWidth:'2pt'});
     chart2[1][i].setProperty({strokeColor:'black',fillColor:'white',face:'[]', size:4, strokeWidth:2});
}
}
board.unsuspendUpdate();
board.unsuspendUpdate();
Line 31: Line 31:
===The JavaScript code===
===The JavaScript code===


<source lang="xml">
<source lang="javascript">
<jsxgraph width="700" height="600" box="box">
board = JXG.JSXGraph.initBoard('box', {boundingbox: [-1, 9, 13, -3], axis:true}});
board = JXG.JSXGraph.initBoard('box', {originX: 50, originY: 450, unitX: 50, unitY: 50, axis:true});
board.suspendUpdate();           
board.suspendUpdate();           


Line 47: Line 46:
         function(){return (s.Value()*3.5).toFixed(2);},
         function(){return (s.Value()*3.5).toFixed(2);},
         function(){return (s.Value()*2).toFixed(2);},
         function(){return (s.Value()*2).toFixed(2);},
         function(){return (s.Value()*(-1.25)).toFixed(2);},
         function(){return (s.Value()*(-1.25)).toFixed(2);}
         ];
         ];
var chart = board.createElement('chart', [f],  
var chart = board.createElement('chart', [f],  
Line 55: Line 54:
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','shadow:true');
chart2[0].setProperty('strokeColor:black','strokeWidth:2','shadow:true');
for(var i=0; i<11;i++) {
for(var i=0; i<11;i++) {
     chart2[1][i].setProperty({strokeColor:'black',fillColor:'white',face:'[]', size:4, strokeWidth:'2pt'});
     chart2[1][i].setProperty({strokeColor:'black',fillColor:'white',face:'[]', size:4, strokeWidth:2});
}
}
board.unsuspendUpdate();
board.unsuspendUpdate();
</jsxgraph>
</source>
</source>


[[Category:Examples]]
[[Category:Examples]]
[[Category:Charts]]
[[Category:Charts]]

Revision as of 16:24, 20 February 2013

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:2','shadow:true');
for(var i=0; i<11;i++) {
    chart2[1][i].setProperty({strokeColor:'black',fillColor:'white',face:'[]', size:4, strokeWidth:2});
}
board.unsuspendUpdate();