Highcharts datetime axis, disable time part and show only dates - Javascript highcharts

Javascript examples for highcharts:Chart Axis

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

Description

Highcharts datetime axis, disable time part and show only dates

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="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
      <script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script> 
      <script type="text/javascript" src="http://sprintf.googlecode.com/files/sprintf-0.7-beta1.js"></script> 
      <script type="text/javascript">
    $(window).load(function(){/*  w  w w  .j av a  2  s .  c  o  m*/
$(document).ready(function() {
    var chartOptions = {
        "chart": {
            "renderTo": "container"
        },
        "tooltip": {
            "formatter": function() {
                var params = {
                    subtype: this.series.name,
                    day: Highcharts.dateFormat('%d/%m/%Y', this.x),
                    count: this.y,
                    text: 'sent'
                };
                var format = '<b>%(subtype)s</b><br>%(day)s: %(count)s %(text)s';
                return sprintf(format, params);
            }
        }
    };
    var chart = $.extend(true, {
        "xAxis": [{
            "type": "datetime",
            "labels": {
                "formatter": function() {
 return Highcharts.dateFormat("%b %e", this.value)
                }
            }
        }],
        "yAxis": [{
            "min": 0,
            "max": 100,
            "allowDecimals": false,
            "title": {
                "text": null
            }}],
        "series": [{
            "data": [[1341266400000, 0], [1341352800000, 0], [1341439200000, 0], [1341525600000, 0], [1341612000000, 0], [1341698400000, 0]],
            "name": "User SMS"},
        {
            "data": [[1341266400000, 3], [1341352800000, 0], [1341439200000, 0], [1341525600000, 0], [1341612000000, 0], [1341698400000, 0]],
            "name": "System SMS"},
        {
            "data": [[1341266400000, 0], [1341352800000, 0], [1341439200000, 0], [1341525600000, 0], [1341612000000, 0], [1341698400000, 0]],
            "name": "User Newsletters"},
        {
            "data": [[1341266400000, 0], [1341352800000, 0], [1341439200000, 0], [1341525600000, 0], [1341612000000, 0], [1341698400000, 0]],
            "name": "System Newsletters"}],
        "chart": {
            "type": "spline"
        },
        "credits": {
            "enabled": false
        },
        "exporting": {
            "enabled": false
        },
        "global": {
            "useUTC": false
        },
        "title": {
            "text": null
        },
        "subtitle": {
            "text": null
        }
    }, chartOptions);
    new Highcharts.Chart(chart);
});
    });

      </script> 
   </head> 
   <body> 
      <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>  
   </body>
</html>

Related Tutorials