Handling File Uploads and Downloads In Node.js with Ajax - Express Framework

Uploading the files is important aspect of transferring the data to the server from the client and moving it to the storage to share for downloading and later usage also.However encryption is important aspect of saving the Files safely with pass phrase encryption/and Decryption on Downloading or requesting.These types of Application is done generally in Cloud for user safety for files from Illegal Access.However Node.js doesn't allows you to peep into directories and get download the files where these directories are generally private unless you make it as Public Folder.This is a Main Advantage for us.

Resource : Download Demo files 

Scope:
We are Just going to Upload the Files via Ajax and Retrieve Files from Directory using FS module and make to available for Download.This Application is simple integration of Storing files online and retrieving it from anywhere.

Package.json:

Create package.json and run the installation to create dependencies for our app.

{

  "name": "expressapp",

  "version": "0.0.1",

  "description": "uploading files-Downloading",

  "dependencies": {

    "express": "3.x.x",
    "Jade" : "*"

  }

}

server.js:

Let me Explain about the server.js - i am initializing the app with Express Framework.Then setting the port for the app to listen in my Configuration function by app object of express.For Templating language i have used JADE to parse the variables across the files(view) and set up my View directory.
Then i have initalized with body parser for fetching my posted values via body and setting the limit of upload and keepExtensions of my uploaded file and setting the path for my directory for uploaded files in Server.And i have set up a public static folder for Javascript/CSS files.

So, creating the routes explicitly read here and here to create route url for Node.js Application.I have created four routing URL for index,Upload,Download,listing files.

Replace the Path URL to fetch corresponding files from your directory.For the Convenience I have used JADE  as Templating language ,You must use it carefully since it is space/tab sensitive.Use online Jade input/output for verfiying your syntax.

FileSystem Function :

var fs = require('fs');

fs.readdir('C:\\Users\\S.Shivasurya\\Documents\\node\\expressapp\\tmp\\', function (err, files) {  if (err)

    throw err;

var result=new Array();

 for (var index in files) {

  if(fs.lstatSync("C:\\Users\\S.Shivasurya\\Documents\\node\\expressapp\\tmp\\"+files[index]).isFile())

    result[index]=files[index];

 }

 res.render("files",{ result:result });  //rendering file.jade for viewing

 });

The above functions just read the given directory and fetch all files and save it in an array if it is file and not a directory! refer to node.js docs for more fs functions

Script.js (Ajax file Upload):

A Third Party plugin for AJAX upload with progress bar:


Jade for looping Array :

file.jade to list out the Files in directory while accessing /file route

extends layout

title files

block content

  div.container

    div.content   

        ul

          - each results in result

            li= results

            input(type='submit', value='Download',id=results,class='download')

  div.footer

Index.jade:

extends layout

block content
  div.container
    div.row
      div.span12
        form(method='post', action='/')
          legend express-upload-progress
          input(type='file', name='myFile', id='myFile')
          p
          div.form-actions
            input.btn.btn-primary(type='submit', value='Submit')
    hr
    div.row
      div.span12
        div.progress.progress-striped.active.hide
          div.bar(style='width: 0%')
    div.row
      div.span12
        div.alert.hide
          button.close(type='button', data-dismiss='alert') x
          span
            strong.message

Layout.jade:

doctype html
html
  head
    title express-upload-progress
    link(rel='stylesheet', href='/stylesheets/bootstrap.min.css')
    link(rel='stylesheet', href='/stylesheets/style.css')
  body
    block content
    script(src='/javascripts/jquery-1.9.1.min.js')
    script(src='/javascripts/bootstrap.min.js')
    script(src='/javascripts/scripts.js')

Download script as client javascript :

This is a simple script that can post the filename we request and download the file from Node.js express routes /download.i am not doing any Ajax operation here.just submiting POST request to server for downloading a file.

on clicking the download button,Jquery request for the file and downloads on the browser automatically.

$(document).ready(function(){
  $(".download").click(function(e){
   var filedata=this.id;
  $('<form action="/download" method="POST">' + 
    '<input type="hidden" name="file" value="' + filedata+ '">' +
    '</form>').submit();

    });
});

I Have tested on Localhost node.js server ,Have a try with demo files provided,If any error/Bug in Code/Article post as comment/mail me s.shivasurya@gmail.com.connect with me via Facebook/Twitter for help.Share is care.report for bugs.

Read More

Getting Started With Node WebKit Apps- Developing Desktop Native Apps

HTML5 Becomes Day to day More Powerful since it supports many Developer Friendly API such as Audio,File,Geolocations and many too.Html5 was used to build Amazing websites,Phonegap Apps for Android,iOS,Windows and Bada OS too.Now it has been started to be used as Desktop Application with HTML5 API and Javascript API native Windows Tasks with the help of Node.js Modules.Having Experience on Node.js Previously I am Writing this Article - Read More about Node.js Basic Here.Even Intel Appframwork GUI based mobile application developing environment uses nodewebkit as a part!

Reference : Download Demo File

Installation :

Just visit the GitHub Project use their Download option and extract the file and keep it in directory where you frequently access.

Project structure :

|-www

|  |_ index.html

|-node_modules [ if necessary ] 

|-package.json

|-ico.png

package.json :

index.html:

consider Demo file for working purpose.

Creating Zip File : 

1) Create New-> Zip File 
2) Add all www,package.json and ico.png file to Zip files and rename name.nw.zip
3) go to nodewebkit folder where you have extracted and copy this Zip file .
4) open in command prompt[terminal].
5)move to extracted Folder which you have Downloaded and execute the command.

C:\node > nw nameofapp.nw.zip

This opens the nodewebkit app index.html with your specified app details using package.json file such as toolbars,height,width and etc.

Create executable binary for Distribution:

under same directory run the command in the command prompt

copy /b nw.exe+appname.nw.zip application.exe

Note:
For More Desktop API window environment Visit official Github Repo Wiki to learn more.Consider npm repository searches for creating node_modules under nodewebkit app for node.js support. 

If any error/bug in the Demo/Article Just Mail me s.shivasurya@gmail.com or comment below here.or connect wit me via Facebook/Twitter for interactions.Share is care. 

Read More

Working with impress.js to create presentations using HTML & CSS3 - impress.js

Impress.js was awesome plugin to create awesome presentation because it uses HTML and CSS3 to animate and make the presentation still more lively for users.at the sametime the Author of impress.js warns about the usage of the presentation will be nice only if it is interesting and it's not suitable for the official meets presentations.however it is easy to set up the plugin environment and start our presentation slides.I hope it works only on modern browsers.i have already used Fathom.js but it was regular for official purpose but this one is quite interesting to display interesting streams.

preview img from presentation slide impress.js
  

Browser compatibility: 

Currently impress.js works fine in latest Chrome/Chromium browser, Safari 5.1 and Firefox 10. With addition of some HTML5 polyfills (see below for details) it should work in Internet Explorer 10 (currently available as Developers Preview). It doesn't work in Opera, as it doesn't support CSS 3D transforms.As a presentation tool it was not developed with mobile browsers in mind, but some tablets are good enough to run it, so it should work quite well on iPad (iOS 5, or iOS 4 with HTML5 polyfills) and Blackberry Playbook.

Installation:

just like other javascript just include both impress.js and demo-impress.js in your html file in between <head></head> tags.get the orginal source from here.

<link href="/demo-css.css" rel="stylesheet" /> 

<script src="/impress.js" ></script>

Usage :

Lets start with normal Html tags below

<html lang="en">
    <head>
        <meta charset="utf-8" />
           <!-- your CSS and JS files can be included here. --> 

</head>

now lets dive into slides where i have made them in to div tags and mentioned them with classes and ID's.

check browser issues:

before that we must check the browser support if it supports then we could proceed normally! or else we must highlight by showing them Error message and try in latest browsers.

<div id="impress" class="impress-not-supported">

    <div class="fallback-message"> <!-- this fallback message shows when issues exist -->
        <p>Your browser <b>doesn't support the features required</b> by impress.js, so you are presented with a simplified version of this presentation.</p>
        <p>For the best experience please use the latest <b>Chrome</b> or <b>Safari</b> browser. Firefox 10 (to be released soon) will also handle it.</p>
    </div> 

  <!-- your slides div can go here -->

</div> <!-- end of div class="impress-not-supported" -->

slides as div tag : 

before directly creating tags,just imagine a graph sheet in which you reference with X,Y,Z axis in which our div slides are going to be placed.our javascript plugin takes the value from div and moves around accordingly with CSS3.

it is mandatory to use Class step in each of our div slides.and you can mention other options if you want.

General Approach of Div slide:

<div class="step" data-x="Preferred_value" data-y="Preferred_value" data-z="Preferred_value" data-rotate="Preferred_option" data-scale="Preferred_option">

  <!-- here you could use your own style of HTML coding for contents --> 

</div>

Example for Div slide:
options:
data-x : which moves along x-axis slide
data-y : which moves along y-axis slide
data-z : which moves along z-axis slide
data-rotate : which rotates around and reach your slide normally
data-scale : which scales above the slide(zoom level)

<div class="step" data-x="200" data-y="200" data-z="100" data-rotate="45" data-scale="5">

  <!-- here you could use your own style of HTML coding for contents --> 
<p>welcome to i-visionblog.com</p>
<p>i love to create and share my ideas through my blog </p>
<p>i love to create web/mobile apps as a hobby and my interest is to work with Bigdata and analytics</p>

</div>

additional to this we could add some extra effects 3D with id="its-in-3d" and giving option to rotate in their axis 
data-rotate-x & data-rotate-y & data-rotate-z : which rotates when sliding on their axis corresponding, can be a 3D view.however it is simple and easy to code.

<div class="step" data-rotate-x="200" data-y="200" data-z="100" data-rotate="45" data-scale="-5" id="its-in-3d">

  <!-- here you could use your own style of HTML coding for contents --> 

<p>it's a 3d view here..</p>

</div>

<!-- this is the last slide of the presentation mentioned with id="return" to go back to our first slide -->

<div id="return" class="step" data-rotate="0" data-y="2000" data-x="2000">
<p>join us ! code with us or create ideas | visit www.github.com/shivasurya</p>
    </div>

<!-- this can be hint for users to naviagte with spacebar or arrow keys -->

<div class="hint">
    <p>Use a spacebar or arrow keys to navigate</p>

</div>

contributors have added some audio and other specific functions go through them in Github official impress.js.if you can find more options and bugs in my demo/code comment below!

This can be more innovative and interesting when you can think logically using graphs.other can simply use the template provided.I have mentioned options which i have used in this presentation,if i had missed out or any bugs,comment and notify me via E-mail.share is care.

Read More

working with ibm bluemix for deploying PHP application on cloud - cloud foundry

As i mentioned about my cloud experience in Heroku and attended a workshop on IBM cloud ,i had an opportunity to deploy my php application on +IBM.I got success in deploying my PHP application instant manner from my windows platform.i am so thankful to +vikas sir for introducing the bluemix through workshop session,as i mentioned in my last post.bluemix is under beta version and open to all till june.

Scope:

we could deploy php application on cloud,Create services and run database.Since i am currently using Windows 8 i would show commands and screenshot from Command Prompt.

Requirements:

> IBM ID (mandatory) with developer registration(may be useful for forums)

> Sign Up for Beta Bluemix with IBM ID (Click Here)

> Constant Internet Connection ;)

> A small php project

Installation:

Go to Official Download page for cloud foundry tool for connecting with cloud.

1) It's better to download the Stable version.

2) Select the appropriate OS and download the zip and extract.

3) Run the installer with Admin Permissions only then You won't get errors.

After Installation:

Just it will be installed In Program files in your Windows Local Disk.

1) Now open your Command prompt with Administrative Permission.

2) And type "cf" and space "-v" (option)

    C:/>cf -v   // it must output with version number of the Cloud foundry tool Application

thus CF tool is working in your command prompt.lets start initial steps to deploy our application.

manifest.yml:

This is the important step in deploying app.This is the basic app settings ,it speaks with the cloud that you need the particular setup to run your corresponding app.Simply saying it is going to initialize cloud environment for deploying.So,let us concentrate on creating manifest.yml file.note this file must be with your project files while uploading.

---
applications:
- name: NAME-OF-YOUR-FOLDER-APP
  memory: 256M
  instances: 1 
  host: WEBSITE_ADDRESS_FOR_YOUR_APP(host)
  buildpack: https://github.com/dmikusa-pivotal/cf-php-build-pack

Actual manifest.yml of my app (note that above three hyphens must be mandatory and hyphen before name is also must)

don't change Buildpack(pulling it from git php built pack),memory(actual RAM memory limit) and instance(balance load using instance).if you change it you may be charged accordingly as per price plans.

---
applications:
- name: myapp
  memory: 256M
  instances: 1 
  host: shivamyapp
  buildpack: https://github.com/dmikusa-pivotal/cf-php-build-pack

see through that your host must be unique(app web address).may be in future you can make it your custom domain.

Deployment of app:

1) Just point your API .type this in your command prompt(ADMIN)

C:/> cf api https://api.ng.bluemix.net

2) and change directory where your project file to be uploaded.

C:/> cf login

3) Enter your E-Mail ID and Password of IBM ID

just click on it and view cf login

4) after changing directory where your project exisit.(move inside where manifest.yml present) and type the command

$ cf push myapp

since i had named my folder project name i had written as myapp(replace with your app project folder name and must be same as application name in manifest.yml)

5) by executing above command just you must get like this below image.That your upload works and moving to cloud foundry.

your project file uploading via CMD

6) After that it executes many configuration and restarts the application.this mean that your Host name is correct and working.
go to Provided_Host_name.ng.bluemix.net (hostname provided in manifest.yml)
eg: myapp.ng.bleumix.net

7) While updating your application just use step number 4,5.

note: Work with caution because cloud may costs you money for over usages and scalling instance.And you can use HTTPS connections too.

I have deployed my application on Bluemix.just have a try since it is free till june month 2014.just share your experience with comments and post errors.Contact with me in s.shivasurya@gmail.com.Share is care.

Read More

working with qrcode.js for generating qr code - powerful chrome app by varun raj

Learning programming language doesn't matters at all.Because applying it real world for the end users comfort matters here.The same way last week i was learning with QR code to generate from javascript code and i was wondering where to use it and how users could easily benefited.at the same time +Varun Raj was working with QR code generator javascript and successfully create the application which helps sync between desktop to mobile phones with this QR code generator.

QR code it javascript.

   

Installation of qrcode.js:

just like other javascript include just include the script in to the web page or ur preferred projects.

<!--- include this in your header -->
<script src="qrcode.js">
</script>

Generate the QR code :

so what do we need for QR code is URL alone.this QR code.js gives to create new object for developers to just pass the url to the process the function.

<script>
new QRCode(document.getElementById("YOUR_DESIRED_ID_TO GENERATE_QR")
   , "http://www.i-visionblog.com/");
</script>

thus running this script will generate the QR code instant manner for your webpage in the given ID.

so,now how could we make user friendly for other users.and comes here is Chrome App. +Varun Raj had just created the simple extension for chrome browser and which could work with Chrome API to interact with browser Title and URL.then it is processed using popup.html of the app and generate the QR code for the users to capture it and use it later in their smartphones.

Chrome App Structure:

 APP Extension
 |
 |---------- manifest.json //initalize app with permissions,icons and other API mentions
 |
 |---------- popup.js //handles the extension events,clicks and responds in chrome
 |
 |---------- Jquery.min.js //here just to append the title text in extension
 |
 |----------  popup.html //our extension html markup where we generate QR code
 |
 |----------  qrcode.js //Javascript main file to generate the QR code.it acts like library.
 |
 |----------  icon.png //our extension icon

Live Demo for non Chrome Users:

new QRCode(document.getElementById("qrcode")
   , "http://www.i-visionblog.com/");

See the Pen working with QR code.js ~ i-visionblog by s.shivasurya (@shivasurya) on CodePen.

Snapshot:

Snapshot on the chrome app.

about developer:

Developer : +Varun Raj , skcript.com
CHENNAI - INDIA
facebook  | Google | Twitter 

Thus we had seen the qrcode.js make our life easier without typing long urls and makes easy transfer for smartphones.report for bug and share is care.

Read More

introduction to cloud computing - new way approach for business by IT industry - post snippet by @nancy joslin

workshop

+SHIVA SURYA , (author of @i-visionblog) myself attended the recent workshop on cloud computing and big data analytics with my department members +siddarth velmurugan , +venkat raman , +SRIRAMAMOORTHY S & +Varshi Ramesh.

a video that explains very well on cloud computing.

The team from +IBM , +Vikas Manoria ,sir was explaining in awesome manner about the usage,needs and other aspects technically about #cloud computing and it's working and last we had a great demo on Bluemix,a cloud based application deployment startup from IBM with J2EE simple application running on cloud integrating with Twitter API.I had previously guided you guys deploying the web application on cloud.the same way IBM provides excellent solution to deploy apps on cloud with many configuration.I will be writing a post within a week to deploy a PHP based web application with mongoDB as database on Bluemix.

so let us see about some basic concepts on cloud concept :

When a new business is started, they spend time and money to build IT infrastructures which provide hardware, software, services and they need power, larger data center, storage, servers, networks etc. But their growth get slower. In this case Cloud Computing can be implemented. It provides virtual data centers with software, and hardware and information resources, reduces money spending and avoids huge capital investments. 

Cloud computing is simply a service in which computers are connected to 

• connected to larger data centers with lot of software so they need not spend money to buy individual license 

• connected to hardware sources so they need not build, upgrade, maintain infrastructure 

• connected to information resources so they need not go all around the world for collecting information 

This doesn’t require much, all it need is internet and an account as we create in Gmail for example. But the serious problem is the security data to be stored in data centers go through networks and are sometimes hacked by black hats and lot more.however we have SSL(priavate/public key encryption) and other algorithms to encrypt data and data protection by particular operating systems.

To rectify this, cloud computing is available in three models as

• Private - secure, to one company alone, not much efficient.

• Public - not much secure, highly efficient.

• Hybrid - combination of private and public models, secure and more efficient.

Cloud computing provides all service as 

• IaaS – Infrastructure as a service(demanding infrastructure particularly).

• PaaS – Platform as a service(demanding platform such as OS particularly).

• Saas – Software as a service(instant for testers to include add-ons like mysql,mongodb).

More than half of US are pulled into this. By the 3rd into Everything as a Service (EaaS) instead of infrastructure, platform, software as individual service. They are expecting that the total market of cloud will reach $158.8 billion. In forth coming years Hybrid cloud will be more adopted and total market rises to great extends.

so which industry,application needs cloud storage,hosting ?

> Applications such as pinterest runs on cloud based service where the traffic would be quite large and to manage them.

> Industries such as logistics and other industries which need real time statistics and data to manage customers and provide opt services on time.

> growing industry for big data analysis to challenge their opponents with present data.

> finally marketing feedbacks,data etc for products a needs a huge storage where they can be stored and retrieved without loss of data and perfomance.

and where the industry could handle large amount of data.

And finally cloud is vast concept to describe ,and only you can experience it when you really work it on by deploying small applications and experiencing how cloud manages the and traffic.share is care.

Read More

Login system v1.0 - i-visionblog

you have been using Google,Facebook Twitter with login system with recaptcha and recover system to maintain and enable privacy for users.Recaptcha enables the user to slow down the too many login attempts on a login page.I have enables access tokens to handle only genuine request from the genuine forms from PHP.since i got too many response on my last post Simple login system and OOPS approach i had made this in github for everyone to notify errors and optimize the script.

login system v1.0 i-visionblog.com

   

 App structure:

  |
  |-------- css
  |               |------- bootstrap.min.css
  |               |------- bootstrap.css
  |               |------- validator
  |                              |---css
  |                              |       | --- bootstrapvalidator.css
  |                              |       | --- bootstrapvalidator.min.css
  |                              |----js
  |                                      | --- bootstrapValidator.js
  |                                      | --- bootstrapValidator.min.js
  |
  |--------- js
  |               | --- bootstrap.js
  |               | --- bootstrap.min.js
  |               | --- jquery.js
  |               | --- jquery.min.js
  |
  |--------- fonts
  |                | - normal font files from bootstrap
  |
  |--------- index.php //checks for session and create forms accordingly
  |
  |--------- home.php //checks for session and shows the data of login user
  |
  |--------- login.php //to check db,session,login access token,attempts,recaptcha
  |
  |--------- logout.php //check for session and access key for session destroy
  |
  |--------- recaptchalib.php //script from google to show recaptcha form and verfiy
  |
  |--------- user.sql //populate your database with this file using import

features:

1)bootstrap validation with framework

2)complete login/logout with fixed sessions

3)pdo queries from db (to avoid sql injection/hacks  )

4)functions to check sessions

5)hope this will work like facebook logout enabled with session and access tokens

6)recaptcha from google to prevent more than 4 login attempts

7)no cross site post attempts(hope :p )

p.s report for bugs!! or open issues on github repo
i will be giving constant updates & social media syncing with access tokens settings for sharing,commenting and other stories on facebook,twitter.share is care

Read More

how does facebook check-in works with Bing maps API with facebook pages (PART 1/3)

This is another post after Facebook custom stories for facebook application which made me more crazy to learn about the Bing Maps API to retrieve maps using AJAX 7 technique or REST API service provided by MICROSOFT.

you guys would be fascinated in updating status and photos ,events and others with check-in places and tag with your friends.Generally facebook always displays the Bing Maps for those check-in.These check-ins are actually born at Pages/place you create and give access via GPS to locate your device and get Latitude and longitude details to query Bing maps API and obtain maps to display to users and friends.

There are lot of parameters in getting map for exact location and corresponding maps for various platforms with various methods.i am here discussing about web(desktop) Rest API request and AJAX 7.

first of all let us see how to make location based request with BING API in this post:

1) Go to Bing Maps API and register a new Application with Microsoft Live Account.

2) Create a Bing Map KEY for retrieval and authentication purpose(generally making API calls secure from anonymous calls)

3) Create with BASIC keys and provide as NON PROFIT as category for safer side usage.

4) Copy your KEY which is registered with correct Domain name URL.

Lets have a look at the simplest BING MAPS API CODE to retrieve location based on QUERY.

     <script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>

      <script type="text/javascript">
         
         var map = null;
 
         function GetMap()
         {
            // Initialize the map
            map = new Microsoft.Maps.Map(document.getElementById("mapDiv"),{credentials:"Aoyuj93YnzHbS8ZBLA6sdcvsdvzcxvcsyv2ASBjCJlICSIVobIZt3bZhwTzr-egVhMmlf-f8IKpM", mapTypeId:Microsoft.Maps.MapTypeId.road}); 

         }

         function ClickGeocode(credentials)
         {
            map.getCredentials(MakeGeocodeRequest);
         }

         function MakeGeocodeRequest(credentials)
         {

            var geocodeRequest = "http://dev.virtualearth.net/REST/v1/Locations?query=" + encodeURI(document.getElementById('txtQuery').value) + "&output=json&jsonp=GeocodeCallback&key=" + credentials;

            CallRestService(geocodeRequest);
         }

         function GeocodeCallback(result) 
         {
            alert("Found location: " + result.resourceSets[0].resources[0].name);

            if (result &&
                   result.resourceSets &&
                   result.resourceSets.length > 0 &&
                   result.resourceSets[0].resources &&
                   result.resourceSets[0].resources.length > 0) 
            {
               // Set the map view using the returned bounding box
               var bbox = result.resourceSets[0].resources[0].bbox;
               var viewBoundaries = Microsoft.Maps.LocationRect.fromLocations(new Microsoft.Maps.Location(bbox[0], bbox[1]), new Microsoft.Maps.Location(bbox[2], bbox[3]));
               map.setView({ bounds: viewBoundaries});

               // Add a pushpin at the found location
               var location = new Microsoft.Maps.Location(result.resourceSets[0].resources[0].point.coordinates[0], result.resourceSets[0].resources[0].point.coordinates[1]);
               var pushpin = new Microsoft.Maps.Pushpin(location);
               map.entities.push(pushpin);
            }
         }

         function CallRestService(request) 
         {
            var script = document.createElement("script");
            script.setAttribute("type", "text/javascript");
            script.setAttribute("src", request);
            document.body.appendChild(script);
         }

      </script>

See the Pen facebook like check-in [part 1/2] basic usage of bing API by s.shivasurya (@shivasurya) on CodePen.

Demo here - LINK 

so what happens in above code as simple and short and sweet:

1) we got the key from Bing API official used them rite at the place (credential mentioned in code)

2) using the key we made a user query place(eg:coimbatore) and which is sent via URL as REST API CALL with javascript help.

3) after STATUS 200 we get the result in JSON/XML (as we mention in URL PART)

4) by appending the result in browser we could get the place with Pushpin and we could get LATITUDE/LONGITUDE info also here which can be stored in database.

5) note that the resultant map is in form of Image as tiles (parts) can be saved and used personally.and the link can be useful later part.

thus we have successfully queried a place with longitud/latitude and an image.with this in next tutorial i would explain how pages/events/status check-in's works and btw we could create simple Check-in applications also.

i have tested this above code worled well and came across many errors! you can discuss errors with me hope i can provide solutions as comments/Email,Share is Care.

Read More

working with chart.js to create graphs,charts using javascript

I was monitoring my traffic last few days and was viewing graph of visitors for my site and was curious to know the way of generation of chart in Blogger to display the traffic.& finally found an excellent solution for my own Admin site also.solution was - Chart.js. Humans are always attracted to the visually drawn graphs and charts rather than raw data in plain sheets.Thus,Chart.js enhances to create charts and load the graph easily in to web pages since it is javascript plugin.as we come across the comparison of data charts could make easy to differ one from the other and makes user to understand soon about it,Any way those carts will be very useful for the ADMIN panel for many back end website to analyse data and compare them.There are lot of Bootstrap themes to create admin with charts but this tutorial may enhance you to create your own charts for your website with data given.

Installation of Chart.js : Download

Just like how we use javascript in our sites,attach them as in <head></head> tags using script src.

<script src="chart.js"></script>

Generating chart :

since this chart.js uses HTML5 we use <canvas> tag to load our charts in web pages with referencing respecttive id's

<canvas id="preferred_name" height="preferred height" 

width="preferred width"></canvas>

Javascript to create a chart :

generally Chart.js gives many flavours such as LINE,BAR,RADAR,POLAR,PIE,DOUGH NUT chart types.

Essential part of the chart is Data that to in number formats and Labels and Data Range to prepare a chart.By using the below statement we could call the function with possible arguments through them.generally we pass DATA and OPTIONS as arguments to generate a graph in canvas area.

var ctx = document.getElementById("canvas_id_here").getContext("2d");
new Chart(ctx).Line(data,options);

the above code calls the function with specific arguments i.e DATA and OPTIONS.

data (argument of above function) :

data is generally declared as VAR in javascript and by further we could break it up with three different options such as LABELS as array ,DATASETS that contains some CSS property and RAW-DATA.

lets have a look at the LABEL which is declared as array i.e

label:['India','south africa','Australia','USA']

now about some CSS property for our graph look i.e they have been determined by DATASETS with that RAW-DATA is combined as array which is essentials to generate graph, i.e

datasets:
[{

fillColor:"rgba(your specified value for fill color in r,g,b,a format)",

strokeColor:"rgba(your specified value for strokes colour in r,g,b,a format)",

pointColor:"rgba(your specified color option in rgba format)",

pointStrokeColor:"hexa decimal value for colour",

data:[45,42,15,14,17,62,14]

}

]

Options(argument to function mentioned above):

there are so many options which defines our graph look add some css,Those Options are simple for readers to interpret so i don't want to explain those,just go through the options code.

Line.defaults = {
scaleOverlay : false,
scaleOverride : false,
scaleSteps : null,
scaleStepWidth : null,
scaleStartValue : null,
scaleLineColor : "rgba(0,0,0,.1)",
scaleLineWidth : 1,
scaleShowLabels : true,
scaleLabel : "<%=value%>",
scaleFontFamily : "'Arial'",
scaleFontSize : 12,
scaleFontStyle : "normal",
scaleFontColor : "#666",
scaleShowGridLines : true,
scaleGridLineColor : "rgba(0,0,0,.05)",
scaleGridLineWidth : 1,
bezierCurve : true,
pointDot : true,
pointDotRadius : 3,
pointDotStrokeWidth : 1,
datasetStroke : true,
datasetStrokeWidth : 2,
datasetFill : true,
animation : true,
animationSteps : 60,
animationEasing : "easeOutQuart",
onAnimationComplete : null

}

Final word:

Thus combining the above resource we could generate charts graphs in efficient manner.I have given only a start up use the resource from Chart.js official website for download and verfication & documentations to get more stuffs loaded.share is care.I will provide the demo soon as possible.

Read More