Graph - Basic
The above attractive graph is an example of an below code.
In HTML we can draw a attractive Graph with combination of css and Jquery.You have to just pass the parameters that have to plot the graph at which positions in an graph.Data must be in array using Jquery.
To Create a attractive plot with in a short time. Create a placeholder, make sure it has dimensions (so Flot knows at what size to draw the plot), then call the plot function with your data.The axes are automatically scaled.
To Plot the Graph Using following JQuery Plugins and CSS in your application. Please download the Plugins from the following links.
Click Here to Download CSS
Click Here to Download JQuery
Click Here to Download JQuery-Plotting
JQuery :
<script type="text/javascript">
$(function()
{
var d1 = [];
for
(var i = 0;
i < 20; i += .4)
{
d1.push([i,
(Math.tan(i)+Math.sin(i))]);
}
var
d2 = [[0,
120], [4,
-120], [8,
50], [9,
-50]];
//
A null signifies separate line segments
var
d3 = [[0,
100], [7,
50], null, [15,
-50], [20,
-100]];
var
d4=[[0,50],[1,-120],[3,15],[5,25],[8,30],[20,100]]
$.plot("#placeholder",
[ d1, d2, d3,d4 ]);
});
</script>
HTML CODE:
<div id="content">
<div class="demo-container">
<div class="demo-placeholder"
id="placeholder"
width="600px">
</div>
</div>
</div>
CSS :
#content {
width: 600px;
margin: 0 auto;
padding: 10px;
}
#footer {
margin-top: 25px;
margin-bottom: 10px;
text-align: center;
font-size: 12px;
color: #999;
}
.demo-container {
box-sizing: border-box;
width: 600px;
height: 450px;
padding: 20px 15px 15px 15px;
margin: 15px auto 30px auto;
border: 1px solid #ddd;
background: #fff;
background: linear-gradient(#f6f6f6 0, #fff 50px);
background: -o-linear-gradient(#f6f6f6 0, #fff 50px);
background: -ms-linear-gradient(#f6f6f6 0, #fff
50px);
background: -moz-linear-gradient(#f6f6f6 0, #fff
50px);
background: -webkit-linear-gradient(#f6f6f6 0, #fff
50px);
box-shadow: 0 3px 10px rgba(0,0,0,0.15);
-o-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
-ms-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
-moz-box-shadow: 0 3px 10px rgba(0,0,0,0.1);
-webkit-box-shadow: 0 3px 10px
rgba(0,0,0,0.1);
}
.demo-placeholder {
width: 100%;
height: 100%;
font-size: 14px;
line-height: 1.2em;
}
From the above sample code you can create a attractive graph using Jquery and css. I hope from this article you have some idea on graph using Jquery and css.