Tuesday, October 2, 2012

Tracking mouse position on your vertical, annotatable, jqPlot line chart

In my last post i showed you how to create a dynamically updating line chart using jqPlot library and how make the chart flip its orientation. This time i wanted to track the mouse position on the chart so i can put some annotations to the chart. It was possible to display annotations on the chart using the pointLabels plugin and some CSS tricks as the previous one. All i had to do was to add the annotations to the data array and make the pointLabels plugin display the content in the 3rd index of the data array as the point label.

   1: pointLabels: { 
   2:     show: true,
   3:     seriesLabelIndex: 2 
   4: }

This was working fine when the chart was in horizontal position. However when the chart was in vertical position the position of the mouse was not detected and as a result it was not possible to know which position in the chart should be annotated. I tried different methods, but was unable to find a solution. So i had to change the code in the library it self. I had to change the jquery.jqplot.js file, which is the core library file in order to achieve the result i expected. Here's what i did. First i had to insert the following code into the jqPlot class of the jquery.jqplot.js file.

   1: function jqPlot() {
   2:     //add the following code segment
   3:     var verticallyOriented = false;
   4:     this.setVertical = function(state){
   5:         verticallyOriented = state;
   6:     }
   7:     //don't change other code that isn't mentioned here
   9:     //now you have to change the logic in the getEventPosition function
  10:     //to make sure the new orientation is detected
  11:     function getEventPosition(ev) {
  12:         //change the line starting with var gridPos = ...
  13:         //to the following code segment
  14:         //depending on the orientation the event position calculating algorithm is changed
  15:         if(verticallyOriented){
  16:             var gridPos = {x:ev.pageY - go.top , y:plot.eventCanvas._elem.height() - ev.pageX + go.left};
  17:         } else {
  18:             var gridPos = {x:ev.pageX - go.left, y:ev.pageY - go.top};
  19:         }
  20:         //no change to other code is needed
  21:     }
  22: }


Then when the chart was flipped i could simply call the setVertical() method so the library detects that it has been flipped.

   1: $("#flipbutton").click(function() {
   2:     if ($('#chart1').hasClass('vertical')) {
   3:         $("#chart1").removeClass("vertical");
   4:         plot1.setVertical(false);
   5:     } else {
   6:         $("#chart1").addClass("vertical");
   7:         plot1.setVertical(true);
   8:     }
   9:     plot1.replot();
  10: });


You can find a working example of the above work here. You can click on a point on the chart to add an annotation to that point. (try it out in both orientations)



If you have any problems/questions regarding this, please let me know in the comments.

Thursday, August 30, 2012

Simple dynamically updating line chart generation using jqPlot

jqPlot is a nice plotting plugin for the jQuery javascript framework. While i was working i just had to create a simple example to see how the library works. So i created this dynamically updating chart which plots random data in 5s intervals. The orientation of the graph can also be flipped. This was achieved from a simple rotation of the div element containing the chart using CSS rules, and rotating the axis labels correspondingly.

This is just a small code, but there was no example to see how this feature works. If any of you need to see how to implement a dynamically updating, vertical/horizontal chart using jqPlot you can have a look at this.

View the next step of this tutorial: Tracking mouse position on your vertical, annotatable, jqPlot line chart

Saturday, April 28, 2012

Facebook offers free anti-virus software

Hi all, I am here to give you all a quick tip. Our beloved image sharing site, Facebook, has launched a service to provide Security suites, virus guards and internet security suites, for free. Actually the products have a 6 months trial period with full functionality. The whole purpose of this free give-away is to enforce the Facebook users against malware, viruses, worms and all those black stuff.

The steps are simple. Go to this page, https://www.facebook.com/security and select The AV market place.

Then you will get the page with details about the security suites provided by different vendors such as McAfee, Microsoft, etc.

Select the product you want to install to your computer and follow the instructions. You may have to like the Facebook page of the vendor in the process. But that's not much of a trouble when we consider the type of things we put a like on Facebook. ;)

After you download, install the product and enjoy 6 months of security from a fully activated product.

That's it for this quick tip. I'm out. Stay safe people, Internet is getting scary. =O

PS: If you like my blog don't forget to subscribe for more, just move your mouse to the right side of the screen and a pretty side bar will appear, select "Followers" and click follow. Cheers! =)

Sunday, April 8, 2012

Google Project Glass

"We believe technology should work for you — to be there when you need it and get out of your way when you don't." says Google in their latest awesome video, which tells a tale in the future, and hopefully it's the near future. The video is about a new project by Google, which is Google Project Glass. First watch this video, if you haven't looked at it already. It has been there for few days now.

I'm sure anyone who enjoys technology, at least when it's trying to ease our work, would appreciate the potential of this project. With the help of other Google's new projects such as Google Indoor maps and constantly improving broadband technologies such as 4G this will be a product that may not be that far from us. In fact according to this post by Engadget, it seems Google has already implemented few prototypes.

The product will have its ups and downs, nevertheless we have to admit that this is what the future holds for us. +1 at Google for speeding up things. It seems that Google has been involved in lots of innovations-slash-crazyideas lately.

Monday, March 26, 2012

Some help for your interview - My check-list

Recently, due to the upcoming internship/training period here at the University, everyone is going for interviews, including my self. So before going to my interview i made a check-list to prepare my self for the interview. I decided to give you guys my check-list and what i referred so it'll save you some time and will be of some help to you in the end.

First of all, this is the set of list that i thought i should have some understanding before going for an interview for a trainee software engineer.

You should also read this as well. This site covers lots of technical aspects.

Please note that you must not go through all the stuff here and it is not a must that you should know everything, there's always enough time to learn if you're open to the idea.

Above all here are some important tips i got from people who actually know these stuff.
  • "Not too early, not too late", be there at least and at most 15 mins early - Rushing up to the place with a body full of sweat won't help much when you try to concentrate on much important factors
  • have a positive attitude
  • always smile
  • be confident
  • Respect the interviewer
  • do NOT lie - if you don't know something, don't fool around, just say that you don't know it, because there's a very high probability that the interviewer has a good knowledge on that topic.
  • be practical
  • And last but not least, answer the phone calls from unknown numbers, at least till you get selected.

I am no expert in any of these stuff as i have only gone for one interview. But i'm sure these will help you to polish up yourself. And if you are confident in yourself you'll definitely get selected.

Hope this article is helpful to you all. Please leave a comment with suggestions/corrections on anything i have put here, so it'll help anyone else reading this. 

If you are extremely lucky you'll just get to sign the contract at the day of interview, and in some cases  you may be asked of the game you are playing these days throughout the interview.

So all the best for your interview. Most probably it would be tomorrow, that's why you are searching for some tips today. ;) So all the best again. And sleep early today.

PS: Thank you Lakmal ayya for the additional tip.

Monday, March 19, 2012

Roll back to text buttons in your Gmail

I think although most of us enjoy the new and more dynamic view of the gmail, the buttons on top which are viewed as icons are not so intuitive to many users.

But fear-not! Google has introduced the option to roll back to the good-old intuitive text buttons. Just go to the settings and scroll down until you find "Button labels" option. I think you will be able to figure out what to do next. ;)

After you save the changes, the new interface will look like this.

A small help from me. I'm out! Cheers!

Friday, February 10, 2012

Android How to | Display a gif image in an ImageView widget

Android1While I was working on my 3rd year programming project which happens to be an android application (I’ll tell more details to you guys about the project in later posts that are to follow), I wanted to display an image on the screen acquired from an external web service. The problem with the image was although the image was not-animated, it was in gif format. I tried various methods to get it displayed in the application, searched on those deep corners of the internet (yeah, I’m talking about those places Ninja) but couldn’t find a successful solution. After few hours of trying I succeeded. And it was a simple solution that worked. After a long pause between my blog posts, I thought of sharing this small tip with you guys.

Here’s what I first did. My web service uses REST protocol. I used HttpClient in Java and HttpGet commands to acquire the image. Then I passed the input stream of the HttpResponse to a BitmapFactory to decode the gif image into a bitmap. Then my method simply returned the Bitmap to the application UI. Here’s the code for that task.

   1: public Bitmap getBitmap(String url) {    //pass the complete URL of the web service query
   2:     Bitmap bmp = null;
   3:     try {
   4:         HttpClient client = new DefaultHttpClient();
   5:         URI imageURI = new URI(url);
   6:         HttpGet req = new HttpGet();
   7:         req.setURI(imageURI);
   8:         HttpResponse response = client.execute(req);
   9:         bmp = BitmapFactory.decodeStream(response.getEntity().getContent());    //BitmapFactory decodes the InputStream of the HttpResponse
  10:     } catch (URISyntaxException e) {        //catch those exceptions
  11:         Log.e("ERROR",e.getMessage());
  12:     } catch (ClientProtocolException e) {
  13:         Log.e("ERROR",e.getMessage());
  14:     } catch (IllegalStateException e) {
  15:         Log.e("ERROR",e.getMessage());
  16:     } catch (IOException e) {
  17:         Log.e("ERROR",e.getMessage());
  18:     }
  19:     return bmp;
  20: }

It might not be a good idea to catch those exceptions here as this involves some UI. But I caught them here. Do as you please, and keep to whatever the programming paradigm you are using.

After acquiring the Bitmap Image you can simply create a new android.widget.ImageView (make sure you include an ImageView in the layout as well) and pass the Bitmap to that image view. The activity will display the Image on the ImageView.

   1: public class ViewImageActivity extends Activity{
   2:     private ImageView imageView;
   4:     @Override
   5:     protected void onCreate(Bundle savedInstanceState) {
   6:         //other methods & tasks
   7:         imageView = (ImageView) findViewById(R.id.ivInputInterpret);    //retrieve the ImageView widget from the layout
   8:         imageView.setImageBitmap(getBitmap(fullURL));    //set the retrieved Bitmap as the Image
   9:     }
  11: }

If you have any issues or problems post them in comments. I’ll try to answer them as I can.

A small tip , if you’re looking for android development tutorials check these awesome tutorials. They’ve helped me a lot. I’m sure they’ll be of immense help to you all as well.
Trust me, those tutorials are pretty awesome!
So till I meet you guys soon again, adiรณs!