Home Page Implementation

---

The home page (refer image above) of the "Personal Finance" application has the following tabs along with the "Home" tab,

Add New Income and Expense Forms:

On clicking the "Add New Income" link a dialog as given below would be shown to submit the income details. The dialog is implemented in Python

On submitting the details, the data gets stored into the IncomeDetails class object in Google Data store. Also the data gets added into Zoho Reports in the table IncomeDetails in the database Personal Finance using the Add Row API wrapped inside the Google AppEngine Client Library. The code snippet for this action is given below. (click here to download the full code)

    # construction of Zoho Reports connection URL
    rc = self.getReportClient(self.rc)
    uri = rc.getURI(Config.LOGINNAME,Config.DATABASENAME, Config.INCOMETABLENAME)
    entityInst = IncomeDetails()
  
    # container to store the column values for the new row
    columnValues = {}
    for col in IncomeDetails._selCols:
       columnValues[col]= self.request.get(col).strip()
       setattr(entityInst,col, \
		ExpenseDetails.strToPropTypeConvFunc(col, columnValues[col]))

   # write the new row to google data store
   entityInst.put()
   # write the new row to Zoho DB
   rc.addRow(uri,columnValues)

On submitting the details, the data gets stored into the ExpenseDetails class object in Google Data store. Also the data gets added into Zoho Reports in the table ExpenseDetails using the Add Row API wrapped inside the Google AppEngine Client Library. (click here to download the full code)

Dashboard in the Home Screen:

The home page dashboard embeds 4 charts generated in Zoho Reports:

1. Income trend for the last 12 months
2. Expense trend for the last 12 months
3. Income split up for the last 3 months (Interactive chart)
4. Expense Split up for the last 3 months (Interactive Chart)

These charts are generated as Chart Views(?) using the data in IncomeDetails and ExpenseDetails tables in Zoho Reports. The charts created are embedded into this home page using the Embed option (invoke "Publish-> Embed in Website/Blogs" menu item) in Zoho Reports.

Income and Expense Trend charts are similar in the manner they are built:

• "Date" of transaction (ie., date of money earned or spent) on the X-Axis
• Actual "Amount" involved in Y-Axis.
• Data is plotted for the last 12 months. This is achieved by applying the "Last 12 months" filter.
• The chart type is Line chart.

The other 2 charts are about the Income and Expense split up for the last 3 months:

• "Category" of Income/Expense in the X-Axis
• "Amount" earned/spent on Y-Axis with filter of "Last 3 months" applied.

Next:  Reports tab - Creating & Embedding reports from Zoho Reports