Name

columnchart — The columnchart component allows for the creation of a column chart using series data.

Synopsis

LZX: columnchart
JavaScript: columnchart
Type: Class
Access: public
Topic: Charting And Graphing.Chart Types
Declared in: lps/components/charts/columnchart/columnchart.lzx

Description

The following is a columnchart that uses series data.

Example 58. Simple columnchart

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

                        <dataset name="baseball"
                            src="../data/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">
                              <method event="onitemmouseclick" args="item">
                                  var topseries = this.chart.getDataSeries();

                                  topseries.getDataSeries(item.identifier).enabled = item.linevisible;
                                  this.chart.renderPlotArea();
                                  item.linevisible = !item.linevisible;
                              </method> 
                        </legend>
                    </canvas>
                

A chart class that renders vertical bars. Inherits from the chart class. (Warning: Of beta quality.)

Superclass Chain

node (LzNode) » view (LzView) » basecomponent » chart » rectangularchart » columnchart

Known Subclasses

Details

Methods (1)

changeBound()
<method name="changeBound" args="newminx, newminy, newmaxx, newmaxy, animated, undoable" />
public function changeBound(newminx : Number, newminy : Number, newmaxx : Number, newmaxy : Number, animated : Number, undoable : Number);
change the virtual boundary of the bar chart

LZX Synopsis

<class name="columnchart" extends=" rectangularchart ">
  <method name=" changeBound " args="newminx, newminy, newmaxx, newmaxy, animated, undoable" />
</class>

JavaScript Synopsis

public columnchart extends  rectangularchart  {
  prototype public function changeBound (newminx : Number, newminy : Number, newmaxx : Number, newmaxy : Number, animated : Number, undoable : Number);
}