Gaia Ajax: Resizable Chart Example

Here we have created an Ajax Bar Chart by combining some Gaia Panels together with some Ajax Aspects. Try to drag either the interest or the loan terms left or right and watch as the Yearly Balance Chart updates. The Ajax Chart here is created purely with HTML elements like Ajax Panels and Ajax Labels. Then what binds it together to make them resizable are the AspectResizable. One of the real "gems" in Gaia are the Aspects which can be combined together with other widgets and together expand on the functionality of existing Ajax Controls. Try to drag the green bars (Annual Interest and Loan Terms) to the right and watch as everything updates live.

Loan Calculator

Loan Amount?
Annual Interest Rate (%)
10%
Use mouse to resize

Loan Term (months)
120
Use mouse to resize
Total Payment 158581
Monthly Payment 1322

Yearly Balance Chart

 
 
 
 
 
 
 
 
 
 


Features

  • Flexible - Build Ajax Bar Charts exactly as you wish
  • XHTML - Of course
  • Great User Experience - Users may experiment with values in a very visual interface
  • Ultra flexible - Combine with any other Ajax Widgets including our Ajax Dynamic Image
  • Richness - More than 10 different aspects are available. Everything from Draggable, Droppable, Key-listeners, Hover aspects etc

   1:   
   2:      <h3>Loan Calculator</h3>
   3:      Loan Amount?
   4:      <br />
   5:      <gaia:TextBox 
   6:          ID="LoanAmount"
   7:          runat="server"
   8:          Text="100000"                        
   9:          Width="150"
  10:          AutoPostBack="true"
  11:          OnTextChanged="amount_Changed"
  12:          KeyChangeEventsInterval="200"
  13:          KeyChangeEvents="true" />
  14:   
  15:      <div>
  16:          Annual Interest Rate (%)
  17:          <gaia:Panel 
  18:              ID="AnnualInterestRateBox"
  19:              style="width:50px;border:solid 1px Black;background-color:#5e5;"
  20:              runat="server">
  21:              <gaia:Label 
  22:                  runat="server" 
  23:                  ID="AnnualInterestRate" 
  24:                  Text="10%" />
  25:          </gaia:Panel>
  26:          <small>Use mouse to resize</small>
  27:      </div>
  28:      <br />
  29:   
  30:      <div>
  31:          Loan Term (months)
  32:          <gaia:Panel 
  33:              ID="LoanTermBox"
  34:              style="width:50px;border:solid 1px Black;background-color:#5e5;"
  35:              runat="server">
  36:              <gaia:Label runat="server" ID="LoanTerm" Text="120" />
  37:          </gaia:Panel>
  38:          <small>Use mouse to resize</small>
  39:      </div>
  40:   
  41:      <table style="font-size: 1.2em;">
  42:          <tr>
  43:              <td>Total Payment</td>
  44:              <td>
  45:                  <strong>
  46:                      <gaia:Label ID="TotalPayment" runat="server" />
  47:                  </strong>
  48:              </td>
  49:          </tr>
  50:          <tr>
  51:              <td>Monthly Payment</td>
  52:              <td>
  53:                  <strong>
  54:                      <gaia:Label ID="MonthlyPayment" runat="server" />
  55:                  </strong>
  56:              </td>
  57:          </tr>
  58:      </table>         
  59:        
  60:      <h3>Yearly Balance Chart</h3>
  61:      <gaia:Panel ID="ChartPanel" runat="server" />
  62:      <br style="clear:both;" />
  63:      <hr />
  64:      <div class="features">
  65:          <h2>Features</h2>
  66:          <ul>
  67:              <li><strong>Flexible</strong> - Build Ajax Bar Charts exactly as you wish</li>
  68:              <li><strong>XHTML</strong> - Of course</li>
  69:              <li><strong>Great User Experience</strong> - Users may experiment with values in a very visual interface</li>
  70:              <li><strong>Ultra flexible</strong> - Combine with any other Ajax Widgets including <a href="../../../BasicControls/DynamicImage/Overview/Default.aspx">our Ajax Dynamic Image</a></li>
  71:              <li><strong>Richness</strong> - More than 10 different aspects are available. Everything from Draggable, Droppable, Key-listeners, Hover aspects etc</li>
  72:          </ul>
  73:      </div>
  74:   
  75:   
4.0.224.1