Highstock highcharts irregular data gets wrong x-scale

Question

I have irregular data. Chart draws well when I use highcharts:

$(function() {
  var chart = new Highcharts.Chart({
    chart: {
      renderTo: 'chart'
  },
  xAxis: {
    type: 'datetime'
  },
  series: [{
    name: 'Volume',
    data: chart_arr,
  }]
});
});

http://jsfiddle.net/KnTaw/9/

But I have a lot of data so I need to zoom on the date and choose highstock. Then a strange thing happens: the x-axis become non-linear.

$(function() {
  var chart2 = new Highcharts.StockChart({
    chart: {
      renderTo: 'chart2'
    },
    rangeSelector: {
      selected: 0
    },
    xAxis: {
      type: 'datetime'
    },
    series: [{
      name: 'val',
      data: chart_arr,
      type : 'area',
    }]
  });
});

http://jsfiddle.net/Mc3mW/1/

Please note that the data for half an hour range Jan 6 20:00-20:30 allocates more space than 2 days Jan 11-13. (Of course the data is the same.)

How can I force x-axis at highstock to become linear? Or How can I enable a bottom zoom tool for highcharts? Thank you.

Answer 1

You will need to set the xAxis.ordinal property to false, this is true by default. True value indicates the points should be placed at fixed intervals w.r.t space (pixels), and False changes points to be placed at fixed intervals w.r.t. time

xAxis: {       
    ordinal: false
}

Linear x-axis | Highstock @ jsFiddle

Answer 2

It is possible to zoom your chart using HighCharts JavaScript library. The property that you should set is zoomType

Decides in what dimentions the user can zoom by dragging the mouse. Can be one of x, y or xy. Defaults to "".

Here you can see an exmaple here. In order to zoom a specific place, hold the mouse left button and select the area you want to zoom.

HTML code:

<div id="container" style="height: 400px"></div>​

JavaScript code:

$(function () {
    var chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'line',
            zoomType: 'x'
        },
        
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        
        series: [{
            data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]        
        }]
    });
});​

Also, a "Reset zoom" button is automatically shown on zoom event and it's easy to manipulated what part of the chart will be shown when it is pressed.

Anyway, for more information and examples of zoom settings, event and the button you should refer to "Highcharts Options Reference" here. Just enter "zoom" in the search.

As to your other question: "How to make the StockChart linear" according to HighStock API the default type of the chart is linear. What is happening here is caused by the area option that you have set in the series property. Just remove in like this and you will get your linear chart:

$(function() {
  var chart2 = new Highcharts.StockChart({
    chart: {
      renderTo: 'chart2'
    },
    rangeSelector: {
      selected: 0
    },
    xAxis: {
      type: 'datetime'
    },
    series: [{
      name: 'val',
      data: chart_arr
    }]
  });
});