Difference between revisions of "Dynamic bar chart"

From JSXGraph Wiki
Jump to navigationJump to search
Line 3: Line 3:
 
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.create('slider', [[1,8],[4,8],[1,1,1.5]], {name:'S',strokeColor:'black',fillColor:'white'});
 
var f = [function(){return (s.Value()*4.5).toFixed(2);},
 
var f = [function(){return (s.Value()*4.5).toFixed(2);},
 
         function(){return (s.Value()*(-1)).toFixed(2);},
 
         function(){return (s.Value()*(-1)).toFixed(2);},
Line 17: Line 17:
 
         ];
 
         ];
 
var colors = ['#8E1B77','#BE1679','#DC1765','#DA2130','#DB311B','#DF4917','#E36317','#E87F1A','#F1B112','#FCF302','#C1E212'];
 
var colors = ['#8E1B77','#BE1679','#DC1765','#DA2130','#DB311B','#DF4917','#E36317','#E87F1A','#F1B112','#FCF302','#C1E212'];
var chart = board.createElement('chart', [f],  
+
var chart = board.create('chart', [f], {
        {chartStyle:'bar', width:0.8, labels:f,
+
        chartStyle:'bar',  
         colorArray:colors, shadow:true});
+
        width:0.8,  
 +
        labels:f,
 +
         colorArray: colors,  
 +
        shadow:true
 +
});
  
var leg = board.create('legend', [1, 8], {labels: f, colorArray: colors});
+
var leg = board.create('legend', [10, 8.5], {labels: f, colorArray: colors});
 
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.create('chart', dataArr, {chartStyle:'line,point'});
 
chart2[0].setProperty('strokeColor:black','strokeWidth:2','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:2});
 
     chart2[1][i].setProperty({strokeColor:'black',fillColor:'white',face:'[]', size:4, strokeWidth:2});
 
}
 
}
Line 34: Line 38:
  
 
<source lang="javascript">
 
<source lang="javascript">
board = JXG.JSXGraph.initBoard('box', {boundingbox: [-1, 9, 13, -3], axis:true}});
+
board = JXG.JSXGraph.initBoard('box', {boundingbox: [-1, 9, 13, -3], 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.create('slider', [[1,8],[4,8],[1,1,1.5]], {name:'S',strokeColor:'black',fillColor:'white'});
 
var f = [function(){return (s.Value()*4.5).toFixed(2);},
 
var f = [function(){return (s.Value()*4.5).toFixed(2);},
 
         function(){return (s.Value()*(-1)).toFixed(2);},
 
         function(){return (s.Value()*(-1)).toFixed(2);},
Line 50: Line 54:
 
         function(){return (s.Value()*(-1.25)).toFixed(2);}
 
         function(){return (s.Value()*(-1.25)).toFixed(2);}
 
         ];
 
         ];
var chart = board.createElement('chart', [f],
+
var colors = ['#8E1B77','#BE1679','#DC1765','#DA2130','#DB311B','#DF4917','#E36317','#E87F1A','#F1B112','#FCF302','#C1E212'];
        {chartStyle:'bar', width:0.8, labels:f,
+
var chart = board.create('chart', [f], {
        colorArray:['#8E1B77','#BE1679','#DC1765','#DA2130','#DB311B','#DF4917','#E36317','#E87F1A','#F1B112','#FCF302','#C1E212'], shadow:true});
+
        chartStyle:'bar',
           
+
        width:0.8,
 +
        labels:f,
 +
        colorArray: colors,
 +
        shadow:true
 +
});
 +
 
 +
var leg = board.create('legend', [10, 8.5], {labels: f, colorArray: colors});
 
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.create('chart', dataArr, {chartStyle:'line,point'});
 
chart2[0].setProperty('strokeColor:black','strokeWidth:2','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:2});
 
     chart2[1][i].setProperty({strokeColor:'black',fillColor:'white',face:'[]', size:4, strokeWidth:2});
 
}
 
}
board.unsuspendUpdate();
+
board.unsuspendUpdate();</source>
</source>
 
  
 
[[Category:Examples]]
 
[[Category:Examples]]
 
[[Category:Charts]]
 
[[Category:Charts]]

Revision as of 14:22, 12 March 2020

The JavaScript code

board = JXG.JSXGraph.initBoard('box', {boundingbox: [-1, 9, 13, -3], axis:true});
board.suspendUpdate();           

var s = board.create('slider', [[1,8],[4,8],[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 colors = ['#8E1B77','#BE1679','#DC1765','#DA2130','#DB311B','#DF4917','#E36317','#E87F1A','#F1B112','#FCF302','#C1E212'];
var chart = board.create('chart', [f], {
         chartStyle:'bar', 
         width:0.8, 
         labels:f,
         colorArray: colors, 
         shadow:true
});

var leg = board.create('legend', [10, 8.5], {labels: f, colorArray: colors});
var dataArr = [4,1,3,2,5,6.5,1.5,2,0.5,1.5,-1];            
var chart2 = board.create('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();