Share JSXGraph: example "Chart styles"

JSXGraph
Share JSXGraph: example "Chart styles"
This website is a beta version. The official release will be in **2023**.

Chart styles

Have also a look at "Charts of dynamic data".
JSXGraph supports chart plotting. Here are some examples of possible chart types.

    <input type="button" value="Line chart" onClick="lineChart()">
    <input type="button" value="Spline chart" onClick="splineChart()">
    <input type="button" value="Bar chart" onClick="barChart()">
    <input type="button" value="Multiple styles" onClick="multiStyleChart()">
    <input type="button" value="Two bar charts" onClick="twoBarCharts()">
    <input type="button" value="Horizontal bars" onClick="horizontalBarChart()">
    <input type="button" value="Dynamic bars" onClick="dynamicBarChart()">
<br/>
    <input type="button" value="Regression line" onClick="fitChart(1)">
    <input type="button" value="Regression parabola" onClick="fitChart(2)">
// Define the id of your board in BOARDID

var board =JXG.JSXGraph.initBoard(BOARDID, {boundingbox: [-1, 10, 11, -2], axis: true});

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

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

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

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

// Two bar charts
function twoBarCharts() {
    JXG.JSXGraph.freeBoard(board);
    board = JXG.JSXGraph.initBoard(BOARDID, {boundingbox: [-1, 10, 11, -2], axis: true});
    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});
};

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

// Single chart with dynamic entries
function dynamicBarChart() {
    JXG.JSXGraph.freeBoard(board);
    board = JXG.JSXGraph.initBoard(BOARDID, {boundingbox: [-1, 10, 11, -2], axis: true});
    var s = board.create('slider', [[5,-1],[8,-1], [1,1,2]], {name:'S'});
    var f = [() => (s.Value() * 4).toFixed(2),
             () => (s.Value()*(-1)).toFixed(2),
             () => (s.Value()*3).toFixed(2),
             () => (s.Value()*2).toFixed(2)];
    var chart = board.create('chart', [f], {chartStyle:'bar',
            width:0.8, labels:f});
};

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

lineChart();