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.
Browser Support
Internet Explorer 6+
Safari 3.1+
Firefox 3.5+
Chrome 4+
Opera 10.54+
Mobile Safari 4.2+
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
Values
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
Separators
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 */
@font-face{
font-family:'ChartwellPies-Web';
src:url('fonts/chartwell-pies-web.eot');
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');
font-weight:normal;
font-style:normal}
.chartwell-pies {font-family: ChartwellPies-Web, helvetica, sans-serif;}
.cw-pies-center{ margin-left:-1em;}
.cw-raw-data{display:none;}
/* Bars */
@font-face{
font-family:'ChartwellBars-Web';
src:url('fonts/chartwell-bars-web.eot');
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');
font-weight:normal;font-style:normal}
.chartwell-bars {font-family: ChartwellBars-Web, helvetica, sans-serif;}
.cw-raw-data{display:none;}
/* Lines */
@font-face{
font-family:'ChartwellLines-Web1';
src:url('fonts/chartwell-lines-web1.eot');
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');
font-weight:normal;
font-style:normal}
@font-face{
font-family:'ChartwellLines-Web2';
src:url('fonts/chartwell-lines-web2.eot');
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');
font-weight:normal;
font-style:normal}
.chartwell-lines {font-family: ChartwellLines-Web1, helvetica, sans-serif; }
.chartwell-lines-supplement {font-family: ChartwellLines-Web2, helvetica, sans-serif;}
.cw-raw-data{display:none;}
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 </div>
Then call the function again.
chartwell();