CODEWITHSUNDEEP
javascriptjqueryhighcharts
steffokeffo
steffokeffo

Reputation: 83

Dates on xaxis with highcharts

I need to have dates on my xaxis on my chart. I collect my data through a range datepicker where the user can enter a range of 14 days. I need the first value on the xaxis to be the start date of the range and the last value to be the end date of the range. i want the the xaxis labels to read something like "27th Jan 2015" , "28th Jan 2015" or something in that direction and each tic to be 1 day. I've read the API-documentation and i've played around alot with the settings of the chart but for some reason i can not get it to work.

            $('#graphColumn').highcharts({
                title: {
                    text: '',
                    x: -20 //center
                },
                xAxis: {
                    categories: [dayArray[0], dayArray[1], dayArray[2], dayArray[3], dayArray[4], dayArray[5], dayArray[6], dayArray[7], dayArray[8], dayArray[9], dayArray[10], dayArray[11], dayArray[12], dayArray[13]]
                },
                yAxis: {
                    title: {
                        text: ''
                    },
                    plotLines: [{
                        value: 0,
                        width: 1,
                        color: '#808080'
                    }]
                },
                tooltip: {
                    valueSuffix: ''
                },
                legend: {
                    layout: 'vertical',
                    align: 'right',
                    verticalAlign: 'middle',
                    borderWidth: 0
                },
                credits: {
                    enabled: false
                },
                series: [{
                    showInLegend: false,
                    name: ' ',
                    data: series,
                    color: '#77B7C5',
                    marker: {
                        symbol: 'circle'
                    }
                }, {
                    showInLegend: false,
                    name: '1 år sedan',
                    data: series1yearago,
                    color: "#71C73E",
                    marker: {
                        symbol: 'circle'
                    }
                }]
            });

here is my chart. I know the xaxis has categories set now but thats only for the moment, i know it should be datetime. My series are regular int arrays with one number on each index. I would apreciate any help that could be given here!

Edit: Here is a working jsfiddle example: http://jsfiddle.net/g0p00tLv/1

Upvotes: 0

Views: 1601

Answers (1)

jlbriggs
jlbriggs

Reputation: 17800

Your data, and how it is formatted, is what we really need to see.

You need to do one of two things:

1) pass your data as an array of [x,y] pairs, where x is either the epoch time stamp (in miliseconds), or a date.UTC object

2) pass your data as a single array of y values, and use the pointStart and pointInterval properties to set the date axis properly.

reference:

If you need more info, set up a working fiddle example and post it here.

Upvotes: 1

Related Questions