# JSXGraph 1.7.0 Reference

## JavaScript must be enabled in order for you to use JSXGraph and JSXGraph reference. However, it seems JavaScript is either disabled or not supported by your browser.

Class Index | File Index

Elements

Classes

- _global_
- Angle
- Arc
- Arrow
- Arrowparallel
- Axis
- Bisector
- Bisectorlines
- Boxplot
- Button
- Cardinalspline
- Chart
- Checkbox
- Circle
- Circumcenter
- Circumcircle
- CircumcircleArc
- CircumcircleSector
- Comb
- Conic
- Curve
- Curve3D
- CurveDifference
- CurveIntersection
- CurveUnion
- Derivative
- Ellipse
- ForeignObject
- Functiongraph
- Functiongraph3D
- Glider
- Grid
- Group
- Hatch
- Hyperbola
- Image
- ImplicitCurve
- Incenter
- Incircle
- Inequality
- Input
- Integral
- Intersection
- JXG
- JXG.AbstractRenderer
- JXG.Board
- JXG.Board.infobox
- JXG.C
- JXG.CA
- JXG.CanvasRenderer
- JXG.Chart
- JXG.Circle
- JXG.Complex
- JXG.Composition
- JXG.Coords
- JXG.CoordsElement
- JXG.Curve
- JXG.Curve3D
- JXG.Dump
- JXG.EventEmitter
- JXG.Expect
- JXG.ForeignObject
- JXG.GeometryElement
- JXG.GeometryElement3D
- JXG.GeonextParser
- JXG.Group
- JXG.Image
- JXG.JessieCode
- JXG.JSXGraph
- JXG.Legend
- JXG.Line
- JXG.Line3D
- JXG.Math
- JXG.Math.BoxQuadtree
- JXG.Math.Clip
- JXG.Math.Extrapolate
- JXG.Math.Geometry
- JXG.Math.ImplicitPlot
- JXG.Math.IntervalArithmetic
- JXG.Math.Metapost
- JXG.Math.Nlp
- JXG.Math.Numerics
- JXG.Math.Plot
- JXG.Math.Poly
- JXG.Math.Poly.Monomial
- JXG.Math.Poly.Polynomial
- JXG.Math.Poly.Ring
- JXG.Math.ProbFuncs
- JXG.Math.Quadtree
- JXG.Math.Statistics
- JXG.Math.Symbolic
- JXG.NoRenderer
- JXG.Options
- JXG.Plane3D
- JXG.Point
- JXG.Point3D
- JXG.Polygon
- JXG.PrefixParser
- JXG.Server
- JXG.Server.modules
- JXG.Surface3D
- JXG.SVGRenderer
- JXG.Text
- JXG.Ticks
- JXG.Transformation
- JXG.Turtle
- JXG.Util
- JXG.Util.Base64
- JXG.Util.Unzip
- JXG.Util.UTF8
- JXG.View3D
- JXG.VMLRenderer
- JXG.XML
- Label
- Legend
- Line
- Line3D
- Locus
- MajorArc
- MajorSector
- Measurement
- Metapostspline
- Midpoint
- MinorArc
- MinorSector
- mirrorelement
- Mirrorpoint
- NonReflexAngle
- Normal
- Orthogonalprojection
- OtherIntersection
- Parabola
- Parallel
- Parallelogram
- Parallelpoint
- ParametricSurface3D
- Perpendicular
- PerpendicularPoint
- PerpendicularSegment
- Point
- Point3D
- PolarLine
- PolePoint
- Polygon
- PolygonalChain
- RadicalAxis
- Reflection
- ReflexAngle
- RegularPolygon
- Riemannsum
- Sector
- Segment
- Semicircle
- Slider
- Slopefield
- Slopetriangle
- Smartlabel
- Spline
- Stepfunction
- Tangent
- Tapemeasure
- Text
- Ticks
- Tracecurve
- Transformation
- Turtle
- Vectorfield
- Vectorfield3D
- View3D

# Class Chart

JXG.GeometryElement
↳ JXG.Chart
↳ Chart

Constructor for a chart.
Defined in: chart.js.
Extends JXG.Chart.

Class Summary
Constructor Attributes | Constructor Name and Description
--- | ---
| Chart(x, y)

Fields borrowed from class JXG.Chart:
  elements
Fields borrowed from class JXG.GeometryElement:
  _org_type, _pos, ancestors, baseElement, board, childElements, dash, dashScale, descendants, draft, dragToTopOfLayer, dump, elementClass, elType, fillColor, fillOpacity, fixed, frozen, gradient, gradientAngle, gradientCX, gradientCY, gradientEndOffset, gradientFR, gradientFX, gradientFY, gradientR, gradientSecondColor, gradientSecondOpacity, gradientStartOffset, hasLabel, highlight, highlighted, highlightFillColor, highlightFillOpacity, highlightStrokeColor, highlightStrokeOpacity, highlightStrokeWidth, id, inherits, isDraggable, isLabel, isReal, lastDragTime, layer, lineCap, methodMap, mouseover, name, needsRegularUpdate, needsUpdate, notExistingParents, numTraces, parents, precision, priv, quadraticform, rendNode, rotatable, scalable, shadow, snapToGrid, stdform, strokeColor, strokeOpacity, strokeWidth, subs, symbolic, tabindex, trace, traceAttributes, traces, transformations, transitionDuration, transitionProperties, type, viewport, visible, visProp, visPropCalc, withLabel

Fields borrowed from class JXG.Chart:
  elements
Fields borrowed from class JXG.GeometryElement:
  _org_type, _pos, ancestors, baseElement, board, childElements, dash, dashScale, descendants, draft, dragToTopOfLayer, dump, elementClass, elType, fillColor, fillOpacity, fixed, frozen, gradient, gradientAngle, gradientCX, gradientCY, gradientEndOffset, gradientFR, gradientFX, gradientFY, gradientR, gradientSecondColor, gradientSecondOpacity, gradientStartOffset, hasLabel, highlight, highlighted, highlightFillColor, highlightFillOpacity, highlightStrokeColor, highlightStrokeOpacity, highlightStrokeWidth, id, inherits, isDraggable, isLabel, isReal, lastDragTime, layer, lineCap, methodMap, mouseover, name, needsRegularUpdate, needsUpdate, notExistingParents, numTraces, parents, precision, priv, quadraticform, rendNode, rotatable, scalable, shadow, snapToGrid, stdform, strokeColor, strokeOpacity, strokeWidth, subs, symbolic, tabindex, trace, traceAttributes, traces, transformations, transitionDuration, transitionProperties, type, viewport, visible, visProp, visPropCalc, withLabel

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, 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

Class Detail
Chart(x, y)

Parameters:
{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:

  1. Parents array looks like [number, number, number, ...]. It is interpreted as array of y-coordinates. The x coordinates are automatically set to [1, 2, ...]
  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,...]]
  The attribute value for the key 'chartStyle' determines the type(s) of the chart. 'chartStyle' is a comma separated list of strings of the possible chart types 'bar', 'fit', 'line', 'pie', 'point', 'radar', 'spline'.

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

    JSXgraph wiki: Charts from HTML tables - tutorial
    JSXgraph wiki: Pie chart
    JSXgraph wiki: Various chart styles
    JSXgraph wiki: Dynamic bar chart

Documentation generated by JsDoc Toolkit 2.4.0 on Thu Feb 15 2024 17:48:02 GMT+0000 (Coordinated Universal Time)