CODEWITHSUNDEEP
highcharts
Eduardo
Eduardo

Reputation: 1837

How to set xaxis label according my json result data?

Hi. I have this json result:

([{"total": 2797, "date": "13.12"}, {"total": 3252, "date": "14.12"}, {"total": 771, "date": "15.12"}, {"total": 669, "date": "16.12"}, {"total": 2962, "date": "17.12"}, {"total": 1, "date": "19.12"}])

I want set the date value on my xaxis label, but I'm not able to do that. Help?

Thanks!

Upvotes: 0

Views: 345

Answers (1)

wergeld
wergeld

Reputation: 14442

If all series points are going to be one-day increments and you want the xAxis date format to be day.Month you can do the following using the Date.UTC method:

Date.UTC(year,month,day,hours,minutes,seconds,millisec)

The year, month, and day are all required. So you will need to get that value as well. Note that months start at 0 and go to 11.

Then your data, in HighCharts format, would look like:

[Date.UTC(2012, 11, 13), 2797], [Date.UTC(2012, 11, 14), 3252], [Date.UTC(2012, 11, 15), 771], [Date.UTC(2012, 11, 16), 669], [Date.UTC(2012, 11, 17), 2962], [Date.UTC(2012, 11, 18), null], [Date.UTC(2012, 11, 19), 1]

To get your chart to plot cleanly you will also need to set a value for 12.18 which your currently do not do. I set it to null. This chart will not draw a line between null points but you can have it do so with connectNulls. Set it to true if you want to connect the nulls. It is set to false by default.

Now you want to format your xAxis to display dates like '13.12'. You do this with the formatter properties. To get your format use '%d.%m'. The date format options are listed here.

How you get your data into the HighCharts format depends on your source. There are multiple ways.

Demo

Upvotes: 1

Related Questions