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

        
        <!--- @keyword private -->
        <method name="renderPlotArea">
        
            super.renderPlotArea();

            plotarea.clear();
            plotarea.setDataBound(haxis.minimumRender, vaxis.minimumRender,  haxis.maximumRender + 1, vaxis.maximumRender);
            var topseries = this.getDataSeries();
            
            var numSeries = topseries.getNumDataSeries();
            plotarea.numseries = numSeries;
            var barwidth =  1 / (numSeries + 1);  
            this.style.resetDataStyleCycle();
            for(var i = 0; i < numSeries; i++)
            {
                var leafseries = topseries.getDataSeries(i); 
                if(leafseries.getDataColumn(haxis.columnName) != null){
                    var xseries = leafseries.getDataColumn(haxis.columnName).values;
                } else {
                    var xseries = null;
                }
                if(leafseries.getDataColumn(vaxis.columnName) != null){
                    var yseries = leafseries.getDataColumn(vaxis.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; 
                }
                
                labeldpath = (leafseries.getDataColumn(vaxis.columnName).labeldatapath == '' ?
                    leafseries.getDataColumn(haxis.columnName).labeldatapath : leafseries.getDataColumn(vaxis.columnName).labeldatapath);
                if ( this.datalabelEnabled && labeldpath != ''){
                    if(leafseries.getDataColumn(this.datalabelColumn) != ''){
                        labelseries = leafseries.getDataColumn(vaxis.columnName).getDataPath().xpathQuery(labeldpath);
                    }
                }
                
                if (leafseries.enabled ) {
                    plotarea.renderSeries(xseries, yseries, tooltipseries, labelseries, ldatastyle, barwidth / 2 + barwidth * i, barwidth, i, haxis.type);
                    this.datatooltip.style = ldatastyle;
                }
            }
        
        </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">           
            actionhelper.changeBound(newminx, newminy, newmaxx - 1, newmaxy,  animated, undoable);
        </method>
        
        
        
        <columnchartplotarea name="plotarea" x="50" y="20" width="500" height="300" clip="true"/>
        <!-- view name="plotareabackground" x="${parent.plotarea.x}" y="${parent.plotarea.y}" width="${parent.plotarea.width}" height="${parent.plotarea.height}" bgcolor="0xffeeff" /-->

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

                <example title="Simple columnchart">
                    <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">
                                Column Chart.</text>      
                         </view>

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

                            <dataseries datapath="baseball:/records" >
                                <datacolumn name="x"  columndatapath="record/@year"
                                    datatype="number"/>
                                <datacolumn name="label" columndatapath="record/@year"/>
                                <dataseries label="wins">                
                                    <datacolumn  name="y" 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> 

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

                            <horizontalaxis name="haxis" title="Years" type="categorical" columnName="x"
                                minimum="1" maximum="5"  titleLocation="low" axisEnabled="false">
                            </horizontalaxis>

                            <verticalaxis name="vaxis" title="Values" type="linear"  columnName="y" 
                                minimum="60" maximum="120" titleLocation="low">
                            </verticalaxis>        

                        </columnchart>

                        <legend name="legendbox" legendFontsize="14" legendborder="true"
                            chart="${chart1}" x="${chart1.x + chart1.width}" y="${(chart1.y +
                            chart1.height)/2}" options="ignorelayout" fillColor="0x339933"
                            borderWidth="3">
                              <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@                                                       
   -->