Official:
https://c3js.org/samples/timeseries.html
D3.js (Required)
HTML Example:
|
1 2 3 4 5 6 |
<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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
$(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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
$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; |