CODEWITHSUNDEEP
phpmysqlhighcharts
lawless
lawless

Reputation: 191

Highcharts - format date for x-axis as well as autoscale (data from mysql)

I have done quite a bit of research and I am unsure what I am missing. I have a chart that is constructed from a mysql database and I have a date being pulled in to be displayed on the x-axis. However I want the date to not only be formatted differently, I want it to autoscale when the width of the chart changes similar to this....

http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/xaxis/type-datetime/

When you shrink the screen the chart auto scales the x-axis down respectively (ie, shows only 2 day tick interval rather then 1), also the date is displayed 1.Jan 2.Jan 3.Jan.

In my graph the date is autoformatted in a month-day-year, which is absolutely confusing. It is also displaying every tick for every day which clutters the x-axis.

Here is what I have and it doesn't seem to work....

        var options = {
            chart: {
                renderTo: 'container',
                defaultSeriesType: 'line',
            },
            title: {
                text: 'Instance Types per Customer'
            },
            xAxis: {
                type: 'datetime',
                dateTimeLabelFormats: {
                    day: '%m-%d'
                },
                tickInterval: 24 * 3600 * 1000
            },
            yAxis: {
                title: {
                    text: 'Cost ($)'
                },
            },
            series: [{
            }]
        }

I managed to get this to work instead of the dateTimeLabelFormats

               labels: {
                    formatter: function() {
                        var displayDate = Highcharts.dateFormat('%m/%d', this.value);
                        return displayDate; 
                    }
                }

My first issue was that the dates were not formatted in milliseconds, after convert to milliseconds in the data.php I managed to get the tooltip to recognize it was in date format, however I have not been able to get the built in dateTimeLabelFormats function from highcharts so if anyone has a suggestion on how to get that to work it would be appreciated. The display set is days in the last month.

I will try to reconstruct in fiddle but have never used the tool. Very new to highcharts.

Upvotes: 1

Views: 7351

Answers (1)

lawless
lawless

Reputation: 191

So it turns out my issue was in fact that I was bringing the data in through json and the date for the highcharts needed to be formed in a very specific way. The way that it needed to be formed is laid out quite nicely in this following post

Highcharts data series issue with ajax/json and PHP

I still have not found out how to do the auto scaling for the dates but this was the bigger of the two issues. Hope this helps people.

Upvotes: 1

Related Questions