I had the need to add simple interactive charts to a site. After much investigation I found the charting libraries fell into two camps, very basic, and ridiculously complicated. I eventually found Flot, it made nice looking charts, the level of interaction was good, they were easy to use, and they could be extended with plug-ins.
Along with the normal line and bar charts I need a couple more advanced options; a waterfall chart and status chart.
Please note that the demos and associated code are a number of years old and the Flot library has moved on.
Waterfall Chart
The Waterfall chart, sometimes referred to as a Balancing chart, is used to show the cumulative effect of a number of positive and negative values on an initial state.
The options for the Waterfall chart plug-in are as follows:
active: Flag to activate the plugin.
show: Flag to show the Waterfall chart.
barWidth: Percentage width of the bars, 0 to 1.
startValue: Y axis value to start fixed columns at.
colorFirst: CSS colour for the first bar.
colorNegative: CSS colour for negative value bars.
colorPositive: CSS colour for positive value bars.
colorLast: CSS colour for the last bar if fixed.
colorLine: CSS colour for the line connecting bars.
lineWidth: Width of the line connecting bars in pixels.
fixedLast: Flag to indicate if the last value is fixed (will go down to the start value) or just another value.
showTable: Flag to include a table of data under the chart. This was very specific to my requirements, do not suggest it is used.
tableData: The table data in an array of rows in the form {title: 'row title', data [[i, col1],[i+1, col2],...]}.
tableRowHeight: The height of the table rows in pixels.
Tartan Plot
The Tartan plot shows changes in state along axis x for entities in axis y. The state is persisted along the x-axis until the next entry in the data.
The options for the Tartan chart plug-in are as follows:
active: Flag to activate the plugin.
show: Flag to show the Tartan chart.
barScale: Percentage height of the bars, 0 to 1, 1 will have the bars touching, this is the default.
barShading: Value between 0 and 1 to indicate how dark the shading on the bottom of the bar should be.
hideClutter: Option to hide data that will be less than a pixel wide in the form {active: true|false, color: CSS Colour for the hidden data}.
statusMap: Option to map the values that will be in the data to a colour to use for it via a lookup.
heatMap: Option to map the values that will be in the data to a color to use for it via a function.