Highstock highcharts irregular data gets wrong x-scale

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

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    }]  });});