CODEWITHSUNDEEP
javascriptjqueryhighcharts
Hauri
Hauri

Reputation: 275

Highcharts step line with gaps and series like [x,y]

I'm trying to generate a line plot in Highcharts similar to this:

|---------------|
     |-----|
          |--------------|
                                    |-------|
                                        |------|

A sample series data has the following shape:

[{"name":"AA01", "data": [[1423102786000,37],[1423102786000,37],[1423124408000,118],[1423124408000,118],[1423139198000,0],[1423139198000,0],[1423139305000,0],[1423139305000,0],[1423139305000,48],[1423139305000,48],[1423142136000,15],[1423142136000,15],[1423147902000,37],[1423147902000,37],[1423153292000,0],[1423153292000,0],[1423461724000,43],[1423461724000,43],[1423461724000,89],[1423461724000,89],[1423461724000,52],[1423461724000,52],[1423461724000,4],[1423461724000,4],[1423461724000,5],[1423461724000,5],[1423480654000,10],[1423480654000,10],[1423480953000,0],[1423480953000,0]]}]

The x axis is an integer while the y axis is a date. As you can see, all data points go in pairs to get the above layout: the value in y axis is two consecutives times the same, while it changes only in the x axis date. I've followed some links to achieve this with no success:

Link1

Link2

Link3

As you can see, the main difference between these examples and my code is that I don't have a fixed categories axis, and that forces me to add the series data as [x,y] pairs. I've tried things like [x,null], [null,null] and just null but all of them produced unexpected results, mainly with the x axis labels (showing as initial label 01-01-1970) and zooming problems (when I zoom on an area with points it suddenly appears on around 01-01-1970). This makes me think that Highcharts is assuming 01-01-1970 when a date is null, which messes the entire chart. This is my code, although it's quite simple anyway:

function plot(unit, data) {
                $("#chart" + unit).highcharts({
                    credits: {
                        enabled: false
                    },
                    chart: {
                        zoomType: 'xy'
                    },
                    title: {
                        text: unit
                    },
                    xAxis: {
                        title: {
                            text: 'Date'
                        },
                        type: 'datetime',
                        labels: {
                            format: '{value:%Y-%m-%d}',
                            rotation: 45,
                            align: 'left'
                        },
                    },
                    yAxis: {
                        min: 0,
                        title: {
                            text: 'Event number'
                        }
                    },
                    legend: {
                        enabled: false
                    },
                    tooltip: {
                        formatter: function () {
                            return '<b>' + convertDate(new Date(this.x)) + '</b><br/>' +
                                    this.series.name + ': ' + this.y + '<br/>' +
                                    'Total: ' + this.point.stackTotal;
                        }
                    },
                    //plotOptions: {},
                    series: data
                });
            }//END_FUNCTION

Could anyone help with this?

Upvotes: 0

Views: 704

Answers (2)

Paweł Fus
Paweł Fus

Reputation: 45079

There is user request for adding Gantt charts to the Highcharts library. Try one of solutions posted there.

Upvotes: 0

Topher Hunt
Topher Hunt

Reputation: 4813

Hmm, you're saying your data doesn't work well when shaped as [x, y] pairs but it seems to me that each point has 2 pieces of data: date (x) and that other integer (y). I remember that Highcharts needs to be specifically told whether your X axis is made up of categorical buckets (like nominal variables) or a continuous line (like dates or a number range, where many or most "ticks" on the line won't have a data point present for them). It sounds like your use case needs the latter. Have you looked into Highcharts' documentation to learn about the difference?

Take a look at this example chart: http://www.highcharts.com/demo/spline-irregular-time/grid and in the source code, note the following designation for the X axis:

xAxis: {
  type: 'datetime',
},

Also note that when you scroll down to the data points defined for that chart (still in the source), you can see they had to specifically create a JS Date object for every single data point. Since your date intervals are irregular, you'll probably have to do the same thing:

series: [{
  name: 'Winter 2007-2008',
  // Define the data points. All series have a dummy year
  // of 1970/71 in order to be compared on the same x axis. Note
  // that in JavaScript, months start at 0 for January, 1 for February etc.
  data: [
      [Date.UTC(1970,  9, 27), 0   ],
      [Date.UTC(1970, 10, 10), 0.6 ],
      [Date.UTC(1970, 10, 18), 0.7 ],
      [Date.UTC(1970, 11,  2), 0.8 ],

How to set up a Gantt chart in Highcharts is a whole different matter. I don't have experience with this but I've seen elegant examples online, so hopefully this won't pose as much trouble.

Good luck!

Upvotes: 1

Related Questions