// 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();