Display month and date in chart categories - Javascript highcharts

Javascript examples for highcharts:Chart Series

  1. HOME
  2. Javascript
  3. highcharts
  4. Chart Series

Description

Display month and date in chart categories

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script> 
      <script type="text/javascript">
$(function () {//from   w w  w .  j a  va  2 s  . com
 var months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
var data =  {"Categoires":["2015-10-31","2015-10-30","2015-11-09","2015-11-08","2015-11-07","2015-11-06","2015-11-10","2015-11-05","2015-11-04","2015-11-12","2015-11-03","2015-11-11"],"Series":[0,2,0,0,0,2,0,2,1,1,4,0]};
    newcat =[];
    $.each(data.Categoires,function(i,v){
     newcat.push(v.slice(-2)+months[parseInt(v.slice(5,8)+1)]);
    });
        $('#container').highcharts({
            title: {
                text: 'title',
                x: -20 //center
            },
            subtitle: {
                text: 'subtitle',
                x: -20
            },
            xAxis: {
                categories: newcat
            },
            yAxis: {
                title: {
                    text: 'yaxis'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                valueSuffix: 'dd'
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle',
                borderWidth: 0
            },
            series: [{
                name: 'data',
                data: data.Series
            },]
        });
    });

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>  
   </body>
</html>

Related Tutorials