How to plot dates in Chart.js

Question

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.

I tried writing a function that makes a list of all dates in that v=certain range in the format of

"date1", "date2", "date3", ...

and then places that variable string into the series of chart.js

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()]
        }
    ]

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.

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()]
        },

This code directly above will not work.

If any one has any suggestions on how to plot the data, please post below.

The genData method just generates random numbers

 function gendata() {
     var i = 0;
     var data = "";
     while (i < 365) {
         data = data + Math.round(Math.random() * 100) + ", ";
         i = i + 1;
     }
     return data;
 }

gendate method

function getDates(startDate, stopDate) {
    var dateArray = new Array();
    var currentDate = startDate;
    while (currentDate <= stopDate) {
        dateArray.push(new Date(currentDate));
        currentDate = currentDate.addDays(1);
    }
    dates = "";
    for (i = 0; i < dateArray.length; i++) {
        date = date + dateArray[i] + ", ";
    }
    return dates;
}

Answer 1

The problem is that there's a type mismatch at genDates. The labels array will evaluate as an array with a single string in it unlike in your original example. To work around this you could return an array directly and remove the wrapping array from your chart definition.