CSS For Bar Graphs(maybe old)
Having a working knowledge of XHTML and CSS when developing applications
is a big help in knowing what can be done client-side and what should be
generated server-side.
Recently we’ve had to tackle some interesting visualizations which we coded in XHTML and CSS. The method we used, while fairly simple, was a big help to the engineer and created a very flexible and inexpensive solution. We thought we would share our solution and code in case anyone else ran against similar situations.
Update
I posted a live example page with everything in tact. So far I’ve only been able to test in Firefox 1.0.7, Firefox 1.5, IE 6, Safari 1.3.3, and Opera 9(TP1). You can view it here.
Basic CSS Bar Graph
This is a simple bar graph we developed for a tool we’re releasing shortly for our client. The concept is simple, utilize the percentage width abilities of CSS to accurately portray a percentage bar graph.
<style>
dl {
margin:;
padding:;
}
dt {
position: relative; /* IE is dumb */
clear: both;
display: block;
float: left;
width: 104px;
height: 20px;
line-height: 20px;
margin-right: 17px;
font-size: .75em;
text-align: right;
}
dd {
position: relative; /* IE is dumb */
display: block;
float: left;
width: 197px;
height: 20px;
margin: 0 0 15px;
background: url("g_colorbar.jpg");
}
* html dd { float: none; }
/* IE is dumb; Quick IE hack, apply favorite filter methods for
wider browser compatibility */ dd div {
position: relative;
background: url("g_colorbar2.jpg");
height: 20px;
width: 75%;
text-align:right;
}
dd div strong {
position: absolute;
right: -5px;
top: -2px;
display: block;
background: url("g_marker.gif");
height: 24px;
width: 9px;
text-align: left;
text-indent: -9999px;
overflow: hidden;
}
</style>
<dl>
<dt>Love Life</dt>
<dd>
<div style="width:25%;"><strong>25%</strong></div>
</dd>
<dt>Education</dt>
<dd>
<div style="width:55%;"><strong>55%</strong></div>
</dd>
<dt>War Craft 3 Rank</dt>
<dd>
<div style="width:75%;"><strong>75%</strong></div>
</dd>
</dl>
Vertical CSS Bar Graph
In this third example, we utilize the same principle vertically and reproduce it multiple times to create a more complex graph. This particular solution was a relief the to client and engineer as all they had to do was calculate percentages, and the look of the graph was much better than their stock graphing component.
<style>
#vertgraph {
width: 378px;
height: 207px;
position: relative;
background: url("g_backbar.gif") no-repeat;
}
#vertgraph ul {
width: 378px;
height: 207px;
margin:;
padding:;
}
#vertgraph ul li {
position: absolute;
width: 28px;
height: 160px;
bottom: 34px;
padding: 0 !important;
margin: 0 !important;
background: url("g_colorbar3.jpg") no-repeat !important;
text-align: center;
font-weight: bold;
color: white;
line-height: 2.5em;
} #vertgraph li.critical { left: 24px; background-position: 0px bottom !important; }
#vertgraph li.high { left: 101px; background-position: -28px bottom !important; }
#vertgraph li.medium { left: 176px; background-position: -56px bottom !important; }
#vertgraph li.low { left: 251px; background-position: -84px bottom !important; }
#vertgraph li.info { left: 327px; background-position: -112px bottom !important; }
</style>
<div id="vertgraph">
<ul>
<li class="critical" style="height: 150px;">22</li>
<li class="high" style="height: 80px;">7</li>
<li class="medium" style="height: 50px;">3</li>
<li class="low" style="height: 90px;">8</li>
<li class="info" style="height: 40px;">2</li>
</ul>
</div>
We hope you enjoyed our examples and find new uses and variations for
the concept. Drop us a line if you have any other interesting
visualizations using XHTML and CSS and we’ll post them here.
CSS For Bar Graphs(maybe old)的更多相关文章
- 图表|Line graphs|Bar graphs|Pie graphs|Scatter graphs|标目|标值|图解|图题|标值|
科研论文写作-图表 图像的特点是直观性高效,可用于描述非线性关系,将文字难以描述的内容表达出来. Line graphs中有自变量和因变量,用于表示变化趋势.为了清晰简洁和易于辨认,所以其中的线条最好 ...
- R Graphics Cookbook 第3章 – Bar Graphs
3.1 基本条形图 library(ggplot2) library(gcookbook) pg_mean #这是用到的数据 group weight 1 ctrl 5.032 2 tr ...
- [转]一些实用的图表Chart制作工具
最近工作过程中需要用到前端一些JS框架,看到一篇博文就转过来备份使用,后续会再完善一些材料. Flot Flot一个纯javascript绘画库,基于jQuery开发.它能够在客户端根据任何数 ...
- 关于 CSS 反射倒影的研究思考
原文地址:https://css-tricks.com/state-css-reflections 译者:nzbin 友情提示:由于演示 demo 的兼容性,推荐火狐浏览.该文章篇幅较长,内容庞杂,有 ...
- Safari HTML5 Canvas Guide: Creating Charts and Graphs
Safari HTML5 Canvas Guide: Creating Charts and Graphs Bar graphs are similar to data plots, but each ...
- HTML5+CSS+JQuery 实现简单的进度条功能
样式: <style type="text/css"> .processcontainer2{ width:450px; border:1px solid #6C9C2 ...
- 数据可视化(4)--jqplot
本来打算继续研究Google Charts,但上头下了指示让看jqplot,无奈,只好先将Google Charts放一放,不过真心觉得Google Charts不错,现在先开始jqplot. jqP ...
- github上所有大于800 star OC框架
https://github.com/XCGit/awesome-objc-frameworks#awesome-objc-frameworks awesome-objc-frameworks ID ...
- 25个免费的jQuery/ JavaScript的图表和图形库
1. JS Charts Features Prepare your chart data in XML, JSON or JavaScript Array Create charts in dif ...
随机推荐
- PHP数组常用函数分类整理
一.数组操作的基本函数数组的键名和值array_values($arr); 获得数组的值array_keys($arr); 获得数组的键名array_flip($arr); 数组中的值与键名互换 ...
- Computer architecture Computer organization
COMPUTER ORGANIZATION AND ARCHITECTURE DESIGNING FOR PERFORMANCEComputer architectureNINTH EDITION C ...
- fstream 坑解决办法
status_t SysWatcher::setWVer() { fstream myfile; myfile.open("/data/w_version", io ...
- Vaadin
Vaadin 这个是用Java 做的 一个人就可以完成 你去网上搜一下 教程 https://vaadin.com/home 官网 http://baike.baidu.com/link?url ...
- WPF绑定方式
绑定到其它元素 <Grid> <StackPanel> <TextBox x:Name="textbox1" /> ...
- Quartzs -- Quartz.properties 配置
Quartzs -- Quartz.properties 配置 文件加载位置 默认:优先顺序 Classpath:quartz.properties --> org/quartz/quartz. ...
- synchronized锁自旋
http://www.jianshu.com/p/5dbb07c8d5d5 原理 通常说的synchronized在方法或块上加锁,这里的锁就是对象锁(当然也可以在类上面),或者叫重量锁,在JVM中又 ...
- ASP.NET中application对象的用法
一.Application对象的理解 Application对象在实际网络开发中的用途就是记录整个网络的信息,如上线人数.在线名单.意见调查和网上选举等.在给定的应用程序的多有用户之间共享信息,并在服 ...
- openni2 和opencv读取数据
http://blog.csdn.net/aptx704610875/article/details/49585241
- Centos7关闭防火墙与selinux
CentOS 7.0默认使用的是firewall作为防火墙 直接关闭防火墙 systemctl stop firewalld.service #停止firewall systemctl disable ...