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)的更多相关文章

  1. 图表|Line graphs|Bar graphs|Pie graphs|Scatter graphs|标目|标值|图解|图题|标值|

    科研论文写作-图表 图像的特点是直观性高效,可用于描述非线性关系,将文字难以描述的内容表达出来. Line graphs中有自变量和因变量,用于表示变化趋势.为了清晰简洁和易于辨认,所以其中的线条最好 ...

  2. R Graphics Cookbook 第3章 – Bar Graphs

    3.1 基本条形图 library(ggplot2) library(gcookbook) pg_mean   #这是用到的数据   group weight 1  ctrl  5.032 2  tr ...

  3. [转]一些实用的图表Chart制作工具

    最近工作过程中需要用到前端一些JS框架,看到一篇博文就转过来备份使用,后续会再完善一些材料.   Flot   Flot一个纯javascript绘画库,基于jQuery开发.它能够在客户端根据任何数 ...

  4. 关于 CSS 反射倒影的研究思考

    原文地址:https://css-tricks.com/state-css-reflections 译者:nzbin 友情提示:由于演示 demo 的兼容性,推荐火狐浏览.该文章篇幅较长,内容庞杂,有 ...

  5. 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 ...

  6. HTML5+CSS+JQuery 实现简单的进度条功能

    样式: <style type="text/css"> .processcontainer2{ width:450px; border:1px solid #6C9C2 ...

  7. 数据可视化(4)--jqplot

    本来打算继续研究Google Charts,但上头下了指示让看jqplot,无奈,只好先将Google Charts放一放,不过真心觉得Google Charts不错,现在先开始jqplot. jqP ...

  8. github上所有大于800 star OC框架

    https://github.com/XCGit/awesome-objc-frameworks#awesome-objc-frameworks awesome-objc-frameworks ID ...

  9. 25个免费的jQuery/ JavaScript的图表和图形库

    1.  JS Charts Features Prepare your chart data in XML, JSON or JavaScript Array Create charts in dif ...

随机推荐

  1. Bootstrap页面布局8 - BS常用标签与样式

    常用的Css文字标签 一. <p>文字段落Start,<strong>重要的文字</strong>,<em>倾斜的文字用来提示</em>,& ...

  2. Delphi下的OpenGL开发入门

    unit Unit1; interface uses OpenGL,Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls ...

  3. 微信公众账号开发教程(三) 实例入门:机器人(附源码) ——转自http://www.cnblogs.com/yank/p/3409308.html

    一.功能介绍 通过微信公众平台实现在线客服机器人功能.主要的功能包括:简单对话.查询天气等服务. 这里只是提供比较简单的功能,重在通过此实例来说明公众平台的具体研发过程.只是一个简单DEMO,如果需要 ...

  4. 【转】NGUI版虚拟摇杆

    http://blog.csdn.net/anyuanlzh/article/details/40107577 下面是我用nui实现的一个虚拟摇杆. 1,示图 2.代码如下,都有比较详细的注释,就不说 ...

  5. linux下线程调用sleep,进程挂起

    http://blog.csdn.net/horstlinux/article/details/7911457 http://blog.csdn.net/eroswang/article/detail ...

  6. (转)投票系统,更改ip刷票

    前言 相信大家平时肯定会收到朋友发来的链接,打开一看,哦,需要投票.投完票后弹出一个页面(恭喜您,您已经投票成功),再次点击的时候发现,啊哈,您的IP(***.***.***.***)已经投过票了,不 ...

  7. windbg sos版本不匹配问题解决

    dumpheap 时提示: 0:105> !dumpheap -stat The garbage collector data structures are not in a valid sta ...

  8. Dynamics AX Bitmap to Image File

    static void SSW_Bit2ImageFile(Args _args) { Bitmap curBitmap; Image curImage; ; curBitmap = FormLett ...

  9. centos 安装 openerp

    遇到问题:近日公司提出openerp的搭建,觉得openerp里的有些模块比较适合公司,openerp的运作,估计会有利于公司系统化的管理.于是我就去了解openrp,然后来搭建这套强大的系统. 解决 ...

  10. [LeetCode]题解(python):056-Merge Intervals

    题目来源 https://leetcode.com/problems/merge-intervals/ Given a collection of intervals, merge all overl ...