high chart date format in x-axis - highcharts

Question

I am using column chart in highchart in this i want to show x-axis in date format which i fetch from the google analytics data of my account.and i want to view the date on x-axis and which is not coming in format i want it in formatted way.
it comes like this way "20151001" and i want it to be like this "01-10-2015"
my data is come from google analytic account so i cant use highchart data
this is my code for this
php code from which i get date
$matrics='ga:sessions,ga:pageviews';
$results_top_pages = $analytics->data_ga->get(
'ga:109200082',
date('Y-m-d',strtotime('-6 days')),
date('Y-m-d',strtotime('now')),
$matrics,
array(
'dimensions' => 'ga:date',
// 'sort' => '-ga:pageviews', for acsending and decending page view sorting
'filters'=>'ga:browser%3D~%5E'.$browser.'',
'max-results' => 50
));
if(is_array($results_top_pages->getRows())){
echo '<ol>';
foreach($results_top_pages->getRows() as $top_page){
echo '<li>';
echo $top_page[0];
echo ' - '.$top_page[1].' ';
echo ' - '.$top_page[2].' ';
$data[]=$top_page[2];
$date[]=$top_page[0];
echo '</li>';
}
echo '</ol>';
}
by var_dump of $date i get date in this format:
array(7) {
[0]=>
string(8) "20150930"
[1]=>
string(8) "20151001"
[2]=>
string(8) "20151002"
[3]=>
string(8) "20151003"
[4]=>
string(8) "20151004"
[5]=>
string(8) "20151005"
[6]=>
string(8) "20151006"
}
Edited code from here ::
This is js code for highchart:
$data[]=$top_page[2];
$date[]=date('d-m-y',strtotime($top_page[0]));
// echo '</li>';
}
echo '</ol>';
}
var_dump($date[0]);
$datefirst= date('U', strtotime($date[0])) * 1000;
?>
<script>
$(function () {
$('#container').highcharts({
//alert("call");
chart: {
type: 'column'
},
title: {
text: 'Weekly Traffic'
},
subtitle: {
//text: 'Source: WorldClimate.com'
},
xAxis: {
categories: [<?php echo join($date,','); ?>],
max:6
},
yAxis: {
title: {
text: 'Views'
}
},
plotOptions: {
line: {
dataLabels: {
enabled: true,
connectNulls: false
},
enableMouseTracking: false
}
},
series: [{
pointStart: '<?php echo $datefirst; ?>',
pointInterval: 86400000, //one day
pointRange: 86400000, //one day
name: '<?php echo $browser; ?>',
data: [<?php echo join($data, ',') ?>],
//pointStart: Date.UTC(2015, 0, 1),
// pointInterval: 24 * 3600 * 1000
},
]
});
});
</script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Answer 1

Ok, so, working from your example, you just need to format the dates properly.
Something like this:
foreach($results_top_pages->getRows() as $top_page){
echo '<li>';
echo $top_page[0];
echo ' - '.$top_page[1].' ';
echo ' - '.$top_page[2].' ';
$data[]=date('d-m-Y', strtotime($top_page[2])); //add the date function
$date[]=date('d-m-Y', strtotime($top_page[0])); //add the date function
echo '</li>';
}
echo '</ol>';
}
If you want to use a datetime x axis type, which I would suggest any time you're displaying time series data, you would just change the format to use millisecond epoch time, like this:
date('U', strtotime($top_page[2])) * 1000
But instead of building an array of categories, you would set that value as the x value of your data.
Alternatively, if the data is always going to be a daily value, you can set your pointStart property as the start time, and your pointInterval property as 1 day (86400000 milliseconds)
{{edit ----------
An example of the last method:
http://jsfiddle.net/jlbriggs/xabj5qgp/
You supply:
A start datetime stamp in epoch format
An interval between points (ie one day - in milliseconds)
Your array of data points, one data point per interval (day)
The chart does the rest.
{{Edit for comments:
So, you can put the pointStart and pointInterval properties in one of two places - either in the plotOptions, or in the series properties directly.
pointRange isn't necessarily required, but it is usually a good idea as it fixes some potential spacing issues with columns/bars.
So in your case, take this:
series: [{
name: '<?php echo $browser; ?>',
data: [<?php echo join($data, ',') ?>]
},
And add the properties there:
series: [{
pointStart: __your_start_date__,
pointInterval: 86400000, //one day
pointRange: 86400000, //one day
name: '<?php echo $browser; ?>',
data: [<?php echo join($data, ',') ?>]
},
You will need to retrieve that start date from your data source and format it as epoch time in milliseconds (as demonstrated above)