bar chart

HTML

<script src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
<link rel="stylesheet" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css">
<div id="jxgbox" class="jxgbox" style="width:500px; height:500px;"></div>

CSS

#jxgbox {
    width: 500px;
    height: 500px;
}

JavaScript

var board = JXG.JSXGraph.initBoard('jxgbox', {axis:true,
        boundingbox: [-10,10,10,-10], keepaspectratio:true});
var arrCollection = new Array();var points = [];
var getMouseCoords = function(e, i) {
        var cPos = board.getCoordsTopLeftCorner(e, i),
            absPos = JXG.getPosition(e, i),
            dx = absPos[0]-cPos[0],
            dy = absPos[1]-cPos[1];

        return new JXG.Coords(JXG.COORDS_BY_SCREEN, [dx, dy], board);
    },
    down = function(e) {
        var canCreate = true, i, coords, el;
        

        if (e[JXG.touchProperty]) {
            // index of the finger that is used to extract the coordinates
            i = 4;
        }
        coords = getMouseCoords(e, i);

        for (el in board.objects) {
            if(JXG.isPoint(board.objects[el]) && board.objects[el].hasPoint(coords.scrCoords[1], coords.scrCoords[2])) {
                canCreate = false;
                break;
            }
        }

        if (canCreate) {
        		    		var strCoOrdinates = coords.usrCoords[1]+","+coords.usrCoords[2]
             if(arrCollection.length <4)
            {
              arrCollection.push(strCoOrdinates);
            	points.push(board.create('point', [coords.usrCoords[1], coords.usrCoords[2]]));             
               
            }
            if(arrCollection.length==4)
            {
    		     var poly = board.create('polygon', points, {hasInnerPoints:true});}
        }
      
    },
    
    board = JXG.JSXGraph.initBoard('jxgbox', {boundingbox: [-5,5,5,-5], axis: true});

    board.on('down', down);