时间序列水平条形图，用于运行查询可视化

Question

I need to build a time series horizontal bar chart that looks something like this. Each bar represents a query running on the cluster. The length of the bar represents the duration. Each query has start time and end time. Multiple queries can have either same start time or end time or both. Queries may be running in parallel.

I am using highcharts/highstocks charting library, wondering what kind of Highchart config I need to use to accomplish it. Please advise.

Answer 1

I would use a columnrange series. Here you have an example of it: https://jsfiddle.net/BlackLabel/6bu8gtaw It is hardcoded for now, you can edit it and adjust to your requirements.

All used API properties you can find here: https://api.highcharts.com/highcharts

Highcharts.chart('container', {

  chart: {
    type: 'columnrange',
    inverted: true,
    height: 200,
    borderWidth: 1,
    borderColor: '#d3d3d3'
  },

  legend: {
    align: 'right',
    verticalAlign: 'middle',
    layout: 'vertical'
  },

  plotOptions: {
    series: {
      groupPadding: 0,
      pointPadding: 0.1,
      grouping: false,
      pointWidth: 6,
      borderWidth: 0
    }
  },

  title: {
    text: null
  },

  xAxis: {
    visible: false,
    reversed: false,
    min: -3,
    max: 7
  },

  yAxis: {
    opposite: true,
    min: -3,
    max: 18
  },

  series: [{
    data: [
      [0, 10, 13]
    ]
  }, {
    data: [
      [1, 2, 5]
    ]
  }, {
    data: [
      [1, 6, 9]
    ]
  }, {
    data: [
      [1, 12, 16]
    ]
  }, {
    data: [
      [2, 3, 7]
    ]
  }, {
    data: [
      [2, 7, 12]
    ]
  }, {
    data: [
      [3, 0, 4]
    ]
  }, {
    data: [
      [3, 5, 10]
    ]
  }, {
    data: [
      [3, 10, 14]
    ]
  }, {
    data: [
      [3, 16, 18]
    ]
  }, {
    data: [
      [4, 0, 5]
    ]
  }, {
    data: [
      [4, 6, 11]
    ]
  }, {
    data: [
      [4, 11, 15]
    ]
  }, {
    data: [
      [4, 16, 18]
    ]
  }]

});