Skip to content

Instantly share code, notes, and snippets.

@wuliupo

wuliupo/bar-chart.htm

Created April 11, 2014 17:53
Show Gist options
  • Save wuliupo/10487814 to your computer and use it in GitHub Desktop.
Save wuliupo/10487814 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
bar-chart.htm
<!DOCTYPE html>
<html>
<head>
<title>Bar Colors Example</title>
</head>
<body>
<div class="action"><button id="Real">Real</button><button id="Relative">Relative</button></div>
<div id="canvas" class="example-chart" style="height:1000px;width:100%"></div>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="../src/jquery.jqplot.js"></script>
<link rel="stylesheet" type="text/css" href="../src/jquery.jqplot.css" />
<script type="text/javascript" src="../src/plugins/jqplot.dateAxisRenderer.js"></script>
<script type="text/javascript" src="../src/plugins/jqplot.logAxisRenderer.js"></script>
<script type="text/javascript" src="../src/plugins/jqplot.canvasTextRenderer.js"></script>
<script type="text/javascript" src="../src/plugins/jqplot.canvasAxisLabelRenderer.js"></script>
<script type="text/javascript" src="../src/plugins/jqplot.canvasAxisTickRenderer.js"></script>
<script type="text/javascript" src="../src/plugins/jqplot.categoryAxisRenderer.js"></script>
<script type="text/javascript" src="../src/plugins/jqplot.barRenderer.js"></script>
<script type="text/javascript" src="../src/plugins/jqplot.cursor.js"></script>
<script type="text/javascript" src="../src/plugins/jqplot.trendline.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var data = [
['A A',6.562],
['BB',0.469],
['C CC',1.393],
['D DD D',1.535]
]
;
$.jqplot.config.enablePlugins = true;
$.jqplot._noToImageButton = true;
var isReal;
$('#Real').click(function(){
if(isReal) return;
isReal=true;
show($('#canvas'), data, $.jqplot.dateAxisRenderer);
}).trigger('click');
$('#Relative').click(function(){
if(!isReal) return;
isReal=false;
show($('#canvas'), data, $.jqplot.LogAxisRenderer);
});
function show(canvas, data, isReal){
canvas.empty().jqplot([data], {
animate: !$.jqplot.use_excanvas,
title:'Bar Colors Example',
seriesDefaults:{
renderer: $.jqplot.BarRenderer,
pointLabels: { show: true, location: 'e' },
shadowAngle: 135,
showMarker: true,
rendererOptions: {
// Set the varyBarColor option to true to use different colors for each bar.
// The default series colors are used.
varyBarColor: true,
smooth: true,
animation: {
show: true
}
}
},
axes: {
xaxis:{
label: 'Maven Module',
renderer: $.jqplot.CategoryAxisRenderer,
rendererOptions:{
tickRenderer:$.jqplot.CanvasAxisTickRenderer
},
tickOptions:{
fontSize:'11px',
fontFamily:'Arial',
angle:90
}
},
yaxis: {
renderer: isReal,
pad: 1,
label: 'Cost Time',
tickOptions:{
suffix: 's'
}
}
},
grid: {
drawBorder: true,
shadow: true,
background: "#FEFEFE"
}
});
}
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment