Create side by side bar chart in flot chart

Today i have  done my last work , I use some flot chart plugin to create side by side graph. The plugin name is  flot side buy side plugin.

There is link for download.

http://www.benjaminbuffet.com/public/js/jquery.flot.orderBars.js

And now use this simple code for create the graph.

 

<script type=’text/javascript’>
$(document).ready(function ()
{
DrawChart();
});

function GenerateSeries(added)
{
var data = [];
var start = 100 + added;
var end = 500 + added;

for (i = 1; i <= 20; i++)
{
var d = Math.floor(Math.random() * (end – start + 1) + start);
data.push([i, d]);
start++;
end++;
}

return data;
}

function DrawChart()
{
var f=$(‘a’).css(‘color’);
var t=$(‘h1’).css(‘color’);

var dataa = GenerateSeries(100);
var datab = GenerateSeries(100);
var datac = GenerateSeries(100);

var ds = new Array();

var data = [ // all series

[ // first series (Q1)
[0,”.$moss1.”], // pens Q1 N America
[0.1,”.$moss3.”], // pens Q1 N America
],

[ // second series (Q2)
[0.3,”.$world1.”], // pens Q1 N America
[0.4,”.$world3.”], // pens Q1 N America

],

[ // third series (Q3)
[0.6,”.$star1.”], // pens Q1 N America
[0.7,”.$star3.”], // pens Q1 N America
],

[ // fourth series (Q4)
[0.9,”.$bldg1.”], // pens Q1 N America
[1.0,”.$bldg3.”], // pens Q1 N America

],
[ // fourth series (Q4)
[1.2,”.$m1.”], // pens Q1 N America
[1.3,”.$m3.”], // pens Q1 N America

],
[ // fourth series (Q4)
[1.5,”.$s1.”], // pens Q1 N America
[1.6,”.$s3.”], // pens Q1 N America

]

]

var options = {

series: {
stack: true
},
bars:{ // show the bars with a width of .4
show: true,
fillColor:t,
barWidth: .10
},
grid: {
borderWidth: 1,
minBorderMargin: 20,
labelMargin: 10,
backgroundColor: f,
hoverable: true,
mouseActiveRadius: 50,
margin: {
top: 8,
bottom: 20,
left: 20
},
markings: function(axes) {
var markings = [];
var xaxis = axes.xaxis;
for (var x = Math.floor(xaxis.min); x < xaxis.max; x += xaxis.tickSize * 2) {
markings.push({ xaxis: { from: x, to: x + xaxis.tickSize }, color: ‘rgba(232, 232, 255, 0.2)’ });
}
return markings;
}
},
tooltip:true,
tooltipOpts: {
content: ‘Y is %y’
},
legend: {
show: true
},
yaxis:{
axisLabel: ‘Absolute Rays Per Sec’,
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: ‘Verdana, Arial, Helvetica, Tahoma, sans-serif’,
axisLabelPadding: 5
},
xaxis: {

ticks:[[0.13,’moss’],[0.4,’world’],[0.7,’star’],[1.0,’bldg391′],[1.3,’m35′],[1.6,’sphflake’]],
}

};

var plot = $.plot($(‘#container’), data, options);
}
</script>

 

Now your graph is created

 

Screenshot from 2014-08-13 00:10:47

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s