C3-JS Module example.

by Malin Jayakody

HTML

<script src="https://rawgit.com/masayuki0812/c3/master/c3.js"></script>
<link rel="stylesheet" href="https://rawgit.com/masayuki0812/c3/master/c3.css">
<script src="https://d3js.org/d3.v3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment-with-locales.min.js"></script>
<div id="chart"></div>

CSS

body {
  background-color: #fff;
}

#chart {
  margin-top: 150px;
  padding-left: 20px;
}

.c3-axis path,
.c3-axis line {
  stroke: none;
}

.c3-ygrid {
  stroke: #e9e9e9!important;
  stroke-dasharray: none;
}

.c3-axis text {
  font-size: 12px;
  font-weight: bold;
  fill: #707070;
}

.c3-line {
  stroke-width: 5!important;
}

.c3-circles circle,
.c3-circles circle._expanded_ {
  stroke-width: 3.33;
  fill: white!important;
}

.c3-line-initialDamage,
.c3-circles-initialDamage circle,
.c3-circles-initialDamage circle._expanded_ {
  stroke: #d04437!important;
}

.c3-line-evaluatedDamage,
.c3-circles-evaluatedDamage circle,
.c3-circles-evaluatedDamage circle._expanded_ {
  stroke: #8eb021!important;
}

.c3-tooltip-container {
  background-color: #333;
  color: #fff;
  opacity: 0.9;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 10px;
}

.c3-tooltip,
.c3-tooltip tr,
.c3-tooltip th,
.c3-tooltip td {
  border-style: none;
  background-color: transparent;
  box-shadow: none;
  -webkit-box-shadow: none;
}

.c3-tooltip th {
  padding-bottom: 5px;
}

.c3-tooltip th,
.c3-tooltip td,
.c3-tooltip td > span {
  font-family: Arial, sans-serif;
  font-size: 14px;
}

JavaScript

var xyModule = (function($, moment) {
  'use strict';

  var DATE_FORMAT = 'DD MMM YYYY';

  var PERIOD_VALUES = {
    DAILY: 'daily',
    WEEKLY: 'weekly',
    MONTHLY: 'monthly',
    QUARTERLY: 'quarterly',
    YEARLY: 'yearly'
  };

  var PERIODS = {
    'daily': {
      unit: 'day',
      units: 'days'
    },
    'weekly': {
      unit: 'week',
      units: 'weeks'
    },
    'monthly': {
      unit: 'month',
      units: 'months'
    },
    'quarterly': {
      unit: 'quarter',
      units: 'quarters'
    },
    'yearly': {
      unit: 'year',
      units: 'years'
    }
  };

  var LINE_TYPES = {
    INITIAL: 'initialDamage',
    EVALUATED: 'evaluatedDamage'
  };

  var LINE_COLORS = {
    'initialDamage': '#d04437',
    'evaluatedDamage': '#8eb021'
  };

  var LINE_LABELS = {
    'initialDamage': 'Initiale Schäden',
    'evaluatedDamage': 'Bewertete Schäden'
  };

  function TimelinessChart(options) {
    this.CLASS_NAME = 'TimelinessChart';
    this.options = $.extend({}, options);
    this.parseOptions();
  }

  var chart = TimelinessChart.prototype;

  chart.parseOptions = function() {
    var that = this,
      options = that.options;

    if (!options.id) {
      throw new Error(this.CLASS_NAME + ": Should have supplied an ID");
    }

    if (!options.data) {
      throw new Error(this.CLASS_NAME + ": No data passed into options");
    }

    if (!options.el) {
      throw new Error(this.CLASS_NAME + ": Should have supplied a container element");
    }

    this.id = options.id;
    this.container = $(options.el);
    this.days = Number(options.days || 30);
    this.period = options.period || PERIOD_VALUES.DAILY;
    this.currentDate = moment().startOf('day');
    this.startDate = options.data['dates'][0];
    this.data = options.data;
  };

  chart.render = function() {
    this.chartAPI = c3.generate(this.initChartOptions());
  };

  chart.initChartOptions = function() {
    var that = this,
      container = that.container;
    return {
     ...