title: How to plot dates in Chart.js
body: <p>I am trying to make a chart for my website that takes a year's worth of dates (entries for each day), and then plots it on the graph.</p>
  
  <p>I tried writing a function that makes a list of all dates in that v=certain range in the format of </p>
  
  <pre><code>"date1", "date2", "date3", ...
  </code></pre>
  
  <p>and then places that variable string into the series of chart.js</p>
  
  <pre><code>var lineChartData = {
      labels: ["January", "February", "March", "April", "May", "June", "July", "August"],
      datasets: [
          {
              label: "My First dataset",
              fillColor: "rgba(220,220,220,0.2)",
              strokeColor: "rgba(220,220,220,1)",
              pointColor: "rgba(220,220,220,1)",
              pointStrokeColor: "#fff",
              pointHighlightFill: "#fff",
              pointHighlightStroke: "rgba(220,220,220,1)",
              data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
          },
          {
              label: "My Second dataset",
              fillColor: "rgba(151,187,205,0.2)",
              strokeColor: "rgba(151,187,205,1)",
              pointColor: "rgba(151,187,205,1)",
              pointStrokeColor: "#fff",
              pointHighlightFill: "#fff",
              pointHighlightStroke: "rgba(151,187,205,1)",
              data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]
          }
      ]
  </code></pre>
  
  <p>When I have it like code above, it will produce the graph. But I need it to be dynamic, so I have functions that produce the dates and data. But when calling those functions into the variable linechartData, the chart does not work.</p>
  
  <pre><code>var lineChartData = {
      labels: [genDates()],
      datasets: [
          {
              label: "My First dataset",
              fillColor: "rgba(220,220,220,0.2)",
              strokeColor: "rgba(220,220,220,1)",
              pointColor: "rgba(220,220,220,1)",
              pointStrokeColor: "#fff",
              pointHighlightFill: "#fff",
              pointHighlightStroke: "rgba(220,220,220,1)",
              data: [genData()]
          },
  </code></pre>
  
  <p>This code directly above will not work.</p>
  
  <p>If any one has any suggestions on how to plot the data, please post below.</p>
  
  <p>The genData method just generates random numbers</p>
  
  <pre><code> function gendata() {
       var i = 0;
       var data = "";
       while (i &lt; 365) {
           data = data + Math.round(Math.random() * 100) + ", ";
           i = i + 1;
       }
       return data;
   }
  </code></pre>
  
  <p>gendate method</p>
  
  <pre><code>function getDates(startDate, stopDate) {
      var dateArray = new Array();
      var currentDate = startDate;
      while (currentDate &lt;= stopDate) {
          dateArray.push(new Date(currentDate));
          currentDate = currentDate.addDays(1);
      }
      dates = "";
      for (i = 0; i &lt; dateArray.length; i++) {
          date = date + dateArray[i] + ", ";
      }
      return dates;
  }
  </code></pre>