CSS3 jQuery Interactive Graph

Flot is an Attractive and powerful pure JavaScript graph/ chart library for jQuery. You can read more about Flot at http://www.flotcharts.org/. The Flot plugin is simple but powerful enough to create some nice and interactive graphs.

Include Javascript Files

<script src="js/jquery.min.js"></script>
<script src="js/jquery.flot.min.js"></script>

 

Add Graph Data

Flot plugin take data from Array to generate the graph.

var graphData = [{
// Year 2011
data: [ [01, 1300], [02, 400], [03, 800], [04, 1500], [05, 2500], [06, 1200], 
[07, 2000], [08, 850], [09, 1450], [10, 760], [11, 1560], [12, 2140] ],
color: '#0291e3'},
{
// Year 2012
data: [ [01, 1000], [02, 600], [03, 700], [04, 1200], [05, 1500], [06, 1200], 
[07, 800], [08, 1950], [09, 2300], [10, 850], [11, 1250], [12, 1750] ],
color: '#ef4a01'
}];

 

Generate the Graph

$.plot($('#graph-lines'), graphData, {
series: {
       points: {
            show: true,
            radius: 5
       },
       lines: {
            show: true
       },
       shadowSize: 0
},
grid: {
       color: '#646464',
       borderColor: 'transparent',
       borderWidth: 20,
       hoverable: true
},
xaxis: {
       tickColor: 'transparent'
},
yaxis: {
       tickSize: 500
}
});

 

HTML Code to Plot the Graph

<div id="graph-wrapper">
   <div class="graph-info">
       <a href="javascript:void(0)" class="visitors">Year 2011</a>
       <a href="javascript:void(0)" class="returning">Year 2012</a>
   </div>
   <div class="graph-container">
      <div id="graph-lines"></div>
   </div> 
</div>

 

Output:

 

Generating a Bar Chart

$.plot($('#graph-bars'), bargraphData, {
series: {
bars: {
show: true,
barWidth: .7,
align: 'center'
},
shadowSize: 0
},
grid: {
color: '#646464',
borderColor: 'transparent',
borderWidth: 20,
hoverable: true
},
xaxis: {
ticks: [[1, "Jan"], [2, "Feb"], [3, "Mar"], [4, "Apr"], [5, "May"], [6, "Jun"], 
[7, "Jul"], [8, "Aug"], [9, "Set"], [10, "Oct"], [11, "Nov"], [12, "Dec"]],
tickColor: 'transparent',
tickFormatter: 'string'},
yaxis: {
tickSize: 500
}
});

 

HTML Code to Plot the Graph

<div id="graph-wrapper">
<div class="graph-info">
<a href="javascript:void(0)" class="visitors">Year 2011</a>
<a href="javascript:void(0)" class="returning">Year 2012</a>
</div>
<div class="graph-container">
<div id="graph-bars"></div>
</div>
</div>

 

 

Generating The Tooltips

function showTooltip(x, y, contents) {
$('<div id="tooltip">' + contents + '</div>').css({
top: y - 16, left: x + 20
}).appendTo('body').fadeIn();
}
var previousPoint = null;

$('#graph-lines, #graph-bars').bind('plothover',function (event, pos, item){
if (item) {
if (previousPoint != item.dataIndex) {
previousPoint = item.dataIndex;
$('#tooltip').remove();
var x = item.datapoint[0],
y = item.datapoint[1];
showTooltip(item.pageX, item.pageY, y + ' visitors');
}
} else {
$('#tooltip').remove();
previousPoint = null;
}
});