Official:

https://c3js.org/samples/timeseries.html

D3.js (Required)

https://d3js.org/

HTML Example:

<link href="{{BASE_URL}}plugins/c3/c3.min.css" rel="stylesheet">

<script src="{{BASE_URL}}plugins/c3/d3.min.js"></script>
<script src="{{BASE_URL}}plugins/c3/c3.min.js"></script>

<div id="chart"></div>

Javascript Example:

$(document).ready(function(){
  x_labels = $.parseJSON(x_labels);

  sell_data = $.parseJSON(sell_data);
  sell_data.unshift('賣單');

  var chart = {
    bindto: '#chart',
    data: {
      x: 'x', 
      columns: [
        x_labels,
        sell_data
      ]
    },
    axis: {
      x: { 
        type: 'timeseries',
        tick: {
            format: '%m/%d'
        },
        show: true 
      },
      y: { show: true }
    },
    color: { pattern: ['#000'] },
    legend: { hide: true }
  };

  c3.generate(chart);
});

PHP example:

        $from = Carbon::now()->subDays(7);
        $to = Carbon::now()->subDay();
        $data['from'] = $from;
        $data['to'] = $to;

        $x_labels = ['x'];
        $sell_data = ['賣單'];

        $current = $from->copy();
        while($current->gt($to) == false){
            $x_labels[] = $current->toDateString();

            $n = TicketM::day_number($current, TicketM::TYPE_SELL);
            $sell_data[] = $n;

            $current = $current->addDay();
        }
        //logg($buy_data);

        $data['x_labels'] = $x_labels;
        $data['sell_data'] = $sell_data;