<p>Chart via C3js (<a href="http://c3js.org/">c3js.org</a>).</p>
<div id="bar-chart"></div>
<div id="donut-chart"></div>

body {
  font-family: 'Helvetica Neue', Arial;
}

p,
div {
  margin-bottom: 50px;
}

var getNiceDate = function (date) {
  return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + (date.getDate() + 1);
}

var showXaxisTicks = function (dateLow, dateHigh) {
  var xAxis = $('.c3-axis-x');
  var xTexts = xAxis.find('.tick').find('text');
  var diff = Math.round((dateHigh - dateLow) / (1000 * 60 * 60 * 24));
  var steps = Math.floor(diff / 5);
      
  $.each(xTexts, function (index) {
    $(this).css({
      display: 'none'
    });

    if (index % steps === 0) {
      $(this).css({
        display: 'block'
      });
    }
  });
}

var dateStart = new Date(2016, 0, 1);
var dateStop = new Date(2016, 1, 22);
var date1 = dateStart;
var date2 = dateStop;
var day;
var dates = ['x'];
var chart;
var rendered = false;

dates.push(getNiceDate(date1));

while(date2 >= date1) {
    date1 = new Date(date1.setDate(date1.getDate() + 1));
    dates.push(getNiceDate(date1));
}

chart = c3.generate({
  bindto: '#bar-chart',
  data: {
    x : 'x',
    columns: [
      dates,
      ['Bewerbungen',
        0, 0, 0, 30, 0, 0, 20, 0, 0, 0,
        0, 0, 0, 40, 0, 0, 20, 0, 0, 0,
        0, 0, 0, 50, 0, 0, 20, 0, 0, 0,
        0, 0, 0, 60, 0, 0, 20, 0, 0, 0,
        0, 0, 0, 70, 0, 0, 20, 0, 0, 0,
        0, 0, 0, 80
      ],
      ['Anrufe',
        2, 4, 6, 8, 10, 12, 14, 16, 18, 20,
        22, 24, 26, 28, 30, 32, 34, 36, 38, 40,
        42, 44, 46, 48, 50, 52, 54, 56, 58, 60,
        62, 64, 66, 68, 70, 72, 74, 76, 78, 80,
        82, 84, 86, 88, 90, 92, 94, 96, 98, 100,
        102, 104, 106, 108
      ],
      ['Emails',
        1, 1, 2, 3, 5, 8, 13, 21, 34, 55,
        89, 144, 233, 377, 610, 377, 233, 144, 89, 55,
        34, 21, 13, 8, 5, 3, 2, 1, 1, 3,
        5, 8, 13, 21, 34, 55, 89, 144, 233, 377,
        610, 377, 233, 144, 89, 55, 34, 21, 13, 8,
        5, 3, 2, 1
      ],
      ['Ansichten', 
        1, 2, 3, 4, 5, 6, 7, 8, 9, 10,
        25, 50, 30, 60, 35, 70, 40, 80, 45, 90,
        10, 10, 20, 40, 30, 60, 40, 80, 50, 100,
        15, 30, 45, 60, 75, 60, 30, 60, 15, 45,
        15, 15, 15, 60, 15, 30, 80, 75, 60, 60,
        100, 50, 60, 50
      ]
    ],
    type: 'bar',
    types: {
      Anrufe: 'bar',
      Emails: 'bar',
      Bewerbungen: 'bar',
      Ansichten: 'line', // could also be 'area'
    },
    colors: {
      Emails: '#ff0099',
      Anrufe: '#00ff99',
      Ansichten: '#9900ff',
      Bewerbungen: '#ff9900',
    },
    groups: [
      ['Bewerbungen', 'Anrufe', 'Emails']
    ],
    axes: {
      Anrufe: 'y',
      Emails: 'y',
      Ansichten: 'y2'
    }
  },
  axis: {
    x: {
      type: 'timeseries',
      tick: {
        culling: {
          max: 4 // the number of tick texts will be adjusted to less than this value
        },
        rotate: 45,
        multiline: false,
        format: '%Y.%m.%d'
      }
    },
    y: {
      label: {
        text:'Aktionen',
        position: 'outer-middle'
      }
    },
    y2: {
      show: true,
      label: {
        text: 'Ansichten',
        position: 'outer-middle'
      }
    }
  },
  zoom: {
    enabled: true,
    rescale: true,
    onzoomend: function (domain) {
      showXaxisTicks(domain[0], domain[1]);
    }
  },
  onrendered: function () {
    if (!rendered) {
      rendered = true;
      console.log('chart is rendered initially.');
      showXaxisTicks(dateStart, dateStop);
    }
  }
});

// var donutChart = c3.generate({
//     bindto: '#donut-chart',
//     data: {
//         columns: [
//             ["setosa", 4, 8, 12],
//             ["versicolor", 4, 8, 12, 24],
//             ["virginica", 4, 8, 12, 24, 48],
//         ],
//         type : 'donut'
//     },
//     donut: {
//         title: "Iris Petal Width"
//     }
// });