Update 1: If you want try this library please use the tag version because the master is in active development on new behaviours and a complete refactoring. Thanks!
Update 2: the version 1.0.0 it's coming with ES6 using Babel as precompiler and a custom builder to create your own version of the library with the only modules that you need (following the new version of D3). Check the branch 1.0.0.
M3 is a wrapper for D3 to allow integrate simple and complex datavisualization in your websit
You can found a variety of charts types and you can mix it.
- Column Chart
- Group Chart
- Stacked Chart
- Stacked 100% Chart
- Line Chart
- Area Chart
- Stacked Area Chart
- Stacked Area 100% Chart
- Pie Chart
- Donut Chart
- Slice Pie Chart
- Arc Chart
- Mixed Charts
- Bar Charts (soon)
- Grouped Bar Charts (soon)
- Stacked Bar Charts (soon)
All stiles are defined with CSS so you can create your own themes.
The charting interface only provide data visualization. If you want add any other functionality (like tooltip, mirror, etc) you have to create a "behaviour".
There are some builtin behaviours (and more to come):
- Tooltips
- Legends
- Grid background
var config = {
width:400,
height:300,
margin:{all:5},
axis: [
{pos:"left", ticks:5},
{pos:"bottom", clazz: "Axis.CategoryAxis"}
]
}
var columnChart = new M3.ColumnChart();
columnChart.behaviours = [new M3.behaviours.GridBackground()];
columnChart.draw(data, M3.extend({}, config, {container:"#ex1"}));
Generate api documentation > grunt docu Build (create min file) > grunt deploy Test (run jasmine test) > grunt jasmine