This page is here only as reference for Version 1 customers. All existing licenses are still valid, and support will still be provided.

Syntax, feature activation and license terms have changed with the new release. More Info

Chartwell Web uses javascript to perform the work of OpenType substitutions. The script searches all targeted elements for data strings, swaps all values with the appropriate glyphs, and then wraps everything in easily targeted classes for styling. @font-face declarations are made dynamically by the script.

Please note that the desktop fonts will not work with this script. The webfonts have been modified in a number of ways to make the substitutions possible.

Licensing and Design Details

Browser Support

Internet Explorer 6+
Safari 3.1+
Firefox 3.5+
Chrome 4+
Opera 10.54+
Mobile Safari 4.2+

Browser Samples

Basic Implementation

1: Enter your data as you normally would, with a ‘+’ separating values, and space delineating the start of a new graph. Then wrap the data in a div with a class of ‘chartwell‑pies’, ‘chartwell‑bars’, or ‘chartwell‑lines’.*

<div class="chartwell-pies">10+40+50</div>

2: Place the ‘fonts’ folder in your root folder.**

3: Download the latest javascript file and link it up inside your head tag. Edit the path to the file if necessary.

<script type="text/javascript" src="scripts/chartwell1.1.js"></script>

4: Add this script to your head.

<script type="text/javascript">window.onload=function(){chartwell();}</script>

*Only place data inside the targeted div. Anything else will be discarded! Use a span tag if you would like the data to appear inline.
**Relative to the page being displayed. If you're having trouble displaying fonts, try manually setting the path.

Styling Your Graphs


Each value is given an incremental class of ‘cw-value-one’, ‘cw-value-two’, ‘cw-value-three’ and so on, resetting after each new graph. Target these in your css to add color to your graphs.

.cw-value-one {color: #f00;} /* Changes all first values to red */
.cw-value-two {color: #ff0;} /* Changes all second values to yellow */
.cw-value-three {color: #0f0;} /* Changes all third values to green */

Whole Graph

Each graph is wrapped in class of ‘cw-graph’.

.cw-graph {margin-right: 10px;} /* Adds 10px to the right of every graph */

Pies Counters

To style the counters(center holes) in Pies target ‘cw-pies-counter’.

.cw-pies-counter {color:#fff;} /* Changes the counters to white */

Bars End Blocks

The end blocks in Bars can be targeted with ‘cw-bars-top’.

.cw-bars-top {color:#ddd;} /* Changes the end block to grey */ 

Additional Parameters

Basic structure of function call with parameters

chartwell({pies:'off', wrap:'div', separator:' '});

Disabling/Enabling Graphs

By default, all styles of charts will be searched for, even if you haven’t purchased a license for all styles. To disable this you must manually turn off the styles you don’t want. You can also revert the data back to its text form by turning a style off.

pies:'off', // turns pies off 
bars: 'off', // turns bars off
lines: 'off' // turns lines off

Wrapping Tags

By default all graphs are wrapped by <span> tags. This can be changed with the following parameter. Be careful, everything apearing between the quotes will be inserted into the tag. The < and > carrots are automatically placed, do not include them.

wrap:'div' // changes wrapping tags to <div> tags

Font Path

You may also change the file path to the ‘fonts’ folder. This must be relative to the html file being displayed. Hotlinking is not allowed. No trailing slash is needed.

font_path: '../here/there/fonts' // change the path to the fonts


By default nothing separates the graphs. If you have a long chain of graphs in the same div block, you may want to consider adding a space, with this parameter, in order to ensure the graphs wrap to the next line. Any character or string defined here will appear between each graph.

separator: ' ' // adds space between all graphs
separator: 'sweet' // adds 'sweet' between all graphs

Manual @font-face Declarations

The @font-face declaration and a few minor styles are added dynamically via javascript. Unfortunately for Internet Explorer 6-8 a workaround was needed that involves placing the styles inside the body tag instead of the head, thus producing "invalid" code for those browsers. It has been tested thoroughly, and works in those environments, but if you wish to stick to standards, you can turn off the auto implementation and declare the styles on your own.

auto_styles: 'off' // disables auto creation of the styles

Below is the suggested CSS implementation, with the help of FontSquirrel. Please note the additional styles, not relating to @font‑face, which are required.

/* Pies */
	src:url('fonts/chartwell-pies-web.eot?#iefix') format('eot'),
		url('fonts/chartwell-pies-web.woff') format('woff'),
		url('fonts/chartwell-pies-web.ttf') format('truetype'),
		url('fonts/chartwell-pies-web.svg#webfontjsvkp4eJ') format('svg');
.chartwell-pies {font-family: ChartwellPies-Web, helvetica, sans-serif;}
.cw-pies-center{ margin-left:-1em;}
/* Bars */
	src:url('fonts/chartwell-bars-web.eot?#iefix') format('eot'),
		url('fonts/chartwell-bars-web.woff') format('woff'),
		url('fonts/chartwell-bars-web.ttf') format('truetype'),
		url('fonts/chartwell-bars-web.svg#webfontPfT60VSA') format('svg');
.chartwell-bars {font-family: ChartwellBars-Web, helvetica, sans-serif;}
/* Lines */
		src:url('fonts/chartwell-lines-web1.eot?#iefix') format('eot'),
			url('fonts/chartwell-lines-web1.woff') format('woff'),
			url('fonts/chartwell-lines-web1.ttf') format('truetype'),
			url('fonts/chartwell-lines-web1.svg#webfontFj7iSXzQ') format('svg');
	src:url('fonts/chartwell-lines-web2.eot?#iefix') format('eot'),
		url('fonts/chartwell-lines-web2.woff') format('woff'),
		url('fonts/chartwell-lines-web2.ttf') format('truetype'),
		url('fonts/chartwell-lines-web2.svg#webfont8wiMObuq') format('svg');
.chartwell-lines {font-family: ChartwellLines-Web1, helvetica, sans-serif; }
.chartwell-lines-supplement {font-family: ChartwellLines-Web2, helvetica, sans-serif;}

Modifying Data

The original data is kept in a hidden <span> with a class of ‘cw-raw-data’. To make edits to the graphs after they have rendered, change the data here first.

<div class="chartwell-pies">
	graphs appear here 
	<span class="cw-raw-data">10+34+56</span> // target this element

Then call the function again.


Download Javascript

Version 1.1 - July 13, 2011

Version 1.0 - June 13, 2011

Live Demo

Launch it