Equal x-axis ticks for time series data

Question

I have a timeseries data from which I am trying to build a stackedAreaChart with nvd3. Series look like this:

xdata = ['2017-11-17', '2017-12-17', '2018-01-17', '2018-02-17', '2018-03-17', '2018-04-17']
ydata = [7277L, 9579L, 6291L, 6715L, 8743L, 9879L]

I convert dates in xdata to unix format and it becomes like this:

xdata = [1510873200000L,
   1513465200000L,
   1516143600000L,
   1518822000000L,
   1521241200000L,
   1523916000000L]

Then I create a chart:

chart = stackedAreaChart(name='stackedAreaChart', 
                             height=400, 
                             width=400 
                             ,x_is_date=True
                            )
chart.add_serie(name = 'Chart1', y = ydata, x = xdata )

The problem is I want all xdata to be shown as ticks on x-axis or at least customize it in case of more data. I get output as on the picture below.

As you can see, dates are not equally displayed. I would like it to be 17 Nov 2017, 17 Dec 2017, 17 Jan 2018...

I haven't worked with js before, but everything I tried was unfortunate. I tried to add extra series to change x-axis format, but the problem us that extra series are added after plot is built and effect is not seen.

score 0 · Answer 1 · answered May 22 '18 at 08:16

My guess is that the only way to reliably solve this is to ensure that all of your data sets are of equal length, and that they all start and end with the exact same x-axis value, and that if an x-axis value is defined in one of the datasets, it is also defined in all the other data sets, and that the data sets are all ordered by increasing x-axis value.

As I am an amateur with nvd3, it is quite possible that this level of consistency is not necessary, but it probably couldn't make your problem any worse.

score 0 · Accepted Answer · answered May 22 '18 at 14:57

So here was posted the same problem.

The approach is to assign tickValues for x-axis to the xdata. Here is a solution I wrote:

chart = stackedAreaChart(name='stackedAreaChart' 
                         ,height=500 
                         ,width=900 
                         #,x_is_date=True
                         ,use_interactive_guideline = True
                         ,margin_bottom = 120
                        )
chart.create_x_axis(name = "xAxis", date = True,  format = '%b %Y' )
chart.axislist['xAxis']['tickValues']="""Object.values(datum[0])[0].map(x => x.x)"""

datum is data variable generated in a js script in the output of chart.htmlcontent

Before I searched documentation for python-nvd3 but assigning tickValues is not documented there so I had to do it manually with javascript. I hope this helps somebody.

Equal x-axis ticks for time series data

2 Answers2