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

                        <dataset name="baseball" src="resources/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>

Flash

HTML5