in my morris.js graph the date on the X axis is adding the number 19 before the month-day date

Question

this is the sql to get the data from data base and puts the data in an array. also it splits the date from year-month-day format to month-day format

$sql = "SELECT * FROM Time WHERE Event_ID='$event' AND Student_ID='$runner'";
        $result=$conn->query($sql);     
        while($row = $result->fetch_assoc())
        {
            $date[]= date('m-d',strtotime($row['Date']));
            $time[]=$row['time'];
            $count=$count+1;
        }

this is the script that is used to create the graph.

new Morris.Line({
  // ID of the element in which to draw the chart.
  element: 'myfirstchart',
  // Chart data records -- each entry in this array corresponds to a point on
  // the chart.
  data: [     { day: '11-02', t:37},
      { day: '11-04', t:22},
    {day: '11-06', t: 83}
  ],
  // The name of the data record attribute that contains x-values.
  xkey: 'day',
  // A list of names of data record attributes that contain y-values.
  ykeys: ['t'],
  // Labels for the ykeys -- will be displayed when you hover over the
  // chart.
  labels: ['Time']
});


 
 
 
  
  
  


  
   Morris.js chart with PHP & Mysql
   Last 10 Years Profit, Purchase and Sale Data

user_2079345 · Answer

If you want to display the date in the x-axis without the year, you need to format it in javascript instead of in php. When you get a date like "11-05" from php, morris parses that back into a javascript date object, and it doesn't have the year part, so it ends up parsing the date as "May, 1911". Leave the formatting alone in php, and then set the formatting in morris with xLabelFormat, ie

 $date[] = $row['Date'];

and

  element: 'myfirstchart',
  xLabelFormat: function(date) { return (date.getMonth() + 1) + "-" + date.getDate(); }
  data: [ //...

Snippet:



 
  chart with PHP & Mysql | lisenme.com 
  
 
 
 
  
 
 
  


  
   Morris.js chart with PHP & Mysql
   Last 10 Years Profit, Purchase and Sale Data   
   


   
  
 

// this is the script that is used to create the graph.

in my morris.js graph the date on the X axis is adding the number 19 before the month-day date

1 Answers