admin – @Cybrilla

As we all know how jQuery make things easy for us to develop and perform better. So here we will talk about the jqplot, which is a jQuery plugin based upon pure javascript, used to build up beautiful line, bar and pie charts with enormous features in it like customized axis, multiple x and y axis, tooltips and labels which you can adjust and customize according to your needs or requirements. In addition to this, it is an open source project which means you can just download it and use it for free whether for commercial or private use.

So here is a short description which will give you a brief idea on how to use it.

Download jqPlot from it official download page. http://bitbucket.org/cleonello/jqplot/downloads/
Unzip downloaded jqPlot copy.
1. Copy and paste jquery.jqplot.min.css from “dist/jquery.jqplot.min.css” in “css/ ” folder of your web app.
2. Copy and paste excanvas.min.js from “dist/excanvas.min.js” in “js ” folder of your web app.
3. Copy and paste jquery.min.js from “dist/jquery.min.js” in “js/ ” folder of your web app.
4. Copy and paste jquery.jqplot.min.js from “dist/jquery.jqplot.min.js ” in “js/ ” folder of your web app.

In your markup, just use it like this:

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;

&lt;link rel="stylesheet" href="css/style.css"&gt;
&lt;link rel="stylesheet" href="css/jquery.jqplot.min.css"&gt;
&lt;script type="text/javascript" src="js/jquery.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/jquery.jqplot.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript" src="js/excanvas.min.js"&gt;&lt;/script&gt;

&lt;title&gt;Untitled Document&lt;/title&gt;
&lt;/head&gt;

&lt;body&gt;

&lt;div id="container"&gt;
&lt;div id="chartdiv" style="height:400px;width:500px; margin:auto; "&gt;&lt;/div&gt;
&lt;script&gt;
$(document).ready(function(){
$.jqplot('chartdiv', 
[[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]], //jqplot options//);
});
&lt;/script&gt;

&lt;/div&gt;&lt;!--end container--&gt;
&lt;/body&gt;
&lt;/html&gt;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<title>Untitled Document</title>

</head>

<body>

$(document).ready(function(){

$.jqplot('chartdiv',

[[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]], //jqplot options//);

});

</script>

</div>

</body>

</html>

Now just open up your markup file in your browser and you would be able to see the plot.

Here is the screenshot of one that i just created:

(Hindi भेलपूरी, Marathi भेळ)

A product of random stuff thrown together to create a quick yet elegant solution. Epitomizes a cheap works-for-all solution for the masses.

Servings :

An entire nation which frequently limps itself into the list of fastest growing economies.

Ingredients :

a.) A nation with the 2^nd largest number of SMEs (Small and Medium Enterprises) and Entrepreneurs on the planet

b.) An ecosystem, more than 60% of which comprises of SMEs

c.) A system made to favor large corporates and squeeze the SMEs

d.) A run of the mill corporate

e.) Bunch of psychotic demented penniless yet strangely motivated software enthusiasts

f.) No Money, No Reputation, No Strings to pull …. NO FEAR

g.) A Vision

Directions :

1.) Take (e) and let them fry in (d) till they start doubting their very existence.

2.) Now take (a) in a bowl and slice it into 28 slices (or more if you feel the need)

3.) Mix the pieces of (a) with a generous dose of (b).

4.) To the mixture of (a) and (b) add a pinch of (c). Toss the mixture a few times to even it out. This will be the base.

5.) By now (e) would have turned a rich golden brown with frustration and lack of meaning in their lives. (e) would probably be trying to jump out of (d).

6.) Take (e) out (before they fry their brains off) and add a good amount of spicy (f) to them.

7.) Add the spiced up (e) to the main base now.

8.) Mix them well to allow (e) to garner a feel of the magnitude of work needed to be done.

9.) Garnish with a great (g) and serve!

Nutritional Information :

If served with enough zest

-can put our SME segment on some serious tech steroids

-Equip the currently bicycle like running businesses with nuclear engines

-Eventually propel the economy into the high performance high efficiency orbit

For best results :

Serve to as many as possible!

@Cybrilla

Ordinary people, Extraordinary dreams

Author Archives: admin

Jqplot – An open source jquery plugin to create charts and graphs

Bhelpuri