CODEWITHSUNDEEP
highcharts
TheBook
TheBook

Reputation: 1708

Rendering the charts as columnrange type

I have the following chart I would like to render the working times intervalls as columnrange and palcing the charts close to the xAxis.

with this part of code in the code below

chart: {
    spacingTop: 0,
    paddingTop: 0,
    zoomType: 'x',

},

I am getting the following charts:

enter image description here

https://jsfiddle.net/62jq6zsd/

But I am not getting the right result.

Upvotes: 0

Views: 83

Answers (1)

jlbriggs
jlbriggs

Reputation: 17800

Putting your code into a fiddle, I can see that nothing is plotted:

Looking at your data, the reason is apparent. You have your data set up as;

{
  x: 1483358580000,
  y: 1
}

But the columnrange series type requires the data elements of low and high, with an optional/inferred x value.

In addition, you have points with null values for x, which does not work for Highcharts - there must always be an x value, whether set or inferred.

It's also unnecessary - use of null points to break a line series is needed because lines are meant to be continuous; the columnrange type already has the breaks built in.

And finally, you have your x and y mixed up - since you are inverting the chart, the axes swap places - x is the vertical axis, and y is the horizontal.

If your values are time, as in the 1483358580000 above, you need to specify two timestamps - one for the start, and one for the end of each bar segment.

Example from the Highcharts demo:

    data: [
        [-9.7, 9.4],
        [-8.7, 6.5],
        [-3.5, 9.4],
        [-1.4, 19.9],
        [0.0, 22.6],
        [2.9, 29.5],
        [9.2, 30.7],
        [7.3, 26.5],
        [4.4, 18.0],
        [-3.1, 11.4],
        [-5.2, 10.4],
        [-13.5, 9.8]
    ]

(in this example, the x value is determined by the order of the data points, and does not need to be set explicitly. In your case, you will need to specify the x value, since you want them all on the same line)

Demo Fiddle:

{{ EDIT }}

Using your chart as a base, here is an updated version.

Code (data based on yours, edited for demonstration)

xAxis: {
  categories: ['', 'Woring time'],
  title: {
    text: null
  },
  gridLineWidth: 0
},
yAxis: {
    type: 'datetime'
    },
series: [{
  data: [
            [1,1483337940000,1483337950000],
            [1,1483337970000,1483337990000],
            [1,1483338000000,1483338010000],
            [1,1483338030000,1483338070000]
        ]
}]

Fiddle:

{{ Edit again for comments }}

To reduce space between the series, you have a variety of options

1) reduce the height of your chart

2) increase the width of your bar

1/2) do both!

3) work with your axis min/max and minPadding/maxPadding settings, if you want one side of the series and not the other.

Option one, in a fiddle:

Option three:

Upvotes: 1

Related Questions