Element Chart
JXG.GeometryElement
↳ JXG.Chart
↳ Chart
Various types of charts for data visualization.
Defined in: chart.js.
Extends
JXG.Chart.
| Constructor Attributes | Constructor Name and Description |
|---|---|
- Methods borrowed from class JXG.Chart:
- drawBar, drawFit, drawLine, drawPie, drawPoints, drawRadar, drawSpline, updateDataArray, updateRenderer
- Methods borrowed from class JXG.GeometryElement:
- _set, addChild, addDescendants, addParents, addParentsFromJCFunctions, addRotation, addTicks, addTransform, animate, bounds, clearTrace, cloneToBackground, countChildren, createGradient, createLabel, draggable, eval, evalVisProp, formatNumberLocale, fullUpdate, generatePolynomial, getAttribute, getAttributes, getLabelAnchor, getName, getParents, getProperty, getSnapSizes, getTextAnchor, getType, handleSnapToGrid, hasPoint, hide, hideElement, noHighlight, normalize, prepareUpdate, remove, removeAllTicks, removeChild, removeDescendants, removeTicks, resolveShortcuts, setArrow, setAttribute, setDash, setDisplayRendNode, setLabel, setLabelText, setName, setParents, setPosition, setPositionDirectly, setProperty, show, showElement, snapToPoints, update, updateVisibility, useLocale
- Events borrowed from class JXG.GeometryElement:
- attribute, attribute:key, down, drag, keydrag, mousedown, mousedrag, mousemove, mouseout, mouseover, mouseup, move, out, over, pendown, pendrag, penup, touchdown, touchdrag, touchup, up
Element Detail
Chart
-
This element has no direct constructor. To create an instance of this element you have to call JXG.Board#create
with type "chart".
- Possible parent array combinations are:
-
{Array} x
- Array of x-coordinates (default case, see below for alternatives)
-
{Array} y
- Array of y-coordinates (default case, see below for alternatives)
The parent array may be of one of the following forms:
- Parents array looks like [number, number, number, ...]. It is interpreted as array of y-coordinates. The x coordinates are automatically set to [1, 2, ...]
- Parents array looks like [[number, number, number, ...]]. The content is interpreted as array of y-coordinates. The x coordinates are automatically set to [1, 2, ...]x coordinates are automatically set to [1, 2, ...] Default case: [[x0,x1,x2,...],[y1,y2,y3,...]]
- Throws:
- {Exception}
- If the element cannot be constructed with the given parent objects an exception is thrown.
- See:
- JXG.Chart#drawBar
- JXG.Chart#drawFit
- JXG.Chart#drawLine
- JXG.Chart#drawPie
- JXG.Chart#drawPoints
- JXG.Chart#drawRadar
- JXG.Chart#drawSpline
- Examples:
board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox:[-0.5,8,9,-2],axis:true});
var f = [4, 2, -1, 3, 6, 7, 2];
var chart = board.create('chart', f,
{chartStyle:'bar',
width:0.8,
labels:f,
colorArray:['#8E1B77','#BE1679','#DC1765','#DA2130','#DB311B','#DF4917','#E36317','#E87F1A',
'#F1B112','#FCF302','#C1E212'],
label: {fontSize:30, display:'internal', anchorX:'left', rotate:90}
});
board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-1, 9, 13, -3], axis:true});
var s = board.create('slider', [[4,7],[8,7],[1,1,1.5]], {name:'S', strokeColor:'black', fillColor:'white'});
var f = [function(){return (s.Value()*4.5).toFixed(2);},
function(){return (s.Value()*(-1)).toFixed(2);},
function(){return (s.Value()*3).toFixed(2);},
function(){return (s.Value()*2).toFixed(2);},
function(){return (s.Value()*(-0.5)).toFixed(2);},
function(){return (s.Value()*5.5).toFixed(2);},
function(){return (s.Value()*2.5).toFixed(2);},
function(){return (s.Value()*(-0.75)).toFixed(2);},
function(){return (s.Value()*3.5).toFixed(2);},
function(){return (s.Value()*2).toFixed(2);},
function(){return (s.Value()*(-1.25)).toFixed(2);}
];
var chart = board.create('chart', [f],
{chartStyle:'bar',width:0.8,labels:f,
colorArray:['#8E1B77','#BE1679','#DC1765','#DA2130','#DB311B','#DF4917','#E36317','#E87F1A',
'#F1B112','#FCF302','#C1E212']});
var dataArr = [4,1,3,2,5,6.5,1.5,2,0.5,1.5,-1];
var chart2 = board.create('chart', dataArr, {chartStyle:'line,point'});
chart2[0].setAttribute('strokeColor:black','strokeWidth:2pt');
for(var i=0; i<11;i++) {
chart2[1][i].setAttribute({strokeColor:'black',fillColor:'white',face:'[]', size:4, strokeWidth:'2pt'});
}
board.unsuspendUpdate();
var dataArr = [4, 1.2, 3, 7, 5, 4, 1.54, function () { return 2; }];
var a = board.create('chart', dataArr, {
chartStyle:'pie', colors:['#B02B2C','#3F4C6B','#C79810','#D15600'],
fillOpacity:0.9,
center:[5,2],
strokeColor:'#ffffff',
strokeWidth:6,
highlightBySize:true,
highlightOnSector:true
});
board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-12, 12, 20, -12], axis: false});
board.suspendUpdate();
// See labelArray and paramArray
var dataArr = [[23, 14, 15.0], [60, 8, 25.0], [0, 11.0, 25.0], [10, 15, 20.0]];
var a = board.create('chart', dataArr, {
chartStyle:'radar',
colorArray:['#0F408D','#6F1B75','#CA147A','#DA2228','#E8801B','#FCF302','#8DC922','#15993C','#87CCEE','#0092CE'],
//fillOpacity:0.5,
//strokeColor:'black',
//strokeWidth:1,
//polyStrokeWidth:1,
paramArray:['Speed','Flexibility', 'Costs'],
labelArray:['Ruby','JavaScript', 'PHP', 'Python'],
//startAngle:Math.PI/4,
legendPosition:'right',
//"startShiftRatio": 0.1,
//endShiftRatio:0.1,
//startShiftArray:[0,0,0],
//endShiftArray:[0.5,0.5,0.5],
start:0
//end:70,
//startArray:[0,0,0],
//endArray:[7,7,7],
//radius:3,
//showCircles:true,
//circleLabelArray:[1,2,3,4,5],
//highlightColorArray:['#E46F6A','#F9DF82','#F7FA7B','#B0D990','#69BF8E','#BDDDE4','#92C2DF','#637CB0','#AB91BC','#EB8EBF'],
});
board.unsuspendUpdate();
For more examples see
Attributes borrowed from other Elements
- Attributes borrowed from class JXG.GeometryElement:
- aria, cssClass, dash, dashScale, draft, dragToTopOfLayer, element3D, fillColor, fillOpacity, fixed, frozen, gradient, gradientAngle, gradientCX, gradientCY, gradientEndOffset, gradientFR, gradientFX, gradientFY, gradientR, gradientSecondColor, gradientSecondOpacity, gradientStartOffset, highlight, highlightCssClass, highlightFillColor, highlightFillOpacity, highlightStrokeColor, highlightStrokeOpacity, highlightStrokeWidth, ignoreForLabelAutoposition, isLabel, layer, lineCap, needsRegularUpdate, nonnegativeOnly, precision, priv, rotatable, scalable, shadow, snapToGrid, strokeColor, strokeOpacity, strokeWidth, tabindex, trace, traceAttributes, transitionDuration, transitionProperties, visible, withLabel
Fields borrowed from other Elements
- Fields borrowed from class JXG.Chart:
- elements
- Fields borrowed from class JXG.GeometryElement:
- _org_type, _pos, ancestors, baseElement, board, childElements, descendants, dump, elementClass, elType, hasLabel, highlighted, id, inherits, isDraggable, isReal, lastDragTime, methodMap, mouseover, name, needsUpdate, notExistingParents, numTraces, parents, quadraticform, rendNode, stdform, subs, symbolic, traces, transformations, type, visProp, visPropCalc
Methods borrowed from other Elements
- Methods borrowed from class JXG.Chart:
- drawBar, drawFit, drawLine, drawPie, drawPoints, drawRadar, drawSpline, updateDataArray, updateRenderer
- Methods borrowed from class JXG.GeometryElement:
- _set, addChild, addDescendants, addParents, addParentsFromJCFunctions, addRotation, addTicks, addTransform, animate, bounds, clearTrace, cloneToBackground, countChildren, createGradient, createLabel, draggable, eval, evalVisProp, formatNumberLocale, fullUpdate, generatePolynomial, getAttribute, getAttributes, getLabelAnchor, getName, getParents, getProperty, getSnapSizes, getTextAnchor, getType, handleSnapToGrid, hasPoint, hide, hideElement, noHighlight, normalize, prepareUpdate, remove, removeAllTicks, removeChild, removeDescendants, removeTicks, resolveShortcuts, setArrow, setAttribute, setDash, setDisplayRendNode, setLabel, setLabelText, setName, setParents, setPosition, setPositionDirectly, setProperty, show, showElement, snapToPoints, update, updateVisibility, useLocale
Events borrowed from other Elements