Difference between revisions of "Pie chart"

From JSXGraph Wiki
Jump to navigationJump to search
Line 2: Line 2:
  
 
<jsxgraph width="800" height="600">
 
<jsxgraph width="800" height="600">
     var dataArr = [30,16,12,8,8,8,6,4,4,2];
+
     var dataArr = [30,16,14,10,10,8,6,6,4,4];
     var board = JXG.JSXGraph.initBoard('jxgbox', {originX: 120, originY: 400, unitX: 50, unitY: 50});
+
     var board = JXG.JSXGraph.initBoard('box', {showNavigation:false, showCopyright:false, originX: 120, originY: 400, unitX: 50, unitY: 50});
 
     board.containerObj.style.backgroundColor = 'black';
 
     board.containerObj.style.backgroundColor = 'black';
      
+
     board.suspendUpdate();
 +
 
 
     var a = board.createElement('chart', dataArr,  
 
     var a = board.createElement('chart', dataArr,  
         {chartStyle:'pie', colorArray:['#DA2228','#E8801B','#FCF302','#8DC922','#15993C','#87CCEE','#0092CE','#0F408D','#6F1B75','#CA147A'],
+
         {chartStyle:'pie',
         fillOpacity:0.9,center:[5,2],strokeColor:'black',highlightStrokeColor:'black',strokeWidth:4,
+
        colorArray:['#0F408D','#6F1B75','#CA147A','#DA2228','#E8801B','#FCF302','#8DC922','#15993C','#87CCEE','#0092CE'],
 +
         fillOpacity:0.9, center:[5,2], strokeColor:'black', highlightStrokeColor:'black', strokeWidth:4,
 
         labelArray:['Ruby','JavaScript', 'Shell','Python', 'PHP', 'C','Perl', 'C++', 'Java', 'Flash'],
 
         labelArray:['Ruby','JavaScript', 'Shell','Python', 'PHP', 'C','Perl', 'C++', 'Java', 'Flash'],
 
         highlightColorArray:['#E46F6A','#F9DF82','#F7FA7B','#B0D990','#69BF8E','#BDDDE4','#92C2DF','#637CB0','#AB91BC','#EB8EBF'],
 
         highlightColorArray:['#E46F6A','#F9DF82','#F7FA7B','#B0D990','#69BF8E','#BDDDE4','#92C2DF','#637CB0','#AB91BC','#EB8EBF'],
Line 14: Line 16:
 
         gradient:'linear'}
 
         gradient:'linear'}
 
     );
 
     );
 +
 +
    for(var i=0; i< a[0].arcs.length; i++) {
 +
        a[0].arcs[i].highlight = function() {
 +
            this.board.renderer.highlight(this);
 +
            if(this.label.content != null) {
 +
                this.label.content.rendNode.style.fontSize = (2*this.board.fontSize) + 'px';
 +
            }
 +
           
 +
            var dx = - this.midpoint.coords.usrCoords[1] + this.point2.coords.usrCoords[1];
 +
            var dy = - this.midpoint.coords.usrCoords[2] + this.point2.coords.usrCoords[2];
 +
           
 +
            var ddx = 20/(this.board.stretchX);
 +
            var ddy = 20/(this.board.stretchY);
 +
            var z = Math.sqrt(dx*dx+dy*dy);
 +
           
 +
            this.point2.coords = new JXG.Coords(JXG.COORDS_BY_USER,
 +
                                                [this.midpoint.coords.usrCoords[1]+dx*(z+ddx)/z,
 +
                                                this.midpoint.coords.usrCoords[2]+dy*(z+ddy)/z],
 +
                                                this.board);
 +
            this.board.renderer.updateArc(this);
 +
           
 +
            this.board.renderer.updateLine(this.additionalLines[0]);
 +
           
 +
            dx = - this.midpoint.coords.usrCoords[1] + this.additionalLines[1].point2.coords.usrCoords[1];
 +
            dy = - this.midpoint.coords.usrCoords[2] + this.additionalLines[1].point2.coords.usrCoords[2];
 +
           
 +
            ddx = 20/(this.board.stretchX);
 +
            ddy = 20/(this.board.stretchY);
 +
            z = Math.sqrt(dx*dx+dy*dy);           
 +
            this.additionalLines[1].point2.coords = new JXG.Coords(JXG.COORDS_BY_USER,
 +
                                                [this.midpoint.coords.usrCoords[1]+dx*(z+ddx)/z,
 +
                                                this.midpoint.coords.usrCoords[2]+dy*(z+ddy)/z],
 +
                                                this.board);
 +
            this.board.renderer.highlight(this.additionalLines[1]);
 +
            this.board.renderer.updateLine(this.additionalLines[1]);
 +
        };
 +
         
 +
        a[0].arcs[i].noHighlight = function() {
 +
            this.board.renderer.noHighlight(this);
 +
            if(this.label.content != null) {
 +
                this.label.content.rendNode.style.fontSize = (this.board.fontSize) + 'px';
 +
            }
 +
           
 +
            var dx = -this.midpoint.coords.usrCoords[1] + this.point2.coords.usrCoords[1];
 +
            var dy = -this.midpoint.coords.usrCoords[2] + this.point2.coords.usrCoords[2];
 +
           
 +
            var ddx = 20/(this.board.stretchX);
 +
            var ddy = 20/(this.board.stretchY);
 +
            var z = Math.sqrt(dx*dx+dy*dy);
 +
           
 +
            this.point2.coords = new JXG.Coords(JXG.COORDS_BY_USER,
 +
                                                [this.midpoint.coords.usrCoords[1]+dx*(z-ddx)/z,
 +
                                                this.midpoint.coords.usrCoords[2]+dy*(z-ddy)/z],
 +
                                                this.board);
 +
            this.board.renderer.updateArc(this);
 +
           
 +
            this.board.renderer.updateLine(this.additionalLines[0]);                                             
 +
 +
 +
            this.board.renderer.noHighlight(this);
 +
           
 +
            dx = -this.midpoint.coords.usrCoords[1] + this.additionalLines[1].point2.coords.usrCoords[1];
 +
            dy = -this.midpoint.coords.usrCoords[2] + this.additionalLines[1].point2.coords.usrCoords[2];
 +
           
 +
            ddx = 20/(this.board.stretchX);
 +
            ddy = 20/(this.board.stretchY);
 +
            z = Math.sqrt(dx*dx+dy*dy);
 +
           
 +
            this.additionalLines[1].point2.coords = new JXG.Coords(JXG.COORDS_BY_USER,
 +
                                                [this.midpoint.coords.usrCoords[1]+dx*(z-ddx)/z,
 +
                                                this.midpoint.coords.usrCoords[2]+dy*(z-ddy)/z],
 +
                                                this.board);                                             
 +
            this.board.renderer.updateLine(this.additionalLines[1]);
 +
        };
 +
    }
 +
    board.unsuspendUpdate();
 
</jsxgraph>
 
</jsxgraph>
  

Revision as of 09:52, 30 September 2009

A pie chart with highlight on the whole sector, enlarging labels on highlight and a gradient fill.

JavaScript code to produce this chart

<jsxgraph width="800" height="600">
    var dataArr = [30,16,12,8,8,8,6,4,4,2];
    var board = JXG.JSXGraph.initBoard('jxgbox', {originX: 120, originY: 400, unitX: 50, unitY: 50});
    board.containerObj.style.backgroundColor = 'black';
    
    var a = board.createElement('chart', dataArr, 
        {chartStyle:'pie',  
         colorArray:['#DA2228','#E8801B','#FCF302','#8DC922','#15993C','#87CCEE','#0092CE','#0F408D','#6F1B75','#CA147A'],
         fillOpacity:0.9, center:[5,2], strokeColor:'black', highlightStrokeColor:'black', strokeWidth:4,
         labelArray:['Ruby','JavaScript', 'Shell','Python', 'PHP', 'C','Perl', 'C++', 'Java', 'Flash'],
         highlightColorArray:['#E46F6A','#F9DF82','#F7FA7B','#B0D990','#69BF8E','#BDDDE4','#92C2DF','#637CB0','#AB91BC','#EB8EBF'],
         highlightOnSector:true,
         gradient:'linear'}
    );
</jsxgraph>