列范围图中的多个时间间隔

Question

Im trying to create a columnrange chart with several categories displaying an interval during a year. It all works fine, however, Im now stuck with the problem that for one of the categories, I need two intervals on the same row.

So, for example, in the fiddle attached below, I have each category as from-to months.

Eg:

category 1: Mar->Jun

category 2: July->Aug

etc.

But now Im stuck with eg this:

categoty 3: Mar->Jun, Sep->Oct

Here is the fiddle: http://jsfiddle.net/t9rsf6n7/1/

series: [
                {
                    name: '',
                    color: '#795548',
                    data: [
                        {
            low:Date.UTC(2017,1,1),
            high:Date.UTC(2017,3,31),
            color:'#ffae3d'
          },
          {
            low:Date.UTC(2017,2,1),
            high:Date.UTC(2017,4,30),
            color:'#ff3d3d'
          }                     ]
                }
            ]

Any help is really appreciated.

Answer 1

Set the x value for each data point, and for your 2 points in category 3, they'll both have the same x value.

    series: [
    {
        name: '',
        color: '#795548',
        data: [
          {
            x:0,
            low:Date.UTC(2017,1,1),
            high:Date.UTC(2017,3,31),
            color:'#ffae3d'
          },
          {
            x:1,
            low:Date.UTC(2017,2,1),
            high:Date.UTC(2017,4,30),
            color:'#ff3d3d'
          },
                        {
            x:2,
            low:Date.UTC(2017,2,1),
            high:Date.UTC(2017,5,30),
            color:'#3d3dff'
          },
                        {
            x:2,
            low:Date.UTC(2017,8,1),
            high:Date.UTC(2017,9,30),
            color:'#3d3dff'
          },
        ]
    }]

http://jsfiddle.net/t9rsf6n7/2/