Skip to content

andreslozadamosto/M3

Repository files navigation

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

Join the chat at https://gitter.im/alfathenus/M3 Oficial website

Summary

M3 is a wrapper for D3 to allow integrate simple and complex datavisualization in your websit

Features

You can found a variety of charts types and you can mix it.

Charts

  • 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)

Styling

All stiles are defined with CSS so you can create your own themes.

Behaviours

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

Examples

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"}));

Grunt task

Generate api documentation > grunt docu Build (create min file) > grunt deploy Test (run jasmine test) > grunt jasmine

Licence

BSD Licence