Cirrus.js code embed

config.js

var config = {
      container: '.container',
      width: 'auto',
      height: 'auto',
      margin: {top: 50, right: 60, bottom: 70, left: 60},
      type: 'bar',
      subtype: 'stacked',
      labelFormatterX: function(d){
          return d3.time.format('%e %b')(new Date(d));
      },
      tooltipFormatter: function(d){
          return d.parentData.name + ' : ' + d.value;
      },
      axisXAngle: 0,
      tickSize: 10,
      minorTickSize: 5,
      fringeSize: 3,
      tickYCount: 5,
      axisXTickSkip: 4,
      gutterPercent: 10,
      renderer: 'svg',
      scaleType: 'time',
      keyX: 'x',
      keyY: 'y',
      outerPadding: 'auto',
      showFringe: true,
      showAxes: true,
      showXGrid: true,
      showYGrid: true,
      showLegend: true,
      autoTypeThreshold: 30,
      chartTitle: 'Chart title',
      axisXTitle: 'Axis X title',
      axisYTitle: 'Axis Y title',
      colorList: ['skyblue', 'orange', 'lime', 'orangered', 'violet']
};

data.js

var data = [
    {name: 'Sensor1', values: [
        {x: 'Fri May 01 2015 13:00:00 GMT-0400 (EDT)', y: 1},
        {x: 'Sat May 02 2015 13:00:00 GMT-0400 (EDT)', y: 2},
        {x: 'Mon May 04 2015 13:00:00 GMT-0400 (EDT)', y: 3},
        {x: 'Tue May 05 2015 13:00:00 GMT-0400 (EDT)', y: 8}
    ]},
    {name: 'Sensor2', values: [
        {x: 'Fri May 01 2015 13:00:00 GMT-0400 (EDT)', y: 1},
        {x: 'Sat May 02 2015 13:00:00 GMT-0400 (EDT)', y: 2},
        {x: 'Mon May 04 2015 13:00:00 GMT-0400 (EDT)', y: 3},
        {x: 'Tue May 05 2015 13:00:00 GMT-0400 (EDT)', y: 8}
    ]}
];

init.js

cirrus.init({container: '.container'}).render(data);