Different chart styles

From JSXGraph Wiki
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.

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 parseFloat((s.Value()*4).toFixed(2));},
             function(){return parseFloat((s.Value()*(-1)).toFixed(2));},
             function(){return parseFloat((s.Value()*3).toFixed(2));},
             function(){return parseFloat((s.Value()*2).toFixed(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();