`
cuixuxucui
  • 浏览: 350803 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

Degrafa + Data Part 2: The Sparkline

阅读更多

原文链接:http://www.insideria.com/2008/04/degrafa-data-part-2-the-sparkl.html

I've expanded upon the ideas of my last post: "Degrafa + Datagrids = Visual Display of Data", and I'm continuing to explore data visualizations using Degrafa. This time, I've decided to tackle the sparkline.


From wikipedia:

Sparkline is a name proposed by Edward Tufte for "small, high resolution graphics embedded in a context of words, numbers, images".

 


Tufte describes sparklines as "data-intense, design-simple, word-sized graphics". Whereas the typical chart is designed to show as much data as possible, and is set off from the flow of text, sparklines are intended to be succinct, memorable, and located where they are discussed. Their use inline usually means that they are about the same height as the surrounding text.

 

Everyone's heard the phrase "a picture is worth a thousand words", and this next example is more proof of that. We all know the usefulness of charts at expressing numeric data in an easy to grasp format. I'm not embedding the sparkline in text, as Tufte describes, however I'm using it in a Flex datagrid component.

First, here are a few simple examples of my sparkline component:

<script src="http://www.tricedesigns.com/portfolio/degrafasparkline/swfobject.js" type="text/javascript"></script>

<script></script>

 

It can be used standalone as a very simplistic chart, or a stylized version. Sparklines are traditionally minimalistic in appearance, so that they clearly express the data. This component gives flexibility for the developer to customize it how they please. It is built using Degrafa, so it is very easy customize the appearance. The first sparkline is a very basic one: no background and a 1px black stroke. The second uses a gradient fill and a thicker stroke, and the third uses a bitmap fill, and a gradient stroke.

Now, here is a more-interesting application of the sparkline... Using the sparkline as an item renderer in a datagrid. This adds another dimension to the tabular data. Not only are you able to easily see a server, its current disk usage, but now you can see its cpu usage history. You could use another sparkline to show disk usage over time. If you were to express the same amount of information in words, you would be reading and analyzing for a long time, and you still might miss part of it.

<script src="http://www.tricedesigns.com/portfolio/degrafasparkline/swfobject.js" type="text/javascript"></script>

<script></script>

 

Thanks to Juan and Jason from the Degrafa team for giving me a few pointers how to best use Degrafa for this.

You can launch these examples in a new window at:

Simple Sparklines
http://www.tricedesigns.com/portfolio/degrafasparkline/DegrafaSparkline.html
Datagrid Sparklines
http://www.tricedesigns.com/portfolio/degrafasparkline/DegrafaSparklineDatagrid.html

You can view the source code at:
http://www.tricedesigns.com/portfolio/degrafasparkline/srcview/index.html

You can download the source code at:
http://www.tricedesigns.com/portfolio/degrafasparkline/srcview/Degrafa Sparkline.zip

 

Useful Link:

Sparklines: theory and practice

分享到:
评论

相关推荐

    Degrafa帮助文档

    Degrafa是一款强大的图形绘制工具,专为Adobe Flex开发者设计,用于在Flex应用程序中创建复杂的矢量图形。这款工具的核心是其灵活的图形系统,它允许开发者通过代码控制图形的每一个细节,从而实现动态和交互式的...

    关于DEGRAFA的简介

    DEGRAFA,全称为“基于SVG的矢量图形绘制框架”,是一个开源的、基于SVG(Scalable Vector Graphics)标准的图形绘制工具包,主要应用于Java平台。它为开发者提供了丰富的API,使得在Java应用程序中创建、编辑和展示...

    Degrafa3.1源码

    Degrafa 3.1 源码是一个用于FLEX应用程序开发的图形库,它提供了丰富的SVG(可缩放矢量图形)支持,使开发者能够创建复杂、动态且交互式的图形用户界面。在这个源码包中,我们主要关注的是如何使用 Degrafa 与 FLEX ...

    关于Degrafa's Fills简介

    2. 创建 Degrafa 图形: - 通过实例化 Degrafa 的图形类,如 `GradientFill` 或 `BitmapFill`,定义图形的填充样式。 - 设置图形的参数,如渐变颜色、角度、位图的URL等。 - 将这些图形添加到 Flex 的显示列表中...

    degrafa 的帮助文档

    flex开发的画图框架Degrafa 近来需在flex画些简单的图形,根据朋友推荐使用了Degrafa,但是官方没有提供离线的文档下载,于是自己制作了一下。 文档的所有版权均属http://www.degrafa.com 详细情况请查看degrafa的...

    degrafa绘图工具 svg操作

    2. **属性编辑**:调整图形的颜色、填充、透明度、边框样式等属性,实现个性化设计。 3. **事件处理**:添加点击、拖拽等交互事件,使图形具有响应性。 4. **动画制作**:通过控制图形的位置、大小、旋转等属性的...

    SvgToDegrafa.rar_SvgToDegrafa_degrafa_flex

    2. ** Degrafa图形API**: Degrafa 提供了一系列的图形类,如PathElement、Group、Shape等,可以创建和操作矢量图形。你需要把这些解析出来的SVG数据映射到 Degrafa 对象上,比如将SVG路径数据转化为PathElement对象...

    Degrafa画矢量曲线

    Degrafa是一款强大的图形绘制库,专用于在JavaFX平台上创建复杂的矢量图形。它提供了一个灵活的声明式模型,使开发者能够轻松地定义和操纵矢量图形,类似于SVG(可缩放矢量图形)标准。这篇博文"Degrafa画矢量曲线...

    Flex.on.Java.rar

    Part 2: Strengthening the backend 5. BlazeDS remoting and logging 6. Flex messenging Part 3: Going above and beyond 7. Securing and personalizing your application 8. Charting with DeGrafa 9. ...

    Degrafa学习一,(含SDK4.0兼容版本及源码,略微有所修改)

    Degrafa是一个图形化开发框架,它主要用于创建2D图形应用程序,特别是在Swing或JavaFX平台上。这个资源包包括了SDK的4.0兼容版本,这意味着你可以利用这个框架来开发与Java SDK 4.0相适应的应用。"含SDK4.0兼容版本...

    Degrafa.CHM

    flex开发的画图框架Degrafa 近来需在flex画些简单的图形,根据朋友推荐使用了Degrafa,但是官方没有提供离线的文档下载,于是自己制作了一下。 文档的所有版权均属http://www.degrafa.com 详细情况请查看degrafa的...

    Degrafa(Beta3)

    2. **图形组件库**: Degrafa提供了一个丰富的图形组件库,包括形状、路径、曲线、渐变等基本元素,以及更复杂的图表和动画效果。这些组件可重用性强,易于定制,有助于快速搭建图形用户界面。 3. **交互性**: ...

    degrafa源代码

    Degrafa扩展就是在FLEX中增加了对矢量数据的动态处理,包括动态添加,删除和修改,并支持SVG的路径格式数据, 因此只需要对现有的SVG数据进行一些必要的转换(以后会有工具支持,但现在只能手工完成),就可以将SVG...

    深入SVG路径~~~在DEGRAFA中使用PATH

    在DEGRAFA中,SVG路径的使用是一个重要的主题,DEGRAFA是一个ActionScript 3.0库,专门用于图形渲染和矢量图形操作。 SVG路径由一系列命令和参数构成,这些命令指示浏览器如何绘制路径。主要的命令包括M(移动到)...

    flex开源项目介绍.doc

    14. Degrafa(http://www.degrafa.com/):声明式图形描述框架,提供了强大的图形绘制能力,适用于创建复杂的视觉效果。 以上这些Flex开源项目不仅丰富了Flex开发者的工具箱,还推动了Flex技术的发展,为各种类型的...

    一个隐藏式的登录窗口

    2. `.flexProperties`:同样是一个配置文件,包含关于Flex项目的属性,如源代码目录和目标运行环境。 3. `.project`:这是Eclipse或类似IDE的项目配置文件,描述了项目的结构和构建规则。 4. `src`:源代码目录,...

    精品专题(2021-2022年收藏)Web程序员必备的43款可视化开发设计工具.doc

    2. CartoDB:这是一个地图Web服务,拥有丰富的API,可轻松构建动态、数据驱动的地图,尤其适合地理数据的可视化。 3. Chroma.js:它是一个色彩管理工具,支持颜色的线性插值和等距预览,方便在设计中选择合适的配色...

    flex图形报表控件源代码

    2.amstockchart和amcharts是TourDeFlex中下载的一个收费的图形报表框架。下载的是具有短期(好像是3个月)的试用期,并且带有其公司logo,没有使用。 3.CVSLib 是从csdn上面下载一个图形报表控件。好像是flex和.net...

Global site tag (gtag.js) - Google Analytics