<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:ipe="qs.ipeControls.*" layout="absolute" viewSourceURL="srcview/index.html">
  <mx:Style source="css/editablecharts.css"/>
  <mx:Script><![CDATA[
     import mx.collections.ArrayCollection;
     
     [Bindable]
     public var expenses:ArrayCollection = new ArrayCollection([
        {Month:"Jan", Profit:2000, Expenses:1500},
        {Month:"Feb", Profit:1000, Expenses:200},
        {Month:"Mar", Profit:1500, Expenses:500}
     ]);
  ]]></mx:Script>
  <mx:VBox x="0" y="0" width="100%" height="100%" >
    <mx:VBox verticalAlign="top" horizontalAlign="center" width="100%">
      <ipe:IPETextInput text="Chart Title Edit Me" editOnClick="true" 
        commitOnEnter="true" commitOnBlur="true" styleName="editableChartTitle"/>    
    </mx:VBox>
    <mx:ColumnChart id="myChart" dataProvider="{expenses}" showDataTips="true" width="100%" height="100%">
      <mx:horizontalAxis>
        <mx:CategoryAxis id="cat" dataProvider="{expenses}" categoryField="Month" title="Click To Edit Me"/>
      </mx:horizontalAxis>
      <mx:verticalAxis>
        <mx:LinearAxis id="lin" title="Click To Edit Me"/>
      </mx:verticalAxis>
      <mx:horizontalAxisRenderers>
        <mx:AxisRenderer axis="{cat}" titleRenderer="editablecharts.EditableTitleRenderer"/>
      </mx:horizontalAxisRenderers>
      <mx:verticalAxisRenderers>
        <mx:AxisRenderer axis="{lin}" titleRenderer="editablecharts.EditableTitleRenderer"/>
      </mx:verticalAxisRenderers>
      <mx:series>
        <mx:ColumnSeries xField="Month" yField="Profit" displayName="Profit"/>
        <mx:ColumnSeries xField="Month" yField="Expenses" displayName="Expenses"/>
        </mx:series>
     </mx:ColumnChart>
     <mx:Legend dataProvider="{myChart}"/>
  </mx:VBox>
</mx:Application>