Pie chart: Difference between revisions

From JSXGraph Wiki
No edit summary
No edit summary
Line 10: Line 10:
         {chartStyle:'pie',   
         {chartStyle:'pie',   
         colorArray:['#0F408D','#6F1B75','#CA147A','#DA2228','#E8801B','#FCF302','#8DC922','#15993C','#87CCEE','#0092CE'],
         colorArray:['#0F408D','#6F1B75','#CA147A','#DA2228','#E8801B','#FCF302','#8DC922','#15993C','#87CCEE','#0092CE'],
         fillOpacity:0.6, center:[5,2], strokeColor:'black', highlightStrokeColor:'black', strokeWidth:4,
         fillOpacity:0.8, 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'],
         highlightOnSector:true,  
         highlightOnSector:true,  
         highlightBySize:true}
         highlightBySize:true,
         //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.moveTo([this.midpoint.coords.usrCoords[1]+dx*(z+ddx)/z,
                                this.midpoint.coords.usrCoords[2]+dy*(z+ddy)/z]);
        };
         
        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.moveTo([this.midpoint.coords.usrCoords[1]+dx*(z-ddx)/z,
                                this.midpoint.coords.usrCoords[2]+dy*(z-ddy)/z]);
        };
    }
*/
     board.unsuspendUpdate();
     board.unsuspendUpdate();
</jsxgraph>
</jsxgraph>


===JavaScript code to produce this chart===
===JavaScript code to produce this chart===
<source lang="xml">
<source lang="javascript">
Soon ...
    var dataArr = [30,16,14,10,10,8,6,6,4,4];
    var board = JXG.JSXGraph.initBoard('jxgbox', {showNavigation:false, showCopyright:true, originX: 120, originY: 400, unitX: 50, unitY: 50});
    board.containerObj.style.backgroundColor = 'black';
    board.suspendUpdate();
 
    var a = board.createElement('chart', dataArr,
        {chartStyle:'pie', 
        colorArray:['#0F408D','#6F1B75','#CA147A','#DA2228','#E8801B','#FCF302','#8DC922','#15993C','#87CCEE','#0092CE'],
        fillOpacity:0.8, 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,
        highlightBySize:true,
        //gradient:'linear'
        }
    );
    board.unsuspendUpdate();
</source>
</source>


[[Category:Examples]]
[[Category:Examples]]
[[Category:Charts]]
[[Category:Charts]]

Revision as of 09:24, 3 August 2010

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

JavaScript code to produce this chart

    var dataArr = [30,16,14,10,10,8,6,6,4,4];
    var board = JXG.JSXGraph.initBoard('jxgbox', {showNavigation:false, showCopyright:true, originX: 120, originY: 400, unitX: 50, unitY: 50});
    board.containerObj.style.backgroundColor = 'black';
    board.suspendUpdate();

    var a = board.createElement('chart', dataArr, 
        {chartStyle:'pie',  
         colorArray:['#0F408D','#6F1B75','#CA147A','#DA2228','#E8801B','#FCF302','#8DC922','#15993C','#87CCEE','#0092CE'],
         fillOpacity:0.8, 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, 
         highlightBySize:true,
         //gradient:'linear'
        }
    );
    board.unsuspendUpdate();
Retrieved from "http://jsxgraph.org/wiki/index.php?title=Pie_chart&oldid=4268"