How to set PointIntervals per month in HighChart

Question

I used HighCharts to create the number of users created on a monthly basis. I managed to show the month on the x axis and I set pointInterval as shown below

pointInterval: 24 * 3600 * 1000 * 31

But this was done blindly, and he will not build the points correctly. I need to outline the items on the 1st of each month. But the above interval helps tie points monthly, and not on the first day of the month. This example describes my problem. Tooltip gives a clear idea. Here is my code

series: [{ type: 'area', name: 'CDP Created', pointInterval: 24 * 3600 * 1000 * 31, pointStart: Date.UTC(2005, 0, 01), dataGrouping: { enabled: false }, data: [0, 0, 0, 0, 0, 0, 0, 148.5, 216.4, 194.1, 95.6, 54.4] }] 

In any case, the installation of pointInterval depends on the month. Because if I just set pointInterval as above, it will calculate every 31 days. This creates a problem when the month has 28 or 30 days. How to achieve this. In addition, adjusting the width of the div container makes the x axis values ​​incorrect. thanks in advance

Answer 1

Unfortunately, this is not possible - pointInterval simply increases by a given number, so an irregular value is not possible. However, you can set the direct value of x, see http://jsfiddle.net/kUBdb/2/

The good thing about JS is that

 Date.UTC(2007, 10, 10) == Date.UTC(2005,34, 10) 

returns true, so you can freely increase the month by one.

Answer 2

You can dynamically fill in the xaxis value (by month) and click along with the yxais data. The code will look like this:

 var s = {name: 'serial name', data: []}, serialData = [], categories = []; var flatData = [10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120], startDate = Date.UTC(2000, 1, 1); // Set the xaxis value as first day of month for (var i = 0; i < flatData.length; i++) { var d = new Date(); d.setTime(startDate); d.setMonth(d.getMonth() + i); categories.push(d.getTime()); } for (var i = 0; i < flatData.length; i++) { s.data.push([categories[i], flatData[i]]); } serialData.push(s); $('#canvas').highcharts({ ...... xAxis: { type: 'datetime', } serial: serialData }); 

Then the xaxis tags will be "by month". Here is an example: JSFiddle .

The idea is imported here: HighCharts Demo .

Answer 3

You can manually generate date tags and add them to the data list as follows:

 series: [{ data: [["Jan 1, 2005", 0], ["Feb 1, 2005", 0], ..., ["Dec 1, 2005", 54.4]], pointInterval: 24 * 3600 * 1000 * 31, pointStart: Date.UTC(2005, 0, 01) }] 

Thus, you can use pointInterval as it is (for an approximate view along the x axis) and use the tag at points in the diagram (for accurate data).

If you zoom in on the chart, you will see a slight overlap between the points and ticks of x-Axis, but if you don't need perfect alignment, this should do the trick.

To generate date tags (for example, “January 1, 2005”), I would do the following:

 var data = [0, 0, 0, 0, 0, 0, 0, 148.5, 216.4, 194.1, 95.6, 54.4]; var date = new Date("January 1, 2005"); var monthNameList = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]; for (i = 0; x < data.length; i++) { var stringDate = monthNameList[date.getMonth()] + " 1, " + date.getFullYear(); resultList.push(stringDate); date.setMonth(date.getMonth() + 1); } 

Then add each item to the data.

Edited: I think the first answer above is a very neat way to generate date stamps. (Check out JSFiddle)