Here's a very simple bar chart. Mostly just CSS based with a little bit of javascript to handle the legend going over the end of a bar.
This bit was inspired by a question from another poster this morning asking about how t make text in a coloured bar more visible if it went out the end of a bar.
Usage should be obvious from the example. All that needs really figuring out properly is a series of colour values for the classes x-chart-color-0 to x-chart-color-20 (20 seems a good cutoff point, any more than that would just be confusing to a viewer)
It drops into the examples/dialog directory
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Bar Chart Dialog Example</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<!-- LIBS -->
<script type="text/javascript" src="../../yui-utilities.js"></script>
<script type="text/javascript" src="../../ext-yui-adapter.js"></script>
<!-- ENDLIBS -->
<script type="text/javascript" src="../../ext-all-debug.js"></script>
<style type="text/css">
.x-chart-bar {
height: 1.8em;
margin-bottom: 5px;
overflow: hidden;
white-space: nowrap;
padding-top:.4em;
padding-left:.4em;
float:left
}
.x-chart-color-0 {
background-color: #229999;
}
.x-chart-color-1 {
background-color: #226699;
}
.x-chart-color-2 {
background-color: #88aa99;
}
.x-chart-color-3 {
background-color: #229911;
}
.x-chart-color-4 {
background-color: #992244;
}
.x-chart-color-5 {
background-color: #999922;
}
.x-chart-legend-1 {
color: white
}
.x-chart-legend-2 {
color: black,
position:relative
}
</style>
<script language="javascript">
/*
* Ext - JS Library 1.0 Alpha 3 - Rev 1
* Copyright(c) 2006-2007, Jack Slocum.
*/
// create the HelloWorld application (single instance)
var HelloWorld = function(){
// everything in this space is private and only accessible in the HelloWorld block
// define some private variables
var dialog, showBtn;
// return a public interface
return {
init : function(){
showBtn = Ext.get('show-dialog-btn');
// attach to click event
showBtn.on('click', this.showDialog, this);
},
showDialog : function(){
if(!dialog){ // lazy initialize the dialog and only create it once
dialog = new Ext.BasicDialog("hello-dlg", {
width:500,
height:300,
shadow:true,
minWidth:300,
minHeight:250,
proxyDrag: true
});
dialog.addKeyListener(27, dialog.hide, dialog);
dialog.addButton('Submit', dialog.hide, dialog).disable();
dialog.addButton('Close', dialog.hide, dialog);
}
dialog.show();
var c = new Chart(dialog.body, {
total: 100,
values: [34, 67, 2.25, 6, 8.1, 34],
legend: ["Bar one", "Bar Two", "Bar Three", "Bar Four", "Bar Five", "Bar Six"]
});
c.render();
dialog.on("resize", c.relabel, c);
}
};
}();
/**
@param container The container to put the chart in
@param configuration
@cfg total {Number} The value of which the other values are to be rendered as %ages
@cfg values {Array} The values for each bar
@cfg legend {Optional Arra]} The legend to go inside each bar
*/
Chart = function(container, config) {
this.el = Ext.get(container);
this.el.setStyle({padding:"20px"});
Ext.apply(this, config);
}
Chart.prototype = {
render: function() {
var dh = Ext.DomHelper;
this.bar = [];
this.label = [];
this.remainder = []
for (var i = 0; i < this.values.length; i++) {
var pct = this.values[i]/this.total*100;
this.bar.push(dh.append(this.el, {
cls: 'x-chart-bar x-chart-color-' + i,
style: {
clear: "left",
width: pct + "%"
}
}, true));
var legend = this.legend ? this.legend[i] : (pct + '%');
this.label[i] = dh.append(this.bar[i], {
tag: 'span',
cls: 'x-chart-legend-1',
html: legend
}, true);
var barWidth = this.bar[i].getBox().width;
var labelWidth = this.label[i].getBox().width;
if (labelWidth > barWidth) {
this.remainder[i] = remainder = dh.append(this.el, {
cls: 'x-chart-bar',
style: {
position: 'relative',
left: (-barWidth) + "px",
"z-index": -1
}
}, true);
dh.append(this.remainder[i], {
tag: 'span',
cls: 'x-chart-legend-2',
html: legend,
}, true);
}
}
},
relabel: function() {
for (var i = 0; i < this.values.length; i++) {
var barWidth = this.bar[i].getBox().width;
var labelWidth = this.label[i].getBox().width;
if (labelWidth > barWidth) {
this.remainder[i].setStyle({
left: (-barWidth) + "px",
});
}
}
}
};
// using onDocumentReady instead of window.onload initializes the application
// when the DOM is ready, without waiting for images and other resources to load
Ext.onReady(HelloWorld.showDialog, HelloWorld, true);
</script>
<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="../examples.css" />
</head>
<body>
<h1>Bar Chart Dialog</h1>
<!-- The dialog is created from existing markup.
The inline styles just hide it until it created and should be in a stylesheet -->
<div id="hello-dlg" style="visibility:hidden;position:absolute;top:0px;">
<div class="x-dlg-hd">Chart Dialog</div>
<div class="x-dlg-bd"></div>
</div>
</body>
</html>