CODEWITHSUNDEEP
angularjshighcharts
googytech
googytech

Reputation: 479

How to Display Month and Year in xAxis of Highcharts datetime graph

I have an dateline type of graph displayed using both angularjs and highcharts. The date value is retreived from JSON response as say 20120905(YYYYMMDD). As i have read in many forums I converted my date to UTC format for plotting in graph. The graph is plotted correctly, but my xaxis is dispalying on they UTC values like 1,370G for all the date time values. 

$scope.chartConfig = {
            options: {
                chart: {
                    type: 'line',
                    zoomType: 'x'
                }
            },
            credits: {
                enabled: false
            },
            series: [{
                name: '% of Accounts',
                data: outerSeries   /* Contains the data  similar to this. [[1368835200000, 2.9], [1371513600000, 0.5], [1374105600000, 1.94], [1376784000000, 1.44], [1379462400000, 1.18]] */
            }],  
            title: {
             text: tableTitle
            },
            xAxis: [{

                labels: {format: '{value:%Y}' },
                /*dateTimeLabelFormats:{
                  month:'%Y',
                  year:'%Y'
                },*/
              type:"datetime"
            }],
            yAxis: {title: {text: 'TestReport'}},
            tooltip: {
              formatter: function() {
              var myDate = new Date(this.x);
              var newDateMs = Date.UTC(myDate.getUTCFullYear(),myDate.getUTCMonth()-1,myDate.getUTCDate());
              return '<b>'+ this.series.name +'</b><br/>'+Highcharts.dateFormat('%e. %b', newDateMs) +': '+ this.y;}
            },
            //xAxis: {currentMin: 0, currentMax: 10, minRange: 1, title:{text:'Time Period'}},
            //xAxis: {ordinal:false,type:'datetime', dateTimeLabelFormats: {  year: '%b%Y' }, title:{text:'Time Period'}},
            loading: false
        }
    });

Upvotes: 1

Views: 21786

Answers (1)

Ethan Wu
Ethan Wu

Reputation: 938

I think the only thing you need to change is the configuration for xAxis.

Try the following(only highlight the xAxis part):

$scope.chartConfig = {
        // other configuration
        xAxis: {
          type:"datetime",
          dateTimeLabelFormats:{
            month: '%b %e, %Y'
          }  // label in x axis will be displayed like Jan 1, 2012
        },
        // other configuration
}

I used your sample data and created a working fiddle: http://jsfiddle.net/WEgmq/1/

Feel free to play with the fiddle. And you might aware that, if you comment out type:"datetime", the xAxis will display the label like 1,370G as you mentioned. Also, since the interval of your sample data is one month, the label format of xAxis won't be changed if you configure day format in dateTimeLabelFormats. Instead, you need to configure the month format since the minimum interval is one month.

Playing with the dateTimeLabelFormats, minTickInterval you can obtain what you want.

Upvotes: 4

Related Questions