1

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.

lawless
  • 191
  • 1
  • 5
  • 15
  • Sorry but what are you trying to achieve? The fiddle you linked seems to fit perfectly, I can't see any x-axis being cluttered... Please highlight the problem. – RandomSeed Jun 06 '13 at 16:37
  • I am saying that works fine, mine does not.... My x axis is congested by all the dates that are pulled in. I want it to dynamically remove date titles on the x axis when the chart is shrunk. – lawless Jun 06 '13 at 16:54
  • Then perhaps it would be more relevant to create a fiddle with your actual data :) – RandomSeed Jun 06 '13 at 17:00
  • I just tried creating my first fiddle to show you what I want to do and all the result says is "http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" I have loaded everything from what I can see the correct way. I will keep at it. – lawless Jun 06 '13 at 17:28
  • http://jsfiddle.net/danlawless/q2gw4/15/ not working not sure what the issue is, I imagine it has something to do with the external json data source but I uploaded it. – lawless Jun 06 '13 at 17:40
  • http://lawless.dyndns-free.com/chart-output.png, there is what the output looks like. – lawless Jun 06 '13 at 17:47
  • Looks like this may be my root cause, http://stackoverflow.com/questions/8058136/highcharts-data-series-issue-with-ajax-json-and-php – lawless Jun 06 '13 at 21:20

1 Answers1

1

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.

Community
  • 1
  • 1
lawless
  • 191
  • 1
  • 5
  • 15
  • 2
    Why does the date need to be configured as "[Date.UTC(2011,11,08), 4]" why can't I just format it and send it to highcharts as the millisecond time? – lawless Jun 07 '13 at 14:07
  • http://docs.highcharts.com/#preprocessing-live-data This is just a portion of the json with the dates formatted the way the preprocessing doc explains how to [[1367208000000,52],[1367294400000,13],[1367380800000,83],[1367467200000,84],[1367553600000,0],[1367640000000,11],[1367726400000,95],[1367812800000,37],[1367899200000,93]] This does not work with the dateTimeLabelFormats either. – lawless Jun 07 '13 at 14:22
  • Another way to do this is to format date using tsv and then pass then format it, the autosizing happens automatically once you have the date correctly parsed and do not enter a tickeInterval. Followed this link to get it to work with tsv http://blueflame-software.com/blog/using-highcharts-with-php-and-mysql/ – lawless Jun 07 '13 at 20:31