piechart.lzx

<!---
    @access public
    @topic Components
    @subtopic Charts
  -->
<library>
    <include href="../styles/chartstyle.lzx"/>
    <include href="../common/dataseries.lzx"/>
    <include href="../common/viewspoolmanager.lzx"/>
    <include href="../common/virtualdrawview.lzx"/>
    <include href="../common/datalabel.lzx"/>
    <include href="../common/chart.lzx"/>
    <include href="../common/legend.lzx"/>
    <include href="piepiece.lzx"/>
    <include href="piechartplotarea.lzx"/>
    
    <!---
          A pie chart represents a chart that is displayed in the 2D
          polar plane. This class inherits immediately from chart class
          and can be instantiated directly. (Warning: Of beta quality.)
          @access public
          -->
    <class name="piechart" extends="chart">

        <!--- @keywords private -->
        <method name="init">
            plotarea = this.getNodeOfClass("piechartplotarea");
            _datalabelpool = this.createLabelViewspool();
            super.init();            
        </method>    

        <!--- Renders the plot area which is an instance of the piechartplotarea 
              class. The plot area requires to read a group of two data series, one
              for the groups that are represented by the pie slices and the second
              for their values. -->
        <method name="renderPlotArea">
        
            super.renderPlotArea();
            plotarea.clear();

            var topseries = this.getDataSeries();
            
            //var numSeries = topseries.getNumDataSeries();
            var numSeries = 1;
 
                                
            for(var i = 0; i < numSeries; i++)
            {
                var leafseries = topseries.getDataSeries(i);
                //FIXME!!(LHCR, 5/06/2005): Read hard coded data columns - 'x', 'y'
                if(leafseries.getDataColumn("x") != null){
                    var xseries = leafseries.getDataColumn("x").values;
                } else {
                    var xseries = null;
                }
                if(leafseries.getDataColumn("y") != null){
                    var yseries = leafseries.getDataColumn("y").values;
                } else {
                    var yseries = null;
                }
                var tooltipseries;// = leafseries.getDataColumn(this.datatipColumn).values; 
                
                plotarea.renderSeries(xseries, yseries, tooltipseries);          
            }
            if ( this.datalabelEnabled ){
                this.renderDataLabels();
            }

        
        </method>
        
        <!--- Renders the labels that display the values of the data series. -->
        <method name="renderDataLabels">
        
            
                _datalabelpool.reclaimAll();
            
                var arrPiePieces = this.plotarea.arrPiePieces;
                var topseries = this.getDataSeries();
                var leafseries = topseries.getDataSeries(0);
                    //FIXME!!(LHCR, 5/06/2005): Read hard coded data columns - 'x', 'y'
                if(leafseries.getDataColumn(this.datalabelColumn) != null){
                    var yseries = leafseries.getDataColumn(this.datalabelColumn).values;
                } else {
                    var yseries = null;
                }

                for(var i = 0; i < arrPiePieces.length; i++){ 
                    piePiece = arrPiePieces[i];  
                    
                    var lbl = _datalabelpool.getView();
                    var ldatastyle = piePiece.style;
                    lbl.setAttribute('style', ldatastyle.label);
                    lbl.render(yseries[i]);
                    piePiece.renderLabel(lbl);
                }
            
                
        </method>
        
        <!--- The plot area where the pie slices are rendered -->
        <piechartplotarea name="plotarea" x="50" y="20" width="500" height="300"/>

        <doc>
            <tag name="shortdesc">
                <text>
                    The piechart component allows for the creation of a pie chart using series data.
                </text>
            </tag>
            <text>
                <warning>This component is of Beta quality and is subject to change.</warning>
                <p>The following is a piechart that uses series data.</p>

                <example title="Simple piechart">
                    <canvas height="400" width="400">    
                        <dataset name="baseball"
                            src="resources/pie-data.xml"/> 

                        <piechart id="chart1" width="500" height="500"  dataPointsEnabled="true"
                        datalabelEnabled="true" datalabelColumn="y" style="defaultchartstyle">
                            <dataseries datapath="baseball:/records">
                                <datacolumn name="x"  columndatapath="record/@year"
                                    datatype="number"/> 
                                <dataseries label="wins">                
                                    <datacolumn  name="y" columndatapath="record/@wins"
                                        datatype="number"/>
                                </dataseries>  
                                <datacolumn name="tooltip" columndatapath="record">
                                        <method name="processData" args="v">
                                            return  "year: " + v.attributes.year + "  wins: " +
                                                v.attributes.wins;
                                        </method>
                                </datacolumn>                        
                            </dataseries> 

                            <strokestyle name="pieslicestyle" strokeColor="0x000000" strokeWidth="2"
                                strokeType="dotted" />
                            <legend name="legendbox" legendFontsize="14" initstage="late"
                                legendborder="false">
                                <handler name="onitemmouseover" args="item">
                                    var piepiece = parent.plotarea.arrPiePieces[item.identifier];
                                    piepiece.renderInnerWedge();
                                </handler>

                                <handler name="onitemmouseout" args="item">
                                    var piepiece = parent.plotarea.arrPiePieces[item.identifier];
                                    piepiece.renderWedge();
                                </handler>
                            </legend>

                        </piechart>
                    </canvas>
                </example>
            
            </text>
        </doc>
    </class>
    
</library>
<!-- * X_LZ_COPYRIGHT_BEGIN 
***************************************************
* Copyright 2001-2008 Laszlo Systems, Inc.  All Rights Reserved.              
* Use is subject to license terms.                                            
* X_LZ_COPYRIGHT_END 
****************************************************** -->
<!-- @LZX_VERSION@                                                       
   -->