<barchart>
The barchart component allows for the creation of a bar chart using series data.

JavaScript: lz.barchart
[Warning] Warning
This component is of Beta quality and is subject to change.

The following is a barchart that uses series data.

Example 57. 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>
edit

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

Methods

changeBound()
barchart.changeBound(newminx : Number, newminy : Number, newmaxx : Number, newmaxy : Number, animated : Number, undoable : Number);
change the virtual boundary of the bar chart
Parameter Name Type Description
newminx Number the new min x of the boundary
newminy Number the new min y of the boundary
newmaxx Number the new max x of the boundary
newmaxy Number the new max y of the boundary
animated Number the animation duration in milliseconds. 0 for no animation
undoable Number deterimine if the action can be undo

Methods inherited from lz.Eventable

destroy, setAttribute

Events

Events inherited from <node>

onconstruct, ondata, oninit

Events inherited from lz.Eventable

ondestroy