Answer to Stack Overflow question: http://stackoverflow.com/questions/37678900/highcharts-use-datetime-for-chart-generation/37680480

author(s): Mike Zavarello

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>

<select id="chooseDateRange">
  <option value="">- choose a date range -</option>
  <option value="1day">one day</option>
  <option value="1week">one week</option>
  <option value="1month">one month</option>
  <option value="1year">one year</option>
  <option value="5years">five years</option>
</select>
<div id="container" style="height: 400px; width: 500px"></div>

JavaScript

$(function () {

  // initialize local variables for the chart's options
  var selectedPointInterval = 0;
  var selectedPointIntervalUnit = 'day';
    
	// set values based on which date range the user chose
  function setDateRangeAndLabels(value) {
    switch(value) {
    	case "1day":
        selectedPointIntervalUnit = 'day';
				selectedPointInterval = 1;
        break;
      case "1week":
       	selectedPointIntervalUnit = 'day';
				selectedPointInterval = 7;
        break;
      case "1month":
        selectedPointIntervalUnit = 'month';
				selectedPointInterval = 1;
        break;
      case "1year":
        selectedPointIntervalUnit = 'year';
				selectedPointInterval = 1;
        break;
      case "5years":
        selectedPointIntervalUnit = 'year';
				selectedPointInterval = 5;
        break;
      default:
        selectedPointIntervalUnit = 'day';
				selectedPointInterval = 1;
        break;
    }
    
    chartOptions.plotOptions.series.pointInterval = selectedPointInterval;
    chartOptions.plotOptions.series.pointIntervalUnit = selectedPointIntervalUnit;
    
  };

	// define the chart's options
	var chartOptions = {
        plotOptions: {
					series: { 
          allowPointSelect: true,
        connectNulls: true,
        point: {
          events: {
            select: function() {
              var point = this;

              point.update(null);
            }
          }
        },
          pointStart: Date.UTC(2010, 0, 1) }
        },
        xAxis: { 
        	type: 'datetime',
          dateTimeLabelFormats: {
            day: '%d.%m',
            week: '%d.%m',
            month: '%m.%y',
            year: '%m.%y'
          }
        },
        series: [{
					data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        }]
    };

    // draw the chart
    setDateRangeAndLabels('1day');
    var chart = $('#container').highcharts(chartOptions);
    
    // redraw the chart based on new date...