top button
Flag Notify
    Connect to us
      Site Registration

Site Registration

About Flot Javascript Library ?

+1 vote
492 views

What is Flot.js?

Flot is a pure JavaScript plotting library for jQuery, with a focus on simple usage, attractive looks and interactive features.

Flot is easy to use, just a few lines of code, you can make a simple line chart, it also provides a comprehensive API documentation where you can find examples, usage and methods. The most important, Flot continues to release new versions, each new version comes with new features.

You can visit the following link and see the example charts in flot.

http://www.flotcharts.org/

Example charts for flot

enter image description here

See the whole documentation for how to use by using below link

https://github.com/flot/flot/blob/master/API.md

Video for Flot.js

posted Sep 24, 2014 by anonymous

  Promote This Article
Facebook Share Button Twitter Share Button LinkedIn Share Button


Related Articles

What is Angular.js?

AngularJS is an open-source web application framework. It is a structural framework for dynamic web apps.

It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly.

Its goal is to augment web applications with model–view–controller (MVC) capability, in an effort to make both development and testing easier.

AngularJS is a MVC framework that defines numerous concepts to properly organize your web application.

Your application is defined with modules that can depend from one to the others. It enhances HTML by attaching directives to your pages with new attributes or tags and expressions in order to define very powerful templates directly in your HTML.

It also encapsulates the behavior of your application in controllers which are instanciated thanks to dependency injection.

AngularJS helps you structure and test your Javascript code very easily.

Finally, utility code can easily be factorized into services that can be injected in your controllers.

Some Main reasons for using Angular.js
1. MVC done right
2. A declarative user interface.
3.Write less code
4.DOM manipulations where they belong
5.Service providers where they belong
6.Context aware communication
7.Unit testing ready

Video Tutorial for What is Angular.js

https://www.youtube.com/watch?v=j1UmYUeqWuY

READ MORE

Many web applications developed today use some or the other JavaScript library or framework. These libraries and frameworks heavily rely on what is known as JavaScript prototypes. Therefore, it would be interesting to any web developer to understand this concept. This short article explains in brief what JavaScript prototypes are and how they form an integral part of many of the popular JavaScript libraries.

It may sound bit confusing, but a JavaScript function is actually an object and it gets a few prebuilt properties. One of these properties is the prototype property. The prototype property (often referred to as a function prototype) allows you to add properties and methods to the function under consideration. (Remember what was just mentioned: functions are objects and hence can have properties and methods!)

Here’s an example that makes it clear:

function Customer() {
  this.customerID = 0;
  this.companyName = '';
  this.contactName = '';
  this.country = '';
};

The code declares a function named Customer. The Customer function declares four members - customerID, companyName, contactName and country - intended to store customer ID, company's name, contact person and country, respectively. Once created, you can instantiate and use Customer like this:

var objCust1 = new Customer();
objCust1.customerID = 1;
objCust1.companyName = 'some company name';
objCust1.contactName = 'some contact name';
objCust1.country = 'USA';
alert('#' + objCust1.customerID + ' ' + objCust1.companyName);

This code creates an instance of Customer and stores it in an objCust1 variable. When you instantiate an Customer, its members assume the values as assigned in the Customer() function. This is analogous to a constructor in C#. The code then assigns customerID, companyName, contactName and country members of Customer. Finally, values of a few members are displayed using an alert dialog. You can add more members to Customer by using its prototype property as illustrated here:

Customer.prototype.customerSince = null;
Customer.prototype.getOrderDetails = function () {
  //return order details here
  return "This customer has total 10 orders worth Rs. 1,00,000.";
}; 

The code accesses the prototype property of the Customer object and adds a customerSince member to store the date since a company is your customer. Then the code defines the getOrderDetails() method on the Customer object. The getOrderDetails() method is supposed to return some details about all the orders of a customer.

Once you add the properties and methods to the function prototype, you can instantiate and use the Customer object as follows:

var objCust2 = new Customer();
objCust2.customerID = 2;
objCust2.companyName = 'company 2';
objCust2.contactName = 'contact 2';
objCust2.country = 'IN';
objCust2.customerSince = new Date(1992, 8, 14);
var orderDetails = objCust2.getOrderDetails();
alert(objCust2.companytName + ' - ' + objCust2.customerSince + " - " + orderDetails);

This code created an object named objCust2 that is of type Customer. The code then sets properties of Customer including the newly defined customerSince and calls its getOrderDetails() method. The values are displayed back in an alert dialog.

Now, let's put this concept to use. We will build our own $ library on the lines of jQuery. Obviously, we are not going to build any rich functionality like jQuery. What our library will do is simply select a specific DOM element and make its contents appear bold, italics or underlined depending upon our instructions. The idea is to show how JavaScript prototypes are used by these popular libraries and how you too can use them in your applications. Let's get going.

Create a new web site in your favorite editor (I used Visual Studio) and add Scripts folder to it. Then add a new JavaScript file and name it MyJavaScriptLibrary.

At the top of this file define our precious gen - the $ - as shown below:

var $ = null;

JavaScript allows you create variable whose name is $. Now you must have got some hint about jQuery $ usage. Currently our $ object won't do anything because it points to null. Later we will point this $ variable to a function.

Then add the following code that creates a function named MyJavaScriptLibrary:

var MyJavaScriptLibrary = function () {
    this.targetElement = null;
}

The MyJavaScriptLibrary function (keep in mind function is an object!) defines two members targetElement and fn. The targetElement member is intended to hold a reference to a DOM element that is to be manipulated with our library.

Now, it's time to define a few functions for MyJavaScriptLibrary that will do some meaningful work. These functions are added to MyJavaScriptLibrary using its prototype object. Here is how:

MyJavaScriptLibrary.prototype.Init = function (id) {
    this.targetElement = document.getElementById(id);
}

MyJavaScriptLibrary.prototype.MakeBold = function () {
    this.targetElement.innerHTML = "<strong>" + this.targetElement.innerHTML + "</strong>";
}

MyJavaScriptLibrary.prototype.MakeItalic = function () {
    this.targetElement.innerHTML = "<em>" + this.targetElement.innerHTML + "</em>";
}

As you can see we added three functions - Init(), MakeBold() and MakeItalic() - to the prototype object. The Init() function accepts a DOM element ID and grabs that element using document.getElementById() method. The grabbed element reference is then stored inside the targetElement property we declared earlier. The MakeBold() and MakeItalic() methods simply wrap the HTML contents of the target element inside <strong></strong> and <em></em> tags respectively. This way the contents of the element will appear bold or italics.

At this stage our library is in usable state. If you wish to go ahead and test its functionality you can add a reference to MyJavaScriptLibrary.js in some HTML page and write the following code in the HTML file:

<script type="text/javascript">
  var obj = new MyJavaScriptLibrary();
  obj.Init("div1");
  obj.MakeBold();
  obj.MakeItalic();
</script>

The above code assumes that there is a <div> with ID of div1 on the page above the script block. It then creates an instance of MyJavaScriptLibrary() and calls Init() method to grab the <div> for applying the effects. Then MakeBold() and MakeItalic() methods are called on the obj to make the contents of <div> appear in bold and italics. The following figure shows that our library indeed works as expected.

image

Although our library is ready it's not yet a $ library. Let's add that piece of code in the MyJavaScriptLibrary.js file.

Add the following function at the end of the code we wrote so far in the MyJavaScriptLibrary.js file.

var Wrapper = function (id) {
    Wrapper.prototype = MyJavaScriptLibrary.prototype;
    Wrapper.fn = MyJavaScriptLibrary.prototype;
    var obj = new MyJavaScriptLibrary();
    obj.Init(id);
    return obj;
}

The above code creates a function named Wrapper. As the name suggests this function simply wraps the MyJavaScriptLibrary function. It accepts id of a DOM element as a parameter.

Inside, prototype property of Wrapper function is set to the prototype property of the MyJavaScriptLibrary function. Why is this needed? That's because we want to allow for extending MyJavaScriptLibrary. This calls for access to the prototype of MyJavaScriptLibrary. By pointing prototype of Wrapper to the prototype of MyJavaScriptLibrary we ensure that such an access can be provided. We also create a shortcut to the prototype in the form of fn property. This is just to mimic what jQuery library's provides. If you worked with jQuery, you might be aware that jQuery plugins are added to the $.fn oject.

The code then creates a new object of MyJavaScriptLibrary function and calls its Init() method by passing the ID to it. Notice that Wrapper() function returns obj back to the caller.

Now the final step - add $ alias to our library. Here is how that is done:

$ = Wrapper;

The second line of code points the $ variable we declared at the top to the Wrapper function. That's it! You just developed your own $ library!!

Let's use our $ library in an HTML page.

$("div1").MakeBold();
        
$.fn.MakeUnderlined = function () {
    this.targetElement.innerHTML = "<u>" + this.targetElement.innerHTML + "</u>";
}
$("div1").MakeItalic();
$("div1").MakeUnderlined();

The above code now uses $ everywhere instead of actual function names. Remember that $ means Wrapper. So, it is basically calling Wrapper function and passes ID of the <div> to it. This is our "selector" to grab the DOM element. Remember that Wrapper return an object of MyJavaScriptLibrary and hence functions such as MakeBold() can be invoked after $("...").

Next, the code extends our $ library by adding a custom function - MakeUnderlined() - to the $.fn object. Recollect that $ is Wrapper and fn is a reference to Wrapper's prototype.

Finally, the code calls MakeItalic() and MakeUnderlined() functions. The following figure shows a sample run of the page.

image

As you can see the text is displayed in bold, italics and underlined styles.

I hope you got an idea of what JavaScript prototypes are. Our example is too simplistic as compared to full-fledged libraries such as jQuery but it does explains the basic understanding as to how prototype object can be used to extend a function by adding your own properties and methods to it.

READ MORE
...