Difference between revisions of "Dynamic bar chart"

From JSXGraph Wiki
Jump to navigationJump to search
 
(16 intermediate revisions by 3 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:false});
+
board = JXG.JSXGraph.initBoard('box', {boundingbox: [-1, 9, 13, -3], axis:true});
            board.suspendUpdate();
+
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 s = board.create('slider', [[1,8],[4,8],[1,1,1.5]], {name:'S',strokeColor:'black',fillColor:'white'});
            var f = [function(){return this.board.round(s.Value()*4.5,2);},
+
var f = [function(){return (s.Value()*4.5).toFixed(2);},
                    function(){return this.board.round(s.Value()*(-1),2);},
+
        function(){return (s.Value()*(-1)).toFixed(2);},
                    function(){return this.board.round(s.Value()*3,2);},
+
        function(){return (s.Value()*3).toFixed(2);},
                    function(){return this.board.round(s.Value()*2,2);},
+
        function(){return (s.Value()*2).toFixed(2);},
                    function(){return this.board.round(s.Value()*(-0.5),2);},
+
        function(){return (s.Value()*(-0.5)).toFixed(2);},
                    function(){return this.board.round(s.Value()*5.5,2);},
+
        function(){return (s.Value()*5.5).toFixed(2);},
                    function(){return this.board.round(s.Value()*2.5,2);},
+
        function(){return (s.Value()*2.5).toFixed(2);},
                    function(){return this.board.round(s.Value()*(-0.75),2);},
+
        function(){return (s.Value()*(-0.75)).toFixed(2);},
                    function(){return this.board.round(s.Value()*(3.5),2);},
+
        function(){return (s.Value()*3.5).toFixed(2);},
                    function(){return this.board.round(s.Value()*(2),2);},
+
        function(){return (s.Value()*2).toFixed(2);},
                    function(){return this.board.round(s.Value()*(-1.25),2);}
+
        function(){return (s.Value()*(-1.25)).toFixed(2);
                    ];
+
    }];
            var chart = board.createElement('chart', [f], {chartStyle:'bar',width:0.8,labels:f});
+
var colors = ['#8E1B77','#BE1679','#DC1765','#DA2130','#DB311B','#DF4917','#E36317','#E87F1A','#F1B112','#FCF302','#C1E212'];
            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();
 
  
 +
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();
 
</jsxgraph>
 
</jsxgraph>
  
 
===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:false});
+
board.suspendUpdate();          
            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 s = board.create('slider', [[1,8],[4,8],[1,1,1.5]], {name:'S',strokeColor:'black',fillColor:'white'});
            var f = [function(){return this.board.round(s.Value()*4.5,2);},
+
var f = [function(){return (s.Value()*4.5).toFixed(2);},
                    function(){return this.board.round(s.Value()*(-1),2);},
+
        function(){return (s.Value()*(-1)).toFixed(2);},
                    function(){return this.board.round(s.Value()*3,2);},
+
        function(){return (s.Value()*3).toFixed(2);},
                    function(){return this.board.round(s.Value()*2,2);},
+
        function(){return (s.Value()*2).toFixed(2);},
                    function(){return this.board.round(s.Value()*(-0.5),2);},
+
        function(){return (s.Value()*(-0.5)).toFixed(2);},
                    function(){return this.board.round(s.Value()*5.5,2);},
+
        function(){return (s.Value()*5.5).toFixed(2);},
                    function(){return this.board.round(s.Value()*2.5,2);},
+
        function(){return (s.Value()*2.5).toFixed(2);},
                    function(){return this.board.round(s.Value()*(-0.75),2);},
+
        function(){return (s.Value()*(-0.75)).toFixed(2);},
                    function(){return this.board.round(s.Value()*(3.5),2);},
+
        function(){return (s.Value()*3.5).toFixed(2);},
                    function(){return this.board.round(s.Value()*(2),2);},
+
        function(){return (s.Value()*2).toFixed(2);},
                    function(){return this.board.round(s.Value()*(-1.25),2);}
+
        function(){return (s.Value()*(-1.25)).toFixed(2);}
                    ];
+
        ];
            var chart = board.createElement('chart', [f], {chartStyle:'bar',width:0.8,labels:f});
+
var colors = ['#8E1B77','#BE1679','#DC1765','#DA2130','#DB311B','#DF4917','#E36317','#E87F1A','#F1B112','#FCF302','#C1E212'];
            chart[0][0].setProperty('fillColor:#8E1B77');
+
var chart = board.create('chart', [f], {
            chart[0][1].setProperty('fillColor:#BE1679');
+
        chartStyle:'bar',  
            chart[0][2].setProperty('fillColor:#DC1765');
+
        width:0.8,  
            chart[0][3].setProperty('fillColor:#DA2130');
+
        labels:f,
            chart[0][4].setProperty('fillColor:#DB311B');
+
        colors: colors,  
            chart[0][5].setProperty('fillColor:#DF4917');
+
        shadow:true
            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>
+
var leg = board.create('legend', [10, 8.5], {labels: f, colorArray: colors});
</source>
+
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();</source>
  
 
[[Category:Examples]]
 
[[Category:Examples]]
 
[[Category:Charts]]
 
[[Category:Charts]]

Latest revision as of 13:42, 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,
         colors: 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();