Difference between revisions of "Pie chart"

From JSXGraph Wiki
Jump to: navigation, search
Line 35: Line 35:
 
                                                 this.midpoint.coords.usrCoords[2]+dy*(z+ddy)/z],
 
                                                 this.midpoint.coords.usrCoords[2]+dy*(z+ddy)/z],
 
                                                 this.board);
 
                                                 this.board);
             this.board.renderer.updateArc(this);
+
             this.prepareUpdate().update().updateRenderer():
           
 
            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]);
 
 
         };
 
         };
 
            
 
            
Line 70: Line 55:
 
                                                 this.midpoint.coords.usrCoords[2]+dy*(z-ddy)/z],
 
                                                 this.midpoint.coords.usrCoords[2]+dy*(z-ddy)/z],
 
                                                 this.board);
 
                                                 this.board);
             this.board.renderer.updateArc(this);
+
             this.prepareUpdate().update().updateRenderer():
           
 
            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]);
 
 
         };  
 
         };  
 
     }
 
     }

Revision as of 14:41, 17 June 2010

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

JavaScript code to produce this chart

Soon ...