CODEWITHSUNDEEP
phpjsonhighcharts
Hamza Iftikhar
Hamza Iftikhar

Reputation: 15

How to display Day and Date in Highcharts Column Graph using PHP

I'm trying to display Day and Date in Highcharts Coulmn Graph using PHP. I want to print the Day & Date in (Thursday 26/12/2019) format. Right now its only displaying the Day name and I'm passing the day names using JSON. I tried solving this but I was not able to resolve this problem. 

$rate_names = [];
$dates = [];
$day_names = [];
$stars_data = [];

$from_date2 = $from_date;
while (strtotime($from_date2) <= strtotime($to_date)) {

    $day_names[] = date('l', strtotime($from_date2));
    $dates[] = $from_date2;
    $from_date2 = date('Y-m-d', strtotime('+1 day', strtotime($from_date2)));
}



Highcharts.chart('column', {
        chart: {
            type: 'column'
        },
        xAxis: {
            categories: <?= json_encode($day_names) ?>,
            crosshair: true
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Count'
            }
        },
        tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y:.1f} </b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        series: JSON.parse('<?= $processed_stars_data ?>')
    });

Upvotes: 0

Views: 709

Answers (2)

ttrasn
ttrasn

Reputation: 4851

To change format of xAxis on highcharts you can do this:

from this documention you can use mix of below.

%a: Short weekday, like 'Mon'
%A: Long weekday, like 'Monday'
%d: Two digit day of the month, 01 to 31
%e: Day of the month, 1 through 31
%w: Day of the week, 0 through 6
%b: Short month, like 'Jan'
%B: Long month, like 'January'
%m: Two digit month number, 01 through 12
%y: Two digits year, like 09 for 2009
%Y: Four digits year, like 2009
%H: Two digits hours in 24h format, 00 through 23
%k: Hours in 24h format, 0 through 23
%I: Two digits hours in 12h format, 00 through 11
%l: Hours in 12h format, 1 through 12
%M: Two digits minutes, 00 through 59
%p: Upper case AM or PM
%P: Lower case AM or PM
%S: Two digits seconds, 00 through 59
%L: Milliseconds (naming from Ruby)

from this list %A %d/%m/%y returns time like Thursday 26/12/2019.

so just add or update your xAxis like this:

 xAxis: {
      type: 'datetime',
      labels: {
           formatter: function() {
                return Highcharts.dateFormat('%A %d/%m/%y', this.value);
           }
      }
 },

Upvotes: 1

Sebastian Wędzel
Sebastian Wędzel

Reputation: 11633

There are two solutions for this case. First - set the xAxis.categories array in the following format from your server site:

['Thursday 26/12/2019', 'Thursday 27/12/2019', 'Thursday 28/12/2019', ...etc];

Demo:https://jsfiddle.net/BlackLabel/fp04ksL7/

Or from Highcharts site use the Highcharts formatter callback feature to get wanted format. Like here:

Demo: http://jsfiddle.net/BlackLabel/8sd4k7wp/1/

API: https://api.highcharts.com/highcharts/xAxis.categories

API: https://api.highcharts.com/highcharts/xAxis.labels.formatter

Upvotes: 0

Related Questions