Google visualization API and Geomap

Most of us who use internet already know about Google Map and its API, some of us also know about visualization API as well. In short actually in the way how Google itself describe visualization API is “The Google Visualization API lets you access multiple sources of structured data that you can display, choosing from a large selection of visualizations. Google Visualization API enables you to expose your own data, stored on any data-store that is connected to the web, as a Visualization compliant datasource. Thus you can create reports and dashboards as well as analyze and display your data through the wealth of available visualization applications.
Google has more description and documentation on this API. Geomap is one of the functionality that is performed through using Google’s visualization API. Geomap is rendered on a embedded flash player in the browser. Geomap is a map of country, continent or region map where we can use colors for specific region. Values are displayed as a color scale, and you can specify optional hovertext for regions. I will be describing some of the functionality of geomap. what we can configure and modify and how to use it in our websites.

Loading:
Load package of google is “geomap”
so the code for loading is:

google.load('visualization', '1', {'packages': ['geomap']});

The geomap visualization class name is

'Google.visualization.GeoMap'

These codes are permanent and must have codes so you cannot modify that to call geomap and visualization API.
the last we have to include some file in order to load the google visualiztion API library and I am assuming that you already have your personal API key. We have include those file in the beginning of the HTML best if you add them in head section of html page.
required only for markers, and only when not specifying lat/long values

<script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABCDEFG"></script>

The main library including file

<script type="text/javascript" src="http://www.google.com/jsapi"></script>

Setting the onload the callback function by stating those scripts right after loading the geomap.

google.setOnLoadCallback(drawMap);

The main thing here is

drawMap

. This is our main function where we will declare the main functionality of Geomap. You can change the function name if you want.
Strating of main function
In the beginning of creating the function we need to declare the class name code will be

var data = new google.visualization.DataTable();

after that we can declare the rows and columns for drawing map and setting the value as well. We can have as many as rows we want. To declare the numbers of row we use this code

data.addRows(1);

We took data as a variable where we declare a new class and we declared we will have ‘1’ row inside the

addRows()

function.

Now we will declare two column. one is for adding the title of a small popup type box what will be shown after hovering the mouse on the markers in the map. To add the first column we can add this line

data.addColumns(‘string’,’city’)

Here we pass two parameters inside addColumns()one is declaration of data type what is string and another one is hovertext. The same will go for the other column where we will indicate number as the data type and value.
the whole part of adding rows and columns will look like this piece of code.

function drawMap() {
var data = new google.visualization.DataTable();
data.addRows(1);
data.addColumn('string', 'City');
data.addColumn('number', 'No');

Now we can use setValue() function to set up the value for columns. This code is one example of setting value in the columns where it will take three parameters whereas one is row index, column index and value respectively. We have to specify two setValue() function since we used two columns. That means for every column we have to set value.
We will use those portion of codes.

data.setValue(0, 0, ‘Welington’);
data.setValue(0, 1, 12);

Now we will be using ‘NZ’ as region option. We can modify the region by changing it as country code name e.g:IN->India, BD->Bangladesh etc. We will use markers as ‘dataMode’ and we can also cofigure the width and height of the map by changing the value of width and height in pixels. We can use colors also by modifying the colors options. We can use zoom level as well. The code will be look like until now :

var options = {};
options['region'] = 'NZ';
options['width'] = '400px';
options['height'] = '400px';
options['dataMode'] = 'markers';<p>&nbsp;</p>

var container = document.getElementById('map_canvas');
var geomap = new google.visualization.GeoMap(container);
geomap.draw(data, options);

Last three lines of this portion of code are the final lines where the first variable detect the id of div in html page whereas geomap declare the main class and last line is used to draw the map.

Something that you can’t do using geomap

  • You can’t drag the map
  • You cannot scroll

Advance documentation and live examples are here
Hope this post can help with your simple questions about geomap. Comments is highly appreciative.

Advertisements
Posted in Google API, Programming, Websites | Tagged , , , | 13 Comments

Debugging, Quick Development of CSS using Firebug

When I learned CSS it was extremely tough for me to adjust the exact CSS style for a web page to work with JavaScript and XHTML. Although I am not a designer, I am very much interested about CSS for its simple and easy coding style as well as main design language for a web page. I remember the days when I didn’t know how to modify or examine the CSS codes on the fly. Every time i got bug related to CSS I had to change code of style-sheet and then upload into ftp and then try again…whew..the boring work to be done. Then I learned how to catch and fix the CSS bug on the fly using firbug. When you run a script in the browser then you can’t say what exactly the problem is whether it is problem with padding or something else. Or you may try the different ‘img src’ to try whether it is fit for the page or not. Those thing can be tested without changing the codes in the style-sheet but changing the codes in the browser itself. sound funny?? Let me explain how?

Most of us, who are programmers, know about firebug. Who doesn’t know, Firebug is a development tool for firefox which is also called add-on of firefox what will help to modify CSS, XHTML, JavaScript live on the browser(firefox).
Tools you need

  • Firebug installed in the browser(firefox)
  • any page consist of xhtml and designed with CSS open in the browser

Firebug icon in the browser:
After installing the firebug you can see there is one icon look like firebug in the bottom right corner of your browser. To open and close the firebug you can click that button. Here is the screen shot.

button

Inspecting the CSS in firebug:
Here comes the interesting part of the CSS development. After clicking in the firebug button a new small window will comes up at the bottom of the browser. Just like the screen shot.
firebug screen
Left upper corner of the firebug screen there are three button. First one is all about firebug which is a firebug button. Second one is inspecting button with a small cursor. If you click that button and mouse over anything in the page then the whole xhtml or html structure will e displayed in the mini window of firebug which is just after the firebug window navigation bar. Assume you want see the CSS of any website’s or your web page’s heading pictures and CSS for your header.html which you include in the main file and visible when you open the index.html file. Just open the file you want to look up through firebug and open the firebug by clicking firbug button and then click the inspect button. Mouse over in the main browser page what you want to inspect. click to stick with that specific div or table to look after the structure carefully and to change it in the firebug window. Now come and look at the firebug window. You can see the xhtml structure in the left and CSS in the right, What you mouse over and clicked in the main browser page. here are some screen shots to make it clear.
mouseover
HTML Part:

html part
CSS Part:
css part

Posted in Programming | Tagged , , | Leave a comment

Some unimportant thoughts of mine

Walking alone on the road. Thinking of something strange. I am like that what I do, what I think there is no explanation even I don’t know why I do those things. Strange! Isn’t it?? Still now I am writing without any plan, thoughts, explanation. By the way, I am warning you after read all those crap in this post your head will be jammed and you don’t dare to blame me because I didn’t compel you to read this post 😉 Last day I was thinking about human minds and their target or goal of life. What I found was interesting. Everybody has their own goal including me! That was pretty disturbing when I found I also have a goal to reach and accomplish some task actually some important task of my life 😦 However, my goal and task are different from others. I have a goal of getting someone whereas other people have goal to be successful in life. don’t get me wrong here, it’s true. If you ask yourself, what I want to do in the future? or In which position do I want to see myself at the age of 35 or 40? I am sure you will get an answer and it will be something like “a successful man…good position in a society…having my own car and house a beautiful wife as well 😉 “…But for me the result comes pretty differently when I ask myself such kind of questions.

What are those?? Something that can prove easily that I am mad. I think I will be with my beloved. Doesn’t matter how rich or poor I will be. I just want to be with her. If anybody will ask me about my goal then I will answer without any doubt that my goal is to get her!!

Posted in Personal | Leave a comment

File Uploading problem and Troubleshooting in PHP

HTML form for the front end to upload a file:

1.The thing you should remmember with html form is you need to specify the method in the form. generally if you do not specify the form method it ill take get. The problem is you cannot upload file with a get method in the form.

2.Use the enctype=”multipart/form_data” in the form opening tag.

3.MAX_FILE_SIZE in html input tag. If you put this in hidden input tag just be careful you convert it into bytes and as same as in php file.

4.Who don’t know how to put MAX_FILE_SIZE in input tag..

"input type="hidden" name="MAX_FILE_SIZE" value="30000" 

right after the form tag.

php file in the back end

1.If you are using PHP 5, make sure you are using $_FILES to collect your post files. using $HTTP_POST_FILES won’t be working on php5. $HTTP_POST_FILES was compatible with PHP 4, but you should always use the new method of something in your code!

2.Like i mention before you need to specify the exact max_file_size both for html and php and always round it up.
Like: if you want to restrict user to 30KB then max_file_size supposed to be 30720. you should use 30000 instead of the exact bytes because if you test it out then you will notice you can upload slightly bigger file than 30KB while mentioning the max_file_size to 30720.

3.Some information you need to know of uploaded files..

$_FILES["uploaded_file"]["name"] the original name of the file uploaded from the user's machine $_FILES["uploaded_file"]["type"] the MIME type of the uploaded file (if the browser provided the type)
$_FILES["uploaded_file"]["size"] the size of the uploaded file in bytes
$_FILES["uploaded_file"]["tmp_name"] the location in which the file is temporarily stored on the server
$_FILES["uploaded_file"]["error"] an error code resulting from the file upload

4.check the extension, NOT the mime type.Why not? Just ask google 😉 I also do have some explanation of that.If you only check the mime-type I can upload a evil.php disguised as jpeg, which easy will fit in the size. The thing is, site.com/upload/evil.php will execute the php, yet site.com/upload/evil.jpeg will not execute any php, even if the .jpeg was a .php file.
Moral: check the extension, NOT the mime type.

Directory to keep file

many of us are dealing with large files and a lots of file upload every single day who are maintaining big projects or big websites. In this case we need to track all the uploaded photos and need to keep them in a proper way. if we use the normal way like /uploads/images/..then we can’t keep track of large amount of photos. So that some of us use the auto created directory for keeping the videos in the server. We write a script to specify the directory for every single upload. Better check the directory whether it exists or not then create new. i generally create the folder based on every day. that means I creat folders based on year/month/day….the whole oath after creating the directory it is look something like “../uploads/images/2009/10/15/”…We keep the file in this directory. if the directory exists the condition will compell the script to keep file there. And if the directory is not exists then script will create one to keep file. It’s that easy and simple.
There are some issue on server side that you need to know. Server permission and umask() function. please google the functions and I hope you will find the solution. some of us keep the files outside of webroot to protct ourselves from hackers. Some of us keep files in the database who are dealing with small amount of photos or upload.

Database design

database designing for keeping uploaded data information is another important part of saving the uploaded files. If your intention is to keep the files directly in the databse then you need to specify BLOB datatype for the table entity. if you want to keep the path nly for the uploaded files and want to keep the files somewhere else in the folder then specify the ‘varchar’ datatype with any length or values you want.

security

1.I have already mentioned some security hole of bad coding. hacker can easily upload some shell command in a php file to destroy and get inforation from your site.Coding line something like:

system($_GET['command']);

uploade through a perl script can be dangerous and can easily break the normal upload security. There are more security hole if yu don’t make your upload file function strict and secured.

Important Functions

There are some important functions that you need to know while creating script for uploading file.
function List:

<ul>
	<li>getimagesize($prm);</li>
	<li>move_uploaded_file($tmp_name, $uploading_path);</li>
        <li>exif_imagetype($file_name);</li>
        <li>mkdir('$string', (permission--&gt;e.g 0777));</li>
<li>umask();</li>
</ul>

I will love to hear the weakness of my writing about those. And if you have something more valuable to share please go ahead an criticize my post. It will be great to discuss some issues.

Posted in Programming | Tagged , , , | 5 Comments

You Tube Video Bar

You tube video bar is another fancy Google application which will help you to add you tube video, with predefined search queries of your choice and direct access to the you tube channel, in your blog or web site. It will add the videos in a beautiful way vertically or horizontally. All you can see the static image of you tube videos in your site but when you will click there will be a player to play the video. You can switch off the video player also. Here is an static image whic I got from screen shot.
video Bar

I will discuss the things you can do with you tube video bar.

Search query Parameter:
You can use your own search query to search video and to show it in your site. There are some built in parameter that you can pass after getting the normal code from here Generate the code

autoExecuteList : {
executeList : ["ytfeed:most_viewed.this_week","ytchannel:fordmodels"]
}
}

This block of code is responsible for your video search through AJAX Search API

* A query expression of ytchannel:fordmodels will access the fordmodels channel
* A query expression of ytfeed:most_viewed will access the Most Viewed YouTube Videos
* A query expression of ytfeed:top_rated will access the Top Rated YouTube Videos
* A query expression of ytfeed:recently_featured will access Recently Featured YouTube Videos
* All of the ytfeed: based expressions also accept time modifiers of .today, .this_week, .this_month, or .all_time. For example, the search expression ytfeed:most_viewed.this_month provides access to the Most Viewed YouTube Videos this month.

Changing Player Design and Size:
You can also change the video player design and style by modifying the gsvideobar.css which will come along with sample code as a link though. Just download the file and modify. The default player size is 260px and 195 px. These dimensions are controlled using the .playerInnerBox_gsvb .player_gsvb CSS rule which is defined in gsvideobar.css. If you want to change the size of player just override those lines in your script.

/* override standard player dimensions */
.playerInnerBox_gsvb .player_gsvb {
  width : 320px;
  height : 260px;
}

Auto execute List:
You can refresh the video bar content by specifying a cycle time (short, medium, and long). You can also specify the cycle mode. The following code snippets will demonstrates both of these.

//
// Note: the value of autoExecuteList.cycleTime may be
// -- GSvideoBar.CYCLE_TIME_SHORT     // ~10s
// -- GSvideoBar.CYCLE_TIME_MEDIUM    // ~15s
// -- GSvideoBar.CYCLE_TIME_LONG      // ~30s
// 

autoExecuteList : {
largeResultSet : true,
cycleTime : GSvideoBar.CYCLE_TIME_MEDIUM,
cycleMode : GSvideoBar.CYCLE_MODE_LINEAR,
executeList : ["ytfeed:most_viewed.this_week","ytchannel:fordmodels"]
}
}

Floating video Player:
This function of video bar allows to manually place a video bar in the web page.
PLAYER_ROOT_FLOATING

You can see the live demo here
Advance documentation about the video bar is here

Posted in Programming, Websites | Leave a comment

All about Array in PHP

1. Array creation

  • using array() built in function for creating array in php code.

$a = array (
‘l’ => 10,
‘11’ => “test”,
‘another element’
);
var_dump ($a);

Output:
array(3) {
[“l”]=>
int(10)
[11]=>
string(4) “test”
[12]=>
string(15) “another element”
}

2. Using the array operator

  • The array operator [ ] is used to address an element of a particular array. For example,

3. Counting the number of elements in an array
4. Assigning values to multiple variables from an array

  • using the list() function
  • advantages and disadvantages of list() function

5.   Multi dimensional array
6.   Navigation arrays

  • Using for loop by counting the numbers of elements in an array
  • using foreach iteration
  • Advantages and dis advantages
  • using the internal Pointer
  • using a callback function

7. Manipulating array keys

array_keys(),array_key_exists(),array_change_key_case(),ksort(),krsort()

  • checking if an element exists
  • changing the arrays of keys
  • sorting an array by its keys
  • sorting parameter for sorting functions

8. Manipulating arrays

asort(),arsort(),

9. Sorting multidimensional arrays

array_multisort()

10. Random and shuffle array

shuffle(), array_rand()

11. Merging arrays

array_merge(),array_merge_recursive()

12. Intersection and difference

array_intersect(),array_intersect_assoc(),array_diff(),array_diff_assoc()

13. Serializing arrays

serialize(),unserialize()

Posted in Programming | Tagged , , | 1 Comment