PHP & Javascript Date Issue

Question

I'm trying to print out an array of dates pulled from an API, which come out formatted as YYYYmmdd, i.e. 20160701. When I convert them to a friendlier format and then go to print them in Highcharts, it actually will do a mathematical calculation based on the operator being used to separate the date elements. Obviously that's not what I want it to do. So the first date is actually performing 7 minus 1 minus 2016, resulting in the -2010. Does anyone know what is causing this?

PHP Snippet

foreach ($arr['rows'] as $item){
 $dates[] = DateTime::createFromFormat('Ymd', $item[0])->format('m-d- Y');
 }

Javascript Highchart Plugin

$('#myChart').highcharts({
          xAxis: {
              categories: [
                <?php
                echo implode(',', $dates);
                ?>
              ]
          },

What the dates end up looking like:

could it be the extra space in your format call? format('m-d- Y'); should be format('m-d-Y');, right? — Rob M.
– Rob M., Commented Aug 9, 2016 at 16:45
Why not just use a datetime x axis type, and skip this hassle anyway? — jlbriggs
– jlbriggs, Commented Aug 9, 2016 at 16:48
If you are going to do it this way, though, use php's json_encode() function rather than implode(), ie: xAxis: { categories: <?php echo json_encode($dates); ?> } — jlbriggs
– jlbriggs, Commented Aug 9, 2016 at 17:21

Arnauld · Accepted Answer · 2016-08-09 20:50:53Z

3

The problem is that you're not injecting any quotes in the Javascript source.

What you get is something like:

$('#myChart').highcharts({
      xAxis: {
          categories: [ 7-1-2016 ]   //  <--- should be [ "7-1-2016" ]
      }
});

which is evaluated as categories: [ -2010 ] on the Javascript side.

You should do:

$('#myChart').highcharts({
      xAxis: {
          categories: [
            <?php
              echo '"'.implode('","', $dates).'"';
            ?>
          ]
      }
});

Or if you prefer to have this fixed in the PHP code that is building this array:

foreach ($arr['rows'] as $item){
    $dates[] = DateTime::createFromFormat('Ymd', $item[0])->format('"m-d-Y"');
}

EDIT: as suggested by jlbriggs, a better approach would be to use json_encode().

At least on $dates ...

$('#myChart').highcharts({
      xAxis: {
          categories: <?php echo json_encode($dates); ?>
      }
});

... or on the whole object passed to highcharts() (assuming it's entirely built on the PHP side):

$('#myChart').highcharts(<?php echo json_encode($highChartsObject); ?>);

edited Aug 9, 2016 at 20:50

answered Aug 9, 2016 at 16:54

Arnauld

6,1882 gold badges17 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jlbriggs Over a year ago

While that works, it's basically the (open-to-error) long-way-around to accomplish what json_encode() does for you explicitly.

Arnauld Over a year ago

@jlbriggs - Yes. I focused on the 'why is it not working as expected' explanation, but you're of course perfectly right. Answer edited accordingly.

Collectives™ on Stack Overflow

PHP & Javascript Date Issue

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related