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

                        <dataset name="baseball"
                            src="../data/redsox-data.xml"/> 
                        <font name="myverity" src="verity/verityplus11.ttf"/>    


                        <button>undo
                            <handler name="onclick">
                                chart1.undo(500);
                            </handler>
                        </button>
                        <button x="100"> show all points
                            <handler name="onclick">
                                chart1.changeBound(chart1.defaultminx, chart1.defaultminy, 
                                     chart1.defaultmaxx,chart1.defaultmaxy, 1000, true);
                            </handler>
                        </button>
                        <view name="title" x="${chart1.width/2}" y="30" >
                            <text font="serif" fontsize="15" fontstyle="bold" fgcolor="0x0000FF">
                              Line Chart with Zoom Interaction
                            </text>
                        </view>
                            <!-- LEGEND ASSOCIATED WITH THE CHART -->
                            <legend name="legendbox" 
                                    chart="${chart1}"
                                    legendFont="serif"
                                    legendFontsize="14" 
                                    legendborder="false"
                                    x="600"
                                    y="350"
                                    direction="vertical">
                              <handler name="onitemmouseclick" args="item">
                                  var topseries = this.getChartInstance().getDataSeries();

                                  topseries.getDataSeries(item.identifier).enabled = item.linevisible;
                                  this.getChartInstance().renderPlotArea();
                                  item.linevisible = !item.linevisible;
                              </handler> 
                            </legend>

                        <linechart id="chart1" y="60" width="600" height="500" style="chartstyle01" 
                            datatipColumn="datatip" dataPointsEnabled="true" datatipEnabled="true"
                            verticalGridLines="true" horizontalGridLines="false"
                            datalabelEnabled="true" datalabelColumn="datalabels"
                            valueregionsenabled="true">


                            <dataseries datapath="baseball:/records">
                                <datacolumn name="x" columndatapath="record/@year" datatype="number"/>
                                <dataseries label="wins">
                                    <datacolumn  name="y"   columndatapath="record/@wins"
                                        datatype="number"/>
                                    <datacolumn name="datatip" columndatapath="record">
                                        <method name="processData" args="d">
                                            return "( " + d.attributes.year + ", " + d.attributes.wins +")";
                                        </method>
                                    </datacolumn>
                                </dataseries>
                                <dataseries label="losses">
                                    <datacolumn name="y" columndatapath="record/@losses"
                                        datatype="number"/>
                                    <datacolumn name="datatip" columndatapath="record">
                                        <method name="processData" args="d">
                                            return "( " + d.attributes.year + ", " + d.attributes.losses +
                                                ")";
                                        </method>
                                    </datacolumn>
                                </dataseries>
                                <datacolumn name="datalabels" columndatapath="record/@attendance"/>
                            </dataseries>

                            <horizontalaxis name="haxis" title="X Axis" interval="10" type="linear"
                                columnName="x" titleLocation="high"  majorTickEnabled="true"
                                minorTickEnabled="true"/>
                            <verticalaxis name="vaxis" title="Y Axis title" type="linear" columnName="y" 
                                titleLocation="low" minorTickEnabled="false" />

                            <valuepoints label="(1925,95)" tip="Year: 1925 - Games: 95" datax="1920"
                                datay="95" />
                            <valuepoints label="(1950,78)" tip="Year:1950 - Games: 78" datax="1950"
                                datay="78" />
                            <valuepoints label="(1975,63)" tip="Year:1975 - Games: 63" datax="1975"
                                datay="63" />
                            <valuepoints label="(2000,50)" tip="Year:2000 - Games: 50" datax="2000"
                                datay="50" />

                            <valueregion data1="95" data2="110" 
                                    axis="y" 
                                    label="Win/Losses Games: 95 to 110"
                                    tip="Horizontal Value Region"/>

                            <zoomarea duration="2000" enabled="true"/> 
                        </linechart>
                     </canvas>