Difference between revisions of "Different chart styles"

From JSXGraph Wiki
Jump to navigationJump to search
Line 1: Line 1:
 
JSXGraph supports chart plotting.  Here are some examples of possible chart types.
 
JSXGraph supports chart plotting.  Here are some examples of possible chart types.
 
<html>
 
<html>
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
 
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
 
 
   <p>
 
   <p>
 
     <input type="button" value="Line chart" onClick="lineChart()">
 
     <input type="button" value="Line chart" onClick="lineChart()">
Line 14: Line 12:
 
     <input type="button" value="Regression parabola" onClick="fitChart(2)">
 
     <input type="button" value="Regression parabola" onClick="fitChart(2)">
 
   </p>
 
   </p>
<div id="jxgbox" class="jxgbox" style="width:600px; height:600px;"></div>
+
</html>
<script language="JavaScript">
+
<jsxgraph width="600" height="600" box="jxgbox">
        var board = JXG.JSXGraph.initBoard('jxgbox', {originX: 50, originY: 400, unitX: 50, unitY: 50});
+
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1, 10, 11, -2], axis: true});
 +
var dataArr = [4,1,3,2,5,7,1.5,2];
 +
       
 +
// Line chart
 +
function lineChart() {
 +
    JXG.JSXGraph.freeBoard(board);
 +
    board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1, 10, 11, -2], axis: true});
 +
    board.suspendUpdate();
 +
    var a = board.create('chart', dataArr, {chartStyle:'line',strokeWidth:4,strokeColor:'#0000ff'});
 +
    board.unsuspendUpdate();
 +
};
 +
 
 +
// Line chart with cubic splines
 +
function splineChart() {
 +
    JXG.JSXGraph.freeBoard(board);
 +
    board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1, 10, 11, -2], axis: true});
 +
    board.suspendUpdate();
 +
    var a = board.create('chart', dataArr, {chartStyle:'spline',strokeWidth:4,strokeColor:'#0000ff'});
 +
    board.unsuspendUpdate();
 +
};
  
        var dataArr = [4,1,3,2,5,7,1.5,2];
+
// Bar chart
       
+
function barChart() {
        // Line chart
+
    JXG.JSXGraph.freeBoard(board);
        function lineChart() {
+
    board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1, 10, 11, -2], axis: true});
            JXG.JSXGraph.freeBoard(board);
+
    board.suspendUpdate();
            board = JXG.JSXGraph.initBoard('jxgbox', {originX: 50, originY: 500, unitX: 50, unitY: 50, axis:true});
+
    var a = board.create('chart', dataArr, {chartStyle:'bar',width:0.6,labels:dataArr});
            board.suspendUpdate();
+
    board.unsuspendUpdate();
            var a = board.createElement('chart', dataArr, {chartStyle:'line',strokeWidth:4,strokeColor:'#0000ff'});
+
};
            board.unsuspendUpdate();
+
 
        };
+
// Single chart with multiple styles
 +
function multiStyleChart() {
 +
    JXG.JSXGraph.freeBoard(board);
 +
    board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1, 10, 11, -2], axis: true});
 +
    board.suspendUpdate();
 +
    var a = board.create('chart', dataArr, {chartStyle:'bar,line,point',width:0.8,size:4,labels:dataArr});
 +
    board.unsuspendUpdate();
 +
};
  
        // Line chart with cubic splines
+
// Two bar charts
        function splineChart() {
+
function twoBarCharts() {
            JXG.JSXGraph.freeBoard(board);
+
    JXG.JSXGraph.freeBoard(board);
            board = JXG.JSXGraph.initBoard('jxgbox', {originX: 50, originY: 500, unitX: 50, unitY: 50, axis:true});
+
    board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1, 10, 11, -2], axis: true});
            board.suspendUpdate();
+
    board.suspendUpdate();
            var a = board.createElement('chart', dataArr, {chartStyle:'spline',strokeWidth:4,strokeColor:'#0000ff'});
+
    var a = board.create('chart', [[1,3,5,7],[4,-1,3,2]], {chartStyle:'bar',width:0.8});
            board.unsuspendUpdate();
+
    var b = board.create('chart', [[2,4,6,8],[3,1,2,5]], {chartStyle:'bar',fillColor:'#C3D9FF',width:0.8});
        };
+
    board.unsuspendUpdate();
 +
};
  
        // Bar chart
+
// Bar chart with horizontal bars
        function barChart() {
+
function horizontalBarChart() {
            JXG.JSXGraph.freeBoard(board);
+
    JXG.JSXGraph.freeBoard(board);
            board = JXG.JSXGraph.initBoard('jxgbox', {originX: 50, originY: 500, unitX: 50, unitY: 50, axis:true});
+
    board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1, 10, 11, -2], axis: true});
            board.suspendUpdate();
+
    board.suspendUpdate();
            var a = board.createElement('chart', dataArr, {chartStyle:'bar',width:0.6,labels:dataArr});
+
    var a = board.create('chart', dataArr, {chartStyle:'bar',labels:dataArr,width:0.8,dir:'horizontal'});
            board.unsuspendUpdate();
+
    board.unsuspendUpdate();
        };
+
};
       
 
        // Single chart with multiple styles
 
        function multiStyleChart() {
 
            JXG.JSXGraph.freeBoard(board);
 
            board = JXG.JSXGraph.initBoard('jxgbox', {originX: 50, originY: 500, unitX: 50, unitY: 50, axis:true});
 
            board.suspendUpdate();
 
            var a = board.createElement('chart', dataArr, {chartStyle:'bar,line,point',width:0.8,style:6,labels:dataArr});
 
            board.unsuspendUpdate();
 
        };
 
       
 
        // Two bar charts
 
        function twoBarCharts() {
 
            JXG.JSXGraph.freeBoard(board);
 
            board = JXG.JSXGraph.initBoard('jxgbox', {originX: 50, originY: 500, unitX: 50, unitY: 50, axis:true});
 
            board.suspendUpdate();
 
            var a = board.createElement('chart', [[1,3,5,7],[4,-1,3,2]], {chartStyle:'bar',width:0.8});
 
            var b = board.createElement('chart', [[2,4,6,8],[3,1,2,5]], {chartStyle:'bar',fillColor:'#C3D9FF',width:0.8});
 
            board.unsuspendUpdate();
 
        };
 
  
        // Bar chart with horizontal bars
+
// Single chart with dynamic entries
        function horizontalBarChart() {
+
function dynamicBarChart() {
            JXG.JSXGraph.freeBoard(board);
+
    JXG.JSXGraph.freeBoard(board);
            board = JXG.JSXGraph.initBoard('jxgbox', {originX: 50, originY: 500, unitX: 50, unitY: 50, axis:true});
+
    board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1, 10, 11, -2], axis: true});
            board.suspendUpdate();
+
    board.suspendUpdate();
            var a = board.createElement('chart', dataArr, {chartStyle:'bar',labels:dataArr,width:0.8,dir:'horizontal'});
+
    var s = board.create('slider', [[5,-1],[8,-1], [1,1,2]], {name:'S'});
            board.unsuspendUpdate();
+
    var f = [function(){return this.board.round(s.Value()*4,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);}];
 +
    var chart = board.create('chart', [f], {chartStyle:'bar',width:0.8,labels:f});
 +
    board.unsuspendUpdate();
 +
};
  
        // Single chart with dynamic entries
+
// Regression curve
        function dynamicBarChart() {
+
function fitChart(deg) {
            JXG.JSXGraph.freeBoard(board);
+
    JXG.JSXGraph.freeBoard(board);
            board = JXG.JSXGraph.initBoard('jxgbox', {originX: 50, originY: 450, unitX: 50, unitY: 50, axis:true});
+
    board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1, 10, 11, -2], axis: true});
            board.suspendUpdate();
+
    board.suspendUpdate();
            var s = board.createElement('slider', [[5,-1],[8,-1], [1,1,2]], {name:'S'});
+
    var a = board.create('chart', dataArr,  
            var f = [function(){return this.board.round(s.Value()*4,2);},
+
        {chartStyle:'bar,fit', degree:deg, colorArray:['#B02B2C','#3F4C6B','#C79810','#D15600'], dash:2}
                    function(){return this.board.round(s.Value()*(-1),2);},
+
    );
                    function(){return this.board.round(s.Value()*3,2);},
+
    board.unsuspendUpdate();
                    function(){return this.board.round(s.Value()*2,2);}];
+
}
            var chart = board.createElement('chart', [f], {chartStyle:'bar',width:0.8,labels:f});
+
lineChart();
            board.unsuspendUpdate();
+
</jsxgraph>
        };
 
  
        // Regression curve
+
==The Code==
        function fitChart(deg) {
 
            JXG.JSXGraph.freeBoard(board);
 
            board = JXG.JSXGraph.initBoard('jxgbox', {originX: 50, originY: 450, unitX: 50, unitY: 50, axis:true});
 
            board.suspendUpdate();
 
            var a = board.createElement('chart', dataArr,
 
                {chartStyle:'bar,fit', degree:deg, colorArray:['#B02B2C','#3F4C6B','#C79810','#D15600'], dash:2}
 
            );
 
            board.unsuspendUpdate();
 
        }
 
        lineChart();
 
</script>
 
</html>
 
  
 
<source lang="javascript">
 
<source lang="javascript">
         var board = JXG.JSXGraph.initBoard('jxgbox', {originX: 50, originY: 400, unitX: 50, unitY: 50});
+
var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1, 10, 11, -2], axis: true});
 +
var dataArr = [4,1,3,2,5,7,1.5,2];
 +
          
 +
// Line chart
 +
function lineChart() {
 +
    JXG.JSXGraph.freeBoard(board);
 +
    board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1, 10, 11, -2], axis: true});
 +
    board.suspendUpdate();
 +
    var a = board.create('chart', dataArr, {chartStyle:'line',strokeWidth:4,strokeColor:'#0000ff'});
 +
    board.unsuspendUpdate();
 +
};
 +
 
 +
// Line chart with cubic splines
 +
function splineChart() {
 +
    JXG.JSXGraph.freeBoard(board);
 +
    board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1, 10, 11, -2], axis: true});
 +
    board.suspendUpdate();
 +
    var a = board.create('chart', dataArr, {chartStyle:'spline',strokeWidth:4,strokeColor:'#0000ff'});
 +
    board.unsuspendUpdate();
 +
};
  
        var dataArr = [4,1,3,2,5,7,1.5,2];
+
// Bar chart
       
+
function barChart() {
        // Line chart
+
    JXG.JSXGraph.freeBoard(board);
        function lineChart() {
+
    board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1, 10, 11, -2], axis: true});
            JXG.JSXGraph.freeBoard(board);
+
    board.suspendUpdate();
            board = JXG.JSXGraph.initBoard('jxgbox', {originX: 50, originY: 500, unitX: 50, unitY: 50, axis:true});
+
    var a = board.create('chart', dataArr, {chartStyle:'bar',width:0.6,labels:dataArr});
            board.suspendUpdate();
+
    board.unsuspendUpdate();
            var a = board.createElement('chart', dataArr, {chartStyle:'line',strokeWidth:4,strokeColor:'#0000ff'});
+
};
            board.unsuspendUpdate();
 
        };
 
  
        // Line chart with cubic splines
+
// Single chart with multiple styles
        function splineChart() {
+
function multiStyleChart() {
            JXG.JSXGraph.freeBoard(board);
+
    JXG.JSXGraph.freeBoard(board);
            board = JXG.JSXGraph.initBoard('jxgbox', {originX: 50, originY: 500, unitX: 50, unitY: 50, axis:true});
+
    board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1, 10, 11, -2], axis: true});
            board.suspendUpdate();
+
    board.suspendUpdate();
            var a = board.createElement('chart', dataArr, {chartStyle:'spline',strokeWidth:4,strokeColor:'#0000ff'});
+
    var a = board.create('chart', dataArr, {chartStyle:'bar,line,point',width:0.8,size:4,labels:dataArr});
            board.unsuspendUpdate();
+
    board.unsuspendUpdate();
        };
+
};
  
        // Bar chart
+
// Two bar charts
        function barChart() {
+
function twoBarCharts() {
            JXG.JSXGraph.freeBoard(board);
+
    JXG.JSXGraph.freeBoard(board);
            board = JXG.JSXGraph.initBoard('jxgbox', {originX: 50, originY: 500, unitX: 50, unitY: 50, axis:true});
+
    board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1, 10, 11, -2], axis: true});
            board.suspendUpdate();
+
    board.suspendUpdate();
            var a = board.createElement('chart', dataArr, {chartStyle:'bar',width:0.6,labels:dataArr});
+
    var a = board.create('chart', [[1,3,5,7],[4,-1,3,2]], {chartStyle:'bar',width:0.8});
            board.unsuspendUpdate();
+
    var b = board.create('chart', [[2,4,6,8],[3,1,2,5]], {chartStyle:'bar',fillColor:'#C3D9FF',width:0.8});
        };
+
    board.unsuspendUpdate();
       
+
};
        // Single chart with multiple styles
 
        function multiStyleChart() {
 
            JXG.JSXGraph.freeBoard(board);
 
            board = JXG.JSXGraph.initBoard('jxgbox', {originX: 50, originY: 500, unitX: 50, unitY: 50, axis:true});
 
            board.suspendUpdate();
 
            var a = board.createElement('chart', dataArr, {chartStyle:'bar,line,point',width:0.8,style:6,labels:dataArr});
 
            board.unsuspendUpdate();
 
        };
 
       
 
        // Two bar charts
 
        function twoBarCharts() {
 
            JXG.JSXGraph.freeBoard(board);
 
            board = JXG.JSXGraph.initBoard('jxgbox', {originX: 50, originY: 500, unitX: 50, unitY: 50, axis:true});
 
            board.suspendUpdate();
 
            var a = board.createElement('chart', [[1,3,5,7],[4,-1,3,2]], {chartStyle:'bar',width:0.8});
 
            var b = board.createElement('chart', [[2,4,6,8],[3,1,2,5]], {chartStyle:'bar',fillColor:'#C3D9FF',width:0.8});
 
            board.unsuspendUpdate();
 
        };
 
  
        // Bar chart with horizontal bars
+
// Bar chart with horizontal bars
        function horizontalBarChart() {
+
function horizontalBarChart() {
            JXG.JSXGraph.freeBoard(board);
+
    JXG.JSXGraph.freeBoard(board);
            board = JXG.JSXGraph.initBoard('jxgbox', {originX: 50, originY: 500, unitX: 50, unitY: 50, axis:true});
+
    board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1, 10, 11, -2], axis: true});
            board.suspendUpdate();
+
    board.suspendUpdate();
            var a = board.createElement('chart', dataArr, {chartStyle:'bar',labels:dataArr,width:0.8,dir:'horizontal'});
+
    var a = board.create('chart', dataArr, {chartStyle:'bar',labels:dataArr,width:0.8,dir:'horizontal'});
            board.unsuspendUpdate();
+
    board.unsuspendUpdate();
        };
+
};
  
        // Single chart with dynamic entries
+
// Single chart with dynamic entries
        function dynamicBarChart() {
+
function dynamicBarChart() {
            JXG.JSXGraph.freeBoard(board);
+
    JXG.JSXGraph.freeBoard(board);
            board = JXG.JSXGraph.initBoard('jxgbox', {originX: 50, originY: 450, unitX: 50, unitY: 50, axis:true});
+
    board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1, 10, 11, -2], axis: true});
            board.suspendUpdate();
+
    board.suspendUpdate();
            var s = board.createElement('slider', [[5,-1],[8,-1], [1,1,2]], {name:'S'});
+
    var s = board.create('slider', [[5,-1],[8,-1], [1,1,2]], {name:'S'});
            var f = [function(){return this.board.round(s.Value()*4,2);},
+
    var f = [function(){return this.board.round(s.Value()*4,2);},
                    function(){return this.board.round(s.Value()*(-1),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()*3,2);},
                    function(){return this.board.round(s.Value()*2,2);}];
+
            function(){return this.board.round(s.Value()*2,2);}];
            var chart = board.createElement('chart', [f], {chartStyle:'bar',width:0.8,labels:f});
+
    var chart = board.create('chart', [f], {chartStyle:'bar',width:0.8,labels:f});
            board.unsuspendUpdate();
+
    board.unsuspendUpdate();
        };
+
};
  
        // Regression curve
+
// Regression curve
        function fitChart(deg) {
+
function fitChart(deg) {
            JXG.JSXGraph.freeBoard(board);
+
    JXG.JSXGraph.freeBoard(board);
            board = JXG.JSXGraph.initBoard('jxgbox', {originX: 50, originY: 450, unitX: 50, unitY: 50, axis:true});
+
    board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1, 10, 11, -2], axis: true});
            board.suspendUpdate();
+
    board.suspendUpdate();
            var a = board.createElement('chart', dataArr,  
+
    var a = board.create('chart', dataArr,  
                {chartStyle:'bar,fit', degree:deg, colorArray:['#B02B2C','#3F4C6B','#C79810','#D15600'], dash:2}
+
        {chartStyle:'bar,fit', degree:deg, colorArray:['#B02B2C','#3F4C6B','#C79810','#D15600'], dash:2}
            );
+
    );
            board.unsuspendUpdate();
+
    board.unsuspendUpdate();
        }
+
}
        lineChart();
+
lineChart();
 
</source>
 
</source>
  
 
[[Category:Examples]]
 
[[Category:Examples]]
 
[[Category:Charts]]
 
[[Category:Charts]]

Revision as of 15:30, 7 June 2011

JSXGraph supports chart plotting. Here are some examples of possible chart types.

The Code

var board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1, 10, 11, -2], axis: true});
var dataArr = [4,1,3,2,5,7,1.5,2];
        
// Line chart
function lineChart() {
    JXG.JSXGraph.freeBoard(board);
    board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1, 10, 11, -2], axis: true});
    board.suspendUpdate();
    var a = board.create('chart', dataArr, {chartStyle:'line',strokeWidth:4,strokeColor:'#0000ff'});
    board.unsuspendUpdate();
};

// Line chart with cubic splines
function splineChart() {
    JXG.JSXGraph.freeBoard(board);
    board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1, 10, 11, -2], axis: true});
    board.suspendUpdate();
    var a = board.create('chart', dataArr, {chartStyle:'spline',strokeWidth:4,strokeColor:'#0000ff'});
    board.unsuspendUpdate();
};

// Bar chart
function barChart() {
    JXG.JSXGraph.freeBoard(board);
    board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1, 10, 11, -2], axis: true});
    board.suspendUpdate();
    var a = board.create('chart', dataArr, {chartStyle:'bar',width:0.6,labels:dataArr});
    board.unsuspendUpdate();
};

// Single chart with multiple styles
function multiStyleChart() {
    JXG.JSXGraph.freeBoard(board);
    board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1, 10, 11, -2], axis: true});
    board.suspendUpdate();
    var a = board.create('chart', dataArr, {chartStyle:'bar,line,point',width:0.8,size:4,labels:dataArr});
    board.unsuspendUpdate();
};

// Two bar charts
function twoBarCharts() {
    JXG.JSXGraph.freeBoard(board);
    board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1, 10, 11, -2], axis: true});
    board.suspendUpdate();
    var a = board.create('chart', [[1,3,5,7],[4,-1,3,2]], {chartStyle:'bar',width:0.8});
    var b = board.create('chart', [[2,4,6,8],[3,1,2,5]], {chartStyle:'bar',fillColor:'#C3D9FF',width:0.8});
    board.unsuspendUpdate();
};

// Bar chart with horizontal bars
function horizontalBarChart() {
    JXG.JSXGraph.freeBoard(board);
    board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1, 10, 11, -2], axis: true});
    board.suspendUpdate();
    var a = board.create('chart', dataArr, {chartStyle:'bar',labels:dataArr,width:0.8,dir:'horizontal'});
    board.unsuspendUpdate();
};

// Single chart with dynamic entries
function dynamicBarChart() {
    JXG.JSXGraph.freeBoard(board);
    board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1, 10, 11, -2], axis: true});
    board.suspendUpdate();
    var s = board.create('slider', [[5,-1],[8,-1], [1,1,2]], {name:'S'});
    var f = [function(){return this.board.round(s.Value()*4,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);}];
    var chart = board.create('chart', [f], {chartStyle:'bar',width:0.8,labels:f});
    board.unsuspendUpdate();
};

// Regression curve
function fitChart(deg) {
    JXG.JSXGraph.freeBoard(board);
    board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1, 10, 11, -2], axis: true});
    board.suspendUpdate();
    var a = board.create('chart', dataArr, 
        {chartStyle:'bar,fit', degree:deg, colorArray:['#B02B2C','#3F4C6B','#C79810','#D15600'], dash:2}
    );
    board.unsuspendUpdate();
}
lineChart();