Be Lazy, Make Computers to DO more :)

Saturday, July 25, 2015

Modern Charting tools for Desktop Applications

Hello Readers,

Time fly so fast. Its became months since I update my blog. Busy timings @work and the real reason is that I became so lazy to write. But that did not stop me exploring things. Here is my thought about the computer "charts" for dekstop applications.

Charts - A graphical representaion of the data (numbers mostly). We all love to see charts because human mind can easily grasp the picture than words or numbers. The right chart that displays the data will greatly assist human brain and help us to think more to make sense out of it.

Think of an example of weather forecast. If we have years and years of the data which is plotted nicely, we could predict the future, It might save human life !!

Example: weather data chart. Thanks to http://www.tgomagazine.co.uk

On the other side, Poor selection of charts / less flexibility of viewing data in various timelines (Ex: zoom into timelines) will not do any better job than just showing the huge data.

Its a developer / UI designers reposibility to choose right chart with maximum flexibility.

Charting Libraries: Fortunatly for a desktop / web applicaion developers, There is no need to write a graphics code for plotting charts. There are tons of charting tools avilable both for desktop applications / web applications.

I used JFreeChart, GD::Graph, SWF::Chart etc ... (I don't remember which charting lib I have used in VB6).

All of these charting libaries are awesome and served their purpose at that point of view but we need to evolve.

I find few drawbacks in the traditional charting libraries,

Developer need to write a code (Though minimal) to create, customize (colors, look and feel etc...) and plot the graph. This means that developer need to touch the code to update the Chart style.

Usually traditional charting libraries wont provide any IDE / Char designer to visualize how your real data look in the particular chart. You really need to write code first (or see demo applications and visualize your data in your mind)

Traditional charting libraries render the data into some kind of image format internally (Ex: PNG, GIF, SVG etc..) and shows that image in the image viewer widget. This is not an efficient process if your data changes so quickly or User wants to zoom into the timeliness or for interactive charts. Keep rendering new image is a heay process for the GPUs (Though the modern GPUs are fast enough).

Suddenly if you want to provide you application as a web application. At least there is an extra work to replace traditional charts to web ready.

How do we deal with this problem?

I always envy the JavaScript charting libraries.

Java script charting libaries are awesome looking

They are so interactive

They are not crated as a image and displayed, instead, The data is fed into Java script low level graphics functions and its drawn in browser canvas widget directly. So the zoom in, Zoom out are so fast

Java Script runs in the browser platform, Browsers are optimized to run the Java Script and Browsers are also optimized to use the GPUs

Most of the JavaScript libs provide an online WYSWYG editor to quickly visualize the real data with real charts.

Modern browser's memory foot print is optimized.

Most of the GUI frameworks support embedding a Browser inside the GUI applications.

Did you get the answer?. Yes the idea is to embedded the Browser widget into desktop GUI application and leave the Charting work to Javascript. !!

I hear that. You need to see the code believe it. Here is my GTK2 based dektop application to demonstrate Java Script charting technique.

#!/usr/bin/perl
use strict;
use warnings;
use Gtk2 -init;
use Gtk2::WebKit;
use Glib qw(TRUE FALSE);
use Math::Random::MT::Auto qw(binomial);
use Data::Dumper;
use FindBin qw($RealBin);

#Globals
$| = 1;
my $webHTML = "";

#Create Binomial distribution gui
my $win = Gtk2::Window->new;
$win->set_default_size( 800, 600 );
$win->signal_connect( destroy => sub { Gtk2->main_quit } );
my $vbox = Gtk2::VBox->new( FALSE, 2 );
$vbox->set_border_width(2);
$win->add($vbox);
my $toolbar = Gtk2::Toolbar->new;
$toolbar->set_icon_size('large-toolbar');
$toolbar->set_show_arrow(FALSE);
$toolbar->set_orientation('GTK_ORIENTATION_HORIZONTAL');
my $button = Gtk2::ToolButton->new_from_stock('gtk-refresh');
$button->signal_connect( "clicked" => \&refreshBinomialDataandLoad, undef );
$toolbar->insert( $button,-1 );
$toolbar->insert( Gtk2::SeparatorToolItem->new, -1 );
$vbox->pack_start( $toolbar, FALSE, FALSE, 0 );

#Create Gtk WebKit browser widget and add to GUI
my $sw = Gtk2::ScrolledWindow->new();
$sw->set_policy( 'automatic', 'automatic' );
$sw->set_size_request( 600, 600 );    # hack to set initial empty browser size


my $webkitView = Gtk2::WebKit::WebView->new();
print "\n Gtk2 WebKit Version: ", Gtk2::WebKit->major_version(), ".",  Gtk2::WebKit->minor_version(), ".", Gtk2::WebKit->micro_version();
$webkitView->get_settings()->set_property( 'enable-file-access-from-file-uris', TRUE );
$sw->add($webkitView);
$vbox->pack_start( $sw, 1, 1, 0 );
$win->show_all;
Gtk2->main;

#Start GTK Main loop. Nothing after this
#Subs
sub genBinomialChartData
{
 my $probabilityP = 0.5;
 my $trialsN      = 100;
 my $count        = 10000;
 my %binomial;

 # Get random numbers and put them in bins
 $webHTML = ' Generating ' . $count . ' Random Numbers. Please wait...';
 loadAndShowHTML();
 for ( 1 .. $count )
 {
  my $exprimentResult = binomial( $probabilityP, $trialsN );
  $binomial{$exprimentResult}++
    ;    #Store the expriment results as a keys in hash
 }

 #Load chart html
 $webHTML = startHTMLChart( $probabilityP, $trialsN, $count );
 foreach my $exprimentResult ( sort keys(%binomial) )
 {
  my $exprimentResultProbability =
    ( $binomial{$exprimentResult} / $count );
  print "\n Probability for $exprimentResult = ",
    $exprimentResultProbability, " (", $binomial{$exprimentResult}, '/',
    $count, ')';

  #Add chart data
  $webHTML .=
    insertHTMLChartData( $exprimentResult, $exprimentResultProbability );
 }
 print "\n";

 #Add chart footer
 $webHTML .= finishHTMLChart();
 print "\n HTML \n\n", $webHTML, "\n\nHTML";
}

sub insertHTMLChartData
{
 my $value       = shift @_;
 my $probability = shift @_;
 return '{
                            "Value": "' . $value . '",
                            "Probability": "' . $probability . '"
                        },';
}

sub finishHTMLChart
{
 return ']
                }
            );
        </script>
    </head>
    <body>
        <div id="chartdiv" style="width: 100%; height: 400px; background-color: #FFFFFF;" ></div>
    </body>
</html>';
}

sub startHTMLChart
{
 my $p = shift @_;
 my $t = shift @_;
 my $c = shift @_;
 return '<!DOCTYPE html>
<html>
    <head>
        <title>chart created with amCharts | amCharts</title>
        <meta name="description" content="chart created using amCharts live editor" />

        <!-- amCharts javascript sources -->
        <script src="file://' . $RealBin
   . '/amcharts/amcharts.js" type="text/javascript"></script>
        <script src="file://' . $RealBin
   . '/amcharts/serial.js" type="text/javascript"></script>

        <!-- amCharts javascript code -->
        <script type="text/javascript">
            AmCharts.makeChart("chartdiv",
                {
                    "type": "serial",
                    "path": "https://www.amcharts.com/lib/3/",
                    "categoryField": "Value",
                    "mouseWheelZoomEnabled": true,
                    "startDuration": 1,
                    "handDrawn": true,
                    "categoryAxis": {
                        "gridPosition": "start"
                    },
                    "trendLines": [],
                    "graphs": [
                        {
                            "balloonText": " Value=[[category]],  Probability=[[value]]",
                            "bullet": "round",
                            "bulletBorderThickness": 5,
                            "bulletSize": 10,
                            "gapPeriod": 0,
                            "id": "AmGraph-1",
                            "labelOffset": 2,
                            "title": "Observed",
                            "type": "smoothedLine",
                            "valueField": "Probability"
                        }
                    ],
                    "guides": [],
                    "valueAxes": [
                        {
                            "id": "ValueAxis-1",
                            "title": "Probability"
                        }
                    ],
                    "allLabels": [],
                    "balloon": {},
                    "legend": {
                        "labelText": "Observed ",
                        "useGraphSettings": true,
                        "valueWidth": 20
                    },
                                    "titles": [
                        {
                            "id": "Title-1",
                            "size": 15,
                            "text": "Binomial Probability Distribution \n              (p='
   . $p . ', n='
   . $t
   . ', count='
   . $c . ')"
                        }
                    ],
                    "dataProvider": [
                    ';
}

sub loadAndShowHTML
{
 $webkitView->load_string( $webHTML, 'text/html', 'UTF-8', 'file://' );
}

sub refreshBinomialDataandLoad
{
 my $htmlString;
 genBinomialChartData();

 #Load HTML Now
 loadAndShowHTML();
 return TRUE;
}

Note: This code is not optimized. I create a full html string every time and then load into Gtk2::WebKit browser widget. The more elegant way would be writing the changed data into a PIPE / Other IPC mechanism, From Javascript read from the PIPE. Hey, didn't I tell you already, Its only for demo .... Having said that, This code runs very very fast. I see the charts are alive within no time.

What am I doing?

1. I created a binomial distribution data for the purpose of charting. Mostly inspired from http://maths.uncommons.org/

2. I used perl language and GTK2 GUI framework. I use Perl + Gtk2 a lot @work for creating cross platform GUI applications. I really like the Gtk's Glade GUI designer. It gratly simplifies the effort of GUI design.

3. I choose WebKit as my browser of choice. Webkit is running in iPhone!!. I used Gtk2::WebKit perl binding of the WebKit

4. I AMCharts JavaScript awesome library. They do provide online chart creator tool. My most of the HTML and Java Script code is just copy paste from their online chart designer's output.

Note: AMCharts allows to use their charting library for free for personal usage and you need to use their javascript libs from their site. For commercial usage there is a license option. This blog post's idea is to illustae the concept, You can choose other free javascript charting library.

5. In the code, I load all the widgets, Bring up the GUI and calculate the Binomial probability distribution.

6. Once the data is avilable, I feed the data to the AMCharts via Java Script, JSON kind of data format.

7. Finally the whole HTML string (including Java script code) goes to browser widget, It renders the chart in micro seconds.

8. Any zoom in / Zoom out or Interactive popups are taken care by browser widget and my main application loop is free to do other jobs.

Here are the screenshots of the above code,

Sample Binomial Distribution

Interactive Chart, Shows the point details when cursor move on data point

Zoom in. So fast zoom in and Zoom out

Conclusion

In the early days of computer science, The thought process was to keep the whole system to limit to one programming language and limited libraries and toolkits.

In the modern object oriented thinking, Use the best toolkit or language which serves the purpose.

Javascripts and browsers are highly optimised for the chart works and very simple to use.

I think, Modern computer chartings to be best done by the Javascript + Browser.

P.S: Thanks to Shakthi, for patiently explaining the probability distribution mathematical concepts to me.

Saturday, July 18, 2015

Income Tax India - EFile IT Returns for Salaried Employees

Income tax returns filling is an important activity for Income Tax payers in India. The Indian government is trying to simplify the process but still it might be confusion to people. So I have created this blog post to help with Income Tax Self E-Filing.'

Note: The steps mentioned in this blog post are applicable only for "Salaried Employees".

Note: From the Assessment year 2015-2016, you can E-Verify your income tax return. So don’t need to send the printout copy to Income Tax India, CPC office in Bangalore via Postal. One more step to simplify the process :). Keep your AADHHAR number ready.

Last date to file your Income Tax Returns for 2016 - 2017 is July 31 2017 (Usually gets extended to August 31) but do not wait for the last date, Income tax India website might be loaded with high usage.

Let’s Start...

Preparation

1. Use IE / Chrome browser

2. If you have AADHAR Card, keep it ready

3. Set aside 1 – 1.30 hr. without any disturbance

4. Get Form 16 from your Employer’s web site,

2014 onwards Form 16 has two parts.

i. PART A => Employer TDS details

ii. PART B => Usual Form 16.

5. Form 16 is a digitally signed PDF, In your PDF viewer, Make sure you trust the Signer’s digital signature and get green tick mark.

a. Open the PDF in Adobe Reader

b. If you see Green Tick in all signatures, You are done. Else follow instructions below,

c. Open the “Signature Panel” (right top corner in the adobe reader)

d. Show Signer’s certificate -> Trust ->Add to trusted certificates-> tick all the options

e. In Signature properties dialog box -> “Validate Signature” -> Close

f. You should see your HR’s digital signature is validated and Green Tick mark

g. DO NOT proceed without validating Signature, It could be a wrong Form 16.

6. You need a reliable internet connection during E-File process because it’s an online procedure

7. If you do not understand any field in Form 16, ask me / google

8. If you do not have account in https://incometaxindiaefiling.gov.in , Sign up and create an account.

9. Optional: Download Form 26AS from https://incometaxindiaefiling.gov.in -> Login -> My Account -> View Form26 AS. Form 26AS will help you know who are the entities TDS for you and submitted to IT department

E-File Income Tax in India Procedure

1. Login https://incometaxindiaefiling.gov.in

a. Note: At the time of the login, income tax India web site asks for AADHAR number registration, If you have AADHAR Number, Register it with income tax India, So you can “e-verify” the return. If you don’t have AADHAR, Press “LATER” button to continue.

2. After Login, Top menu, click "e-File" -> "Income Tax Return"

3. On the "Income Tax Return" page

a. Check your PAN number

b. ITR Form Name = ITR1 (for Salaried)

c. Assessment Year = 2020-21 (Or what is mentioned in the Form 16 under "Assessment Year" column)

d. Prefill Address => From Previous Return Filed (or appropriate)

f. Filling Type -> Original /revised Return

g. Submission Mode -> Prepare and Submit Online

4. You will see instructions page, Press right Green arrow…

5. Personal Information page

a. Check Name , PAN, Address, Mobile No, and other details

b. “Employer Category” => Others

c. "Return Filed .." => 11 - On or Before...

d. "Residential Status" => RES-Resident

e. "Whether Original or Revised Return?" => Original

f. “Are you governed by Portuguese Civil...” => "NO"

g. Add your AADHAR details

               h. Nature of Employment -> other

               i. Field "A20" -> Filed u/s -> 139(1)-On or before due date

               j. Are you filing return of income under Seventh proviso to section 139(1) but otherwise not required to furnish return of income? -> NO

k. Press “Save Draft” and Press Green right arrow

6. Income Details page

a. Income from Salary (B1) => Enter Salary amount after House Rent, Medical etc...

fill the details by looking in Form 16 Part B

b. Enter Housing property details (If you have get rent / If you pay house loan)

Type Of house Property - "Self Occupied"
Income from One House Property - Usually negative number from
"Form 16"
7.Add: Any other income reported by the employee

Loss From House Property -<xxxx>

c. Make sure B4 is correct, Add all the Form 16 “9.Deductions under Chapter VIA” details in B4.

Note: If you have multiple 80C categories in the Form 16, Add all the amount and Enter the total.

e. Make sure C2 (Taxable Total Income) is matching with Form 16's Total income (11)

7. Check 'Part D - Tax Payable on Total Income(C2) ' data is correct with Form 16 data from field "12.Tax on total income" on wards

8. Don't worry about the D9, D10 and D11 , Its not for Salaried folks. It will not be taken for calculations.

9. Check D12. “Total Tax and Interest”, It should match with Form 16’s “17.Tax Payable(15-16)”

a. Don’t worry is your employer paid few rupees extra tax, It might have happen during rounding process at the time of tax payment (4 times in a year, So high chance that your employer paid 4Rs extra tax!!).

10. Save Draft -> Click “Right Green Arrow”

11. Tax Details Page

a. Enter / Check the details as per the Form 16 PART A (Totals)

b. Add / Delete additional tax deducted by Banks / Any other source of income other than your employer

b. Press “Save Draft” -> Green right button

12. Tax Paid & Verification details page

a. Check D11 match with Form 16's “17.Tax Payable(15-16)”. If excess tax paid , "D13. Refund" field will show the excess amount

b. Enter Bank account details - Its mandatory

Note: Add one bank account details, preferably salary bank account details in “a) Bank Account in which …”

Total Number of saving and current bank account … = 1 (or more if you want to disclose other bank accounts that you may have)

c. Capacity as "Self", Enter Place

d. I would like to e-Verify... (First option , if you are going to use AADHAR based verification. This is simple and recommended)

d. Press Green right button

Note: In this page, you can also check for any tax refund details.

13. Enter details of 80G, if you have any donation

14. Save the Draft

15. Check every page and details again

16. Press "Submit"

17. Press "OK”, “E-Verify Returns Page appears”

18. If you have AADHAR card with Mobile Account linked Select “Option 3”

19. OTP will be send to your AADHAR registered Mobile Number, Enter the OTP PIN number and Submit

a. Note: The OTP is valid only for 10 Mins

20. Your “IT-Returns” is successfully E verified. You can download the Acknowledgement now.

a. Click top menu "Dashboard"
b. Click "View Returns / Forms"
c. Click last filed year "Ack.No" , Status shoule be "Successfully e-Verified"
d. Click "ITR-V / Acknowledgement"

In the Top Right side Find "Logout" (Yellow Color) and click to quit

21. Open the Acknowledgement PDF and check the details (Store the PDF in local machine for future reference)

a. Note: Password is (all small letters)< YOUR_PAN_NUMBER> <Your_Date_Of_Birth_In_the_format_of_DDMMYYYY>

22. You are DONE. Your ITR is E Verified, So No need to take printout and send for CPC. Wait for mail from IT department with processed ITR details attached as a PDF. Usually, you will be receiving SMS from Indian IT department after they have processed the ITR. You will also receive an Email.

If you don’t have AADHAR Number

1. Select appropriate option in Step #18 above

2. If you need to send ITR Acknowledgment to CPC, Here is the tips

a. Take print out in an A4 Sheet Laser printer

b. Check the details and Sign It

Leave the “in my capacity as ______________" field blank in the ITR-V declaration.

c. Send to following address within 120 days via Indian government postal service only,

Income Tax Department - CPC,

Post Box No - 1, Electronic City Post Office,

Bangalore - 560100, Karnataka

Done :)

Be Lazy, Make Computers to DO more :)

Search Here

Saturday, July 25, 2015

Modern Charting tools for Desktop Applications

Saturday, July 18, 2015

Income Tax India - EFile IT Returns for Salaried Employees

testad