Different chart styles

From JSXGraph Wiki
Revision as of 18:09, 5 December 2008 by A WASSERMANN (talk | contribs)
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

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

        var board = JXG.JSXGraph.initBoard('jxgbox', {originX: 50, originY: 400, unitX: 50, unitY: 50});

        var dataArr = [4,1,3,2,5,7,1.5,2];
        
        // Line chart
        function lineChart() {
            JXG.JSXGraph.freeBoard(board);
            board = JXG.JSXGraph.initBoard('jxgbox', {originX: 50, originY: 500, unitX: 50, unitY: 50});
            board.suspendUpdate();
            var b1axisx = board.createElement('axis', [[0,0], [1,0]], {});
            var b1axisy = board.createElement('axis', [[0,0], [0,1]], {});
            var a = board.createElement('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', {originX: 50, originY: 500, unitX: 50, unitY: 50});
            board.suspendUpdate();
            var b1axisx = board.createElement('axis', [[0,0], [1,0]], {});
            var b1axisy = board.createElement('axis', [[0,0], [0,1]], {});
            var a = board.createElement('chart', dataArr, {chartStyle:'spline',strokeWidth:4,strokeColor:'#0000ff'});
            board.unsuspendUpdate();
        };

        // Bar chart
        function barChart() {
            JXG.JSXGraph.freeBoard(board);
            board = JXG.JSXGraph.initBoard('jxgbox', {originX: 50, originY: 500, unitX: 50, unitY: 50});
            board.suspendUpdate();
            var b1axisx = board.createElement('axis', [[0,0], [1,0]], {});
            var b1axisy = board.createElement('axis', [[0,0], [0,1]], {});
            var a = board.createElement('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', {originX: 50, originY: 500, unitX: 50, unitY: 50});
            board.suspendUpdate();
            var b1axisx = board.createElement('axis', [[0,0], [1,0]], {});
            var b1axisy = board.createElement('axis', [[0,0], [0,1]], {});
            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});
            board.suspendUpdate();
            var b1axisx = board.createElement('axis', [[0,0], [1,0]], {});
            var b1axisy = board.createElement('axis', [[0,0], [0,1]], {});
            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
        function horizontalBarChart() {
            JXG.JSXGraph.freeBoard(board);
            board = JXG.JSXGraph.initBoard('jxgbox', {originX: 50, originY: 500, unitX: 50, unitY: 50});
            board.suspendUpdate();
            var b1axisx = board.createElement('axis', [[0,0], [1,0]], {});
            var b1axisy = board.createElement('axis', [[0,0], [0,1]], {});
            var a = board.createElement('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', {originX: 50, originY: 450, unitX: 50, unitY: 50});
            board.suspendUpdate();
            var b1axisx = board.createElement('axis', [[0,0], [1,0]], {});
            var b1axisy = board.createElement('axis', [[0,0], [0,1]], {});

            var s = board.createElement('slider', [5,-1,3,1,2,1], {name:'S'});
            var f = [function(){return this.board.round(s.X()*4,2);},
                     function(){return this.board.round(s.X()*(-1),2);},
                     function(){return this.board.round(s.X()*3,2);},
                     function(){return this.board.round(s.X()*2,2);}];
            var chart = board.createElement('chart', [f], {chartStyle:'bar',width:0.8,labels:f});
            board.unsuspendUpdate();
        };

        // Single pie chart
        function pieChart() {
            JXG.JSXGraph.freeBoard(board);
            board = JXG.JSXGraph.initBoard('jxgbox', {originX: 50, originY: 450, unitX: 50, unitY: 50});
            board.suspendUpdate();
            var a = board.createElement('chart', dataArr, 
                {chartStyle:'pie', colorArray:['#B02B2C','#3F4C6B','#C79810','#D15600'],fillOpacity:0.9,center:[5,2]}
            );
            board.unsuspendUpdate();
        }