title: Translate x axis points into years
body: <p>I need some help with rendering Highcharts. I am trying to create a highchart so that the data that I get from my Rails Server will render this chart.</p>
  
  <p><img src="https://i.stack.imgur.com/2dmOp.png" alt="enter image description here"></p>
  
  <p>So far, I've only gotten my chart to look like the one below:</p>
  
  <p><img src="https://i.stack.imgur.com/hOjVD.png" alt="enter image description here"></p>
  
  <p>There are obviously many things wrong with my chart compared to the one that I am trying to create. The visual aspect of the chart doesn't concern me. What concerns me is the xAxis of the chart. I absolutely just cannot seem to get my highcharts to have yearly values. No matter what I do, the time gets rendered in milliseconds and this is F$@#ING infuriating.</p>
  
  <p>Below is my <kbd>chart.js.erb</kbd> file:</p>
  
  <pre><code>var presentDay = new Date();
  var year = presentDay.getFullYear();
  var year = year - 3;
  var month = presentDay.getMonth();
  var day = presentDay.getDay();
  
  $(function() {
    new Highcharts.Chart({
      chart: {
        renderTo: "graphModal",
        height: 450,
        width: 700,
        borderWidth: 5,
        borderColor: '#525252'
      },
      title: {
        text: "Project Comparison Graph"
      },
      subtitle: {
        text: '# of contributors who made changes to the project source code each month'
      },
      xAxis: {
        type: 'datetime',
        dateTimeLabelFormats: {
          year: '%Y'
        }
      },
      yAxis: {
        title: {
          text: 'Contributors'
        }
      },
      plotOptions: {
        series: {
          pointStart: Date.UTC(year, month, day),
          pointIntervalUnit: 'month',
          lineColor: 'red'
        }
      },
      series: [{
        data: [1, 2, 3, 4, 5, 6, 30, 45, 78, 43, 32, 20,1, 2, 3, 4, 5, 6, 30, 45, 78, 43, 32, 20,1, 2, 3, 4, 5, 6, 30, 45, 78, 43, 32, 20]
      }]
    });
  });
  </code></pre>
  
  <p>The JavaScript code at the very top of the file creates a date from 3 years ago from which I start my chart on <code>pointStart</code>. I have 36 plot points. One for each month of the year. If I wanted data from three years ago the code will execute April 10, 2012 up until now. Instead of a nice clean chart I get what you see above. How do I fix this? I got this code from this example on jsFiddle:   </p>
  
  <pre><code> $(function () {
      $('#container').highcharts({
          xAxis: {
              type: 'datetime',
              dateTimeLabelFormats: {
                  month: '20' + '%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,29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4,29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
              pointStart: Date.UTC(2012, 0, 1),
              pointIntervalUnit: 'month'
          }]
      });
  });
  </code></pre>
  
  <p>I got it to work on the fiddle so isn't it working now?</p>