Chart command
Create animated bar charts from tabular data.
Basic Usage (HTML)
data-jkit="[chart:units=£;max=1000]"
Advanced Init (JavaScript)
$('#myelement').jKit('chart', { 'units': '£', 'max': '1000' });
Options
| Option | Values | Default | Description |
|---|---|---|---|
| max | Float | 0 | The max. value for the whole chart. It is set automatically if “0” |
| delaysteps | Int (Milliseconds) | 100 | The delay between each initial animation of the bars |
| speed | Int or “fast”, “slow” (Milliseconds) | 500 | The duration of the animation in milliseconds, bigger = slower. |
| easing | String (“linear” or easing plugin option) | linear | The easing behavior of the animation |
Events
| Event | Description |
|---|---|
| complete | Triggered after the chart is completely rendered (and the animations finished) |
Examples
2011 vs. 2012:
A basic example comparing some fantasy monthly costs of two years:
| Year | Jan. | Feb. | Mar. | Apr. | Mai | Jun. | Jul. | Aug. | Sep. | Okt. | Nov. | Dez. |
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 2011 | 500 | 124 | 254 | 124 | 245 | 233 | 125 | 147 | 189 | 156 | 164 | 144 |
| 2012 | 214 | 124 | 127 | 452 | 421 | 12 | 127 | 189 | 145 | 123 | 741 |
Source:
<table data-jkit="[chart:style=bar;units=USD;align=vertical;max=1000]"> <thead> <tr> <th class="label">Year</th> <th>Jan.</th><th>Feb.</th><th>Mar.</th><th>Apr.</th><th>Mai</th><th>Jun.</th><th>Jul.</th><th>Aug.</th><th>Sep.</th><th>Okt.</th><th>Nov.</th><th>Dez.</th> </tr> </thead> <tbody> <tr> <th class="label">2011</th> <th>500</th><th>124</th><th>254</th><th>124</th><th>245</th><th>233</th><th>125</th><th>147</th><th>189</th><th>156</th><th>164</th><th>144</th> </tr> <tr> <th class="label">2012</th> <th>214</th><th>124</th><th>127</th><th>452</th><th>421</th><th>12</th><th>127</th><th>189</th><th>145</th><th>123</th><th>741</th><th></th> </tr> </tbody> </table>
Example CSS
div.jkit-chart {
width: 100%;
border-left: 1px #000 dotted;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 1px;
}
div.jkit-chart label {
padding-left: 2px;
font-weight: bold;
}
div.jkit-chart > div.jkit-chart-step {
width: 100%;
margin-bottom: 8px;
}
div.jkit-chart > div.jkit-chart-step > div.jkit-chart-plot {
position: relative;
background: #f8f8f8;
margin-right: 6px;
padding-right: 4px;
}
div.jkit-chart > div.jkit-chart-step > div.jkit-chart-plot:hover {
background: #eee;
}
div.jkit-chart > div.jkit-chart-step > div.jkit-chart-plot > span.jkit-chart-info {
display: block;
position: absolute;
right: 4px;
top: 4px;
color: #000;
font-size: 11px;
}
div.jkit-chart > div.jkit-chart-step > div.jkit-chart-plot > div {
width: 0%;
margin-bottom: 2px;
text-align: left;
font-size: 11px;
color: #000;
padding: 2px;
padding-top: 3px;
overflow: hidden;
}
div.jkit-chart > div.jkit-chart-step > div.jkit-chart-plot0 > div {
background: #c4e1ec;
}
div.jkit-chart > div.jkit-chart-step > div.jkit-chart-plot0:hover > div {
background: #78cae9;
}
div.jkit-chart > div.jkit-chart-step > div.jkit-chart-plot1 > div {
background: #ff9999;
}
div.jkit-chart > div.jkit-chart-step > div.jkit-chart-plot1:hover > div {
background: #fd6565;
}
Replacements
There are currently no replacements for this command.
[ Learn more about replacements ]
Discussions
Do you have questions or do you want to suggest new features? Than head over to our new community:
[ jKit Community ]