CODEWITHSUNDEEP
javascripthighcharts
Curtis
Curtis

Reputation: 2704

HighCharts showing wrong month

I'm currently using HighCharts to embed some data into my user interface which shows sales profits from the past 7 days, here's the current Javascript that I'm using:

function weeks_ago(date_object) {
        var d = new Date();
        var newDate = d.setDate(d.getDate()-6);
        var date = new Date(newDate);
        return date.getDate();
}

var d = new Date();

function createGraph(jsonObj) {
    $('#container').highcharts({
        credits: {
            enabled: false
        },
        chart: {
            type: 'line'
        },
        title: {
            text: 'Profit Graph'
        },
        subtitle: {
            text: 'Data from the past week'
        },
        xAxis: {
            type: "datetime",
               dateTimeLabelFormats: {
                    month: "%e. %b",
                    year: "%b"
                }
        },
        yAxis: {
            title: {
                text: 'Profit'
            },
            min: 0
        },
        tooltip: {
            formatter: function() {
                return '<span style="color:#33333;">'+this.series.name +': '+ Highcharts.numberFormat(this.y,0);
            }
        },
        series: [
            {
                name: 'Platform1',
                data: jsonObj.Platform1,
                pointStart: Date.UTC(d.getUTCFullYear(), d.getUTCMonth(), weeks_ago(new Date())),
                pointInterval: 24 * 3600 * 1000,
                color: '#55CCA2',
            }, {
                name: "Platform2",
                data: jsonObj.Platform2,
                pointStart: Date.UTC(d.getUTCFullYear(), d.getUTCMonth(), weeks_ago(new Date())),
                pointInterval: 24 * 3600 * 1000,
                color: '#3498db',
            }
        ]
    });
};

My jsonObj array holds the following:

{"Platform1":[0,0,0,14580,105585,75410,19212],"Platform2":[0,0,0,0,0,0,0]}

But for some reason my graph's showing 30th Oct through till the 5th November? the data points are in the correct place, just the xAxis labels are wrong.

Upvotes: 0

Views: 265

Answers (1)

ewolden
ewolden

Reputation: 5803

Your function weeks_ago returns the date 6 days ago. But when you set pointStart, you only set the date, not month and year. So for today you have the following:

Today: 2017 10 06
Today - 6 days = 2017 09 30
You set pointStart = Date.UTC(2017, 10, 30).

So if you make new functions that returns the month, and year you could make it work.

Or change it so that weeks_ago returns the date object, like this:

function weeks_ago(date_object) {
    var d = new Date();
    var newDate = d.setDate(d.getDate()-6);
    return new Date(newDate);
}

pointstart: Date.UTC(weeks_ago(new Date()).getUTCFullYear(),
                     weeks_ago(new Date()).getUTCMonth(), 
                     weeks_ago(new Date()).getDate())

Upvotes: 1

Related Questions