barchart.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/rectangularchart.lzx"/>
    <include href="../common/legend.lzx"/>
    <include href="../common/axis.lzx"/>
    <include href="../common/databar.lzx"/>
    <include href="barchartplotarea.lzx"/>
    <include href="../common/datalabel.lzx"/>
    
    <!--- A chart class that renders horizontal bars.
      Inherits from the chart class.  (Warning: Of beta quality.)
      @access public
      -->
    <class name="barchart" extends="rectangularchart">
        <!--- @keyword private -->
        <method name="init">
            // this.render() needs the reference to plotarea, so let's get it here
            plotarea = this.getNodeOfClass("barchartplotarea");
            this.render();
            super.init();            
        </method>    
        
        <!--- @keyword private -->
        <method name="renderPlotArea">
        
            super.renderPlotArea();

            plotarea.clear();
            plotarea.setDataBound(haxis.minimumRender, vaxis.minimumRender,  haxis.maximumRender, vaxis.maximumRender + 1);
            
            var topseries = this.getDataSeries();
            
            var numSeries = topseries.getNumDataSeries();
            plotarea.numseries = numSeries;
            //FIXME!!(peter, 4/13/2005): hardcode color            
            var colors = [0xff0000, 0xffff00, 0x0000ff];  
            var barwidth =  1 / (numSeries + 1);  
                                
            for(var i = 0; i < numSeries; i++)
            {
                var leafseries = topseries.getDataSeries(i);
                if(leafseries.getDataColumn(vaxis.columnName) != null){
                    var xseries = leafseries.getDataColumn(vaxis.columnName).values;
                } else {
                    var xseries = null;
                }
                if(leafseries.getDataColumn(haxis.columnName) != null){
                    var yseries = leafseries.getDataColumn(haxis.columnName).values;
                } else {
                    var yseries = null;
                }
                var tooltipseries = null;
                var labelseries = null;
                var ldatastyle = this.style.getDataStyle(i);
                if(this.datatipEnabled && leafseries.getDataColumn(this.datatipColumn) != null){                                      
                    tooltipseries = leafseries.getDataColumn(this.datatipColumn).values; 
                }

                var labeldpath;
                var usehaxis = false;
                if(leafseries.getDataColumn(vaxis.columnName).labeldatapath == ''){
                    labeldpath = leafseries.getDataColumn(haxis.columnName).labeldatapath;
                    usehaxis = true;
                } else {
                    labeldpath = leafseries.getDataColumn(vaxis.columnName).labeldatapath;
                }
                if ( this.datalabelEnabled && labeldpath != ''){
                    if(leafseries.getDataColumn(this.datalabelColumn) != ''){
                        labelseries = leafseries.getDataColumn((usehaxis == true ? haxis.columnName : vaxis.columnName)).getDataPath().xpathQuery(labeldpath);
                    }
                }
                
                if (leafseries.enabled ) {
                    plotarea.renderSeries(xseries, yseries, tooltipseries, labelseries, ldatastyle, barwidth / 2 + barwidth * i, barwidth);
                }
            }
        
        </method>
        
        <!--- change the virtual boundary of the bar chart
            @param Number newminx: the new min x of the boundary
            @param Number newminy: the new min y of the boundary
            @param Number newmaxx: the new max x of the boundary
            @param Number newmaxy: the new max y of the boundary
            @param Number animated: the animation duration in milliseconds. 0 for no animation
            @param Number undoable: deterimine if the action can be undo
        -->
        <method name="changeBound" args="newminx, newminy, newmaxx, newmaxy,  animated, undoable">
            //super.changeBound(newminx, newminy, newmaxx, newmaxy - 1,  animated, undoable);
            actionhelper.changeBound(newminx, newminy, newmaxx, newmaxy - 1,  animated, undoable);
        </method>

        <doc>
            <tag name="shortdesc">
                <text>
                    The barchart component allows for the creation of a bar 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 barchart that uses series data.</p>

                <example title="Simple barchart">
                    <canvas height="900" width="600">    
                        <include href="charts/styles/chartstyle.lzx"/>    

                        <dataset name="baseball"
                            src="resources/simple-redsox-data.xml"/> 

                        <simplelayout axis="y"/>   

                        <!-- Chart Title -->      
                        <view name="title" y="10">
                            <text font="serif" fontsize="15" fontstyle="bold" fgcolor="0x0000FF">Bar
                                Chart</text>
                        </view>

                        <!-- Bar Chart -->     
                        <barchart id="chart1" width="500" height="500" datatipEnabled="true"
                            datatipColumn="tooltip" 
                        style="defaultchartstyle01" datalabelEnabled="false" datalabelColumn="label">

                            <dataseries datapath="baseball:/records" >
                                <datacolumn name="y"  columndatapath="record/@year"
                                    datatype="number"/>
                                <datacolumn name="label" columndatapath="record/@attendance"/>
                                <dataseries label="wins">                
                                    <datacolumn  name="x" columndatapath="record/@wins"
                                        datatype="number"/>
                                    <datacolumn name="tooltip" columndatapath="record">
                                        <method name="processData" args="v">
                                            return  "year: " + v.attributes.year + "  wins: " +
                                                v.attributes.wins;
                                        </method>
                                    </datacolumn>
                                </dataseries>
                            </dataseries> 

                            <barchartplotarea name="plotarea" clip="true"/>

                            <horizontalaxis name="haxis" 
                                            title="Values" 
                                            type="linear" 
                                            columnName="x" 
                                            titleLocation="high">
                            </horizontalaxis>

                            <verticalaxis name="vaxis" 
                                          title="Years" 
                                          type="categorical"  
                                          columnName="y"  
                                          titleLocation="above"
                                          ticklabelcolumn="wins">
                            </verticalaxis>        
                        </barchart>

                        <legend name="legendbox" 
                                legendFontsize="14" 
                                legendborder="false" 
                                chart="${chart1}" 
                                x="${chart1.x + chart1.width + 20}" 
                                y="${(chart1.y + chart1.height)/2}" 
                                options="ignorelayout" 
                                fillColor="0x339933">
                              <handler name="onitemmouseclick" args="item">
                                  var topseries = this.chart.getDataSeries();

                                  topseries.getDataSeries(item.identifier).enabled = item.linevisible;
                                  this.chart.renderPlotArea();
                                  item.linevisible = !item.linevisible;
                              </handler> 
                        </legend>
                    </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@                                                       
   -->