1. INCLUDE JS FILES
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="javascripts/chartify.js"></script>
2. HTML
<table id="my-table">
<thead>
<tr>
<td></td>
<th>Not Pac-Man</th>
<th>Pac-Man</th>
</tr>
</thead>
<tbody>
<tr>
<th>Amount</th>
<td>1.256</td>
<td>5.027</td>
</tr>
</tbody>
</table>
3. JAVASCRIPT
$('#my-table').chartify('pie', {
pieChartRotation: -1.256/2,
showLegend: false,
colors: ["eeeeee", "ffc000"]
});
4. OPTIONS
When called without an options parameter, the following defaults are used.
var settings = {
chartWidth: 496, // in pixels
chartHeight: 180,
marginTop: 0,
marginRight: 0,
marginBottom: 0,
marginLeft: 0,
legendWidth: 0,
legendHeight: 0,
pieChartRotation: 0, // in radians
unit: '', // appended to labels and values
textSize: 11,
textColor: "666666",
colors: ["ff9daa","ffc000","007ec6","433840","6cc05c","ff710f","ED1F27","95a8ad","0053aa"],
xAxisBoundaries:'auto',
xAxisStep: 'auto',
axisTickSize: 5,
showLabels: true,
showLegend: true,
legendPosition: '',
isStacked: false,
isDistribution: false,
barWidth: 20,
barSpacing: 2,
groupSpacing: 10,
imageClass: ''
};
To override any of these defaults for a single call to chartify, use the options parameter.
To override any of the default settings globally, i.e. for all subsequent calls to chartify, use thesettings method:
$().chartify('settings', {showLegend: false});
When called without the parameter, the settings method returns the current default settings hash.