CODEWITHSUNDEEP
javascriptjqueryflot
user3798384
user3798384

Reputation: 73

Creating a Flot line chart with dates

I am trying to create a line chart using Flot that shows the month and year on the x axis corresponding to a number on the y axis.

Here is my code:

var data= [];
var y = 1;
var x;  

var record=xmlDoc.getElementsByTagName("record");
for(i=0;i<record.length;i++)
{
    x = record[i].getElementsByTagName("date_of_consent")[0].childNodes[0].nodeValue;
    x = x * 1000
    y = y + i;
    newArray = [x, y];
    data.push(newArray);
}

    var dataset = [{label: "Enrollment Over Time",data: data}];

    var options = {
        series: {
            lines: { show: true },
            points: {
                radius: 3,
                show: false
            }
        }

    xaxis: {
        mode: "time",
        timeformat: "%y/%m"
    }
    };

    $(document).ready(function () {
        $.plot($("#flot-placeholder"), dataset, options);
    });

For reference the date_of_consent field has values similar to this: 1376092800000. The problem seems to be converting this number to a date. I would appreciate any suggestions. Thanks.

Upvotes: 0

Views: 1132

Answers (1)

Mark
Mark

Reputation: 108567

You have a javascript syntax error:

var options = {
    series: {
        lines: { show: true },
        points: {
            radius: 3,
            show: false
        }
    }, <-- YOU ARE MISSING THIS COMMA!!
    xaxis: {
        mode: "time",
        timeformat: "%y/%m"
    }
};

As you code, frequently inspect the javascript console for errors.

Upvotes: 3

Related Questions