stuQuery barchart
This is a simple HTML barchart library that makes use of stuQuery. Being created from simple HTML elements, it is easy to style the barcharts with CSS.
Basic example
In the head of your page include the Javascript and CSS
<link rel="stylesheet" href="stuquery.barchart.css">
<script type="text/javascript" src="stuquery.js"></script>
<script type="text/javascript" src="stuquery.barchart.js"></script>
In the body include:
<div id="barchartbasic" style="margin-bottom:1em;"></div>Options
A chart can be created with any of the following options:
// Build the barchart object with options set
var chart = new S.barchart('#barchart', {
'units': string, // Display a unit before the bin values
'formatKey': function, // A function that is called to format the key value
'formatBar': function, // A function that is called to add a class to a bar
'parent': node, // A value passed through to events as e.data.parent
'min': number, // The minimum bin value
'max': number, // The maximum bin value
'inc': number, // The numerical size of the bin
'mintick': number, // A minimum number of bins
'bin': function // A function that returns the bin number given an input value
});
The setBins function can take the following options:
chart.setBins({
'min': number, // The minimum bin value
'max': number, // The maximum bin value
'inc': number, // The numerical size of the bin
'mintick': number, // A minimum number of bins
'update': true // Force a recalculation of the bins
});
Example 1
This chart shows year-based data binned by year and with labels only every decade.
Example 2
This chart displays random data with an auto scaling to test negative values. Negative values are given a different bar style.
We'll add some CSS to change the colours of the bars to purple with a pink hover.
Example 3
This chart shows category bins styled with CSS so that the tops of the bars look like water.
Example 4
This chart shows monthly bins using categories. Note that the chart doesn't know that these are dates and the order is set by the data array.
Example 5
This chart shows time bins with negative values.
Example 6
This chart shows time bins with only negative (or zero) values.
Example 7
This is an example of a stacked bar chart. The key is hardcoded separately.
- Coal
- Gas
- Wind
- Solar