We Keep Coding

Filtering by time in Google charts [duplicate]

I want to add zoom buttons on top of AreaChart like AnnotationChart. I searched for the same but didn't get the solution. Can anyone tell me the solution?
I require buttons like this:
Thanks

you'll have to add the buttons manually,
when clicked, set the visible range on the range filter using the state property
rangeFilter.setState({
range: {
start: currentRange.range.start,
end: new Date(currentRange.range.start.getTime() + visibleRange)
}
});
see following working snippet,
each button represents the visible range in milliseconds,
when clicked, set the range on the filter...
google.charts.load('current', {
packages: ['controls', 'corechart']
}).then(function () {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Date');
data.addColumn('number', 'Positive');
data.addColumn('number', 'Negative');
data.addRows([
[new Date(2017, 11, 20), 10, null],
[new Date(2017, 11, 21), 5, null],
[new Date(2017, 11, 22), 0, 0],
[new Date(2017, 11, 23), null, -5],
[new Date(2017, 11, 24), null, -10],
[new Date(2017, 11, 25), null, -5],
[new Date(2017, 11, 26), 0, 0],
[new Date(2017, 11, 27), 10, null],
[new Date(2017, 11, 28), 5, null],
[new Date(2017, 11, 29), 0, 0],
[new Date(2018, 0, 20), 00, null],
[new Date(2018, 0, 21), 5, null],
[new Date(2018, 0, 22), 0, 0],
[new Date(2018, 0, 23), null, -5],
[new Date(2018, 0, 24), null, -10],
[new Date(2018, 0, 25), null, -5],
[new Date(2018, 0, 26), 0, 0],
[new Date(2018, 0, 27), 00, null],
[new Date(2018, 0, 28), 5, null],
[new Date(2018, 0, 29), 0, 0],
[new Date(2018, 1, 20), 10, null],
[new Date(2018, 1, 21), 5, null],
[new Date(2018, 1, 22), 0, 0],
[new Date(2018, 1, 23), null, -5],
[new Date(2018, 1, 24), null, -10],
[new Date(2018, 1, 25), null, -5],
[new Date(2018, 1, 26), 0, 0],
[new Date(2018, 1, 27), 10, null],
[new Date(2018, 1, 28), 5, null],
[new Date(2018, 1, 29), 0, 0],
[new Date(2018, 2, 20), 10, null],
[new Date(2018, 2, 21), 5, null],
[new Date(2018, 2, 22), 0, 0],
[new Date(2018, 2, 23), null, -5],
[new Date(2018, 2, 24), null, -10],
[new Date(2018, 2, 25), null, -5],
[new Date(2018, 2, 26), 0, 0],
[new Date(2018, 2, 27), 10, null],
[new Date(2018, 2, 28), 5, null],
[new Date(2018, 2, 29), 0, 0],
[new Date(2018, 3, 20), 10, null],
[new Date(2018, 3, 21), 5, null],
[new Date(2018, 3, 22), 0, 0],
[new Date(2018, 3, 23), null, -5],
[new Date(2018, 3, 24), null, -10],
[new Date(2018, 3, 25), null, -5],
[new Date(2018, 3, 26), 0, 0],
[new Date(2018, 3, 27), 10, null],
[new Date(2018, 3, 28), 5, null],
[new Date(2018, 3, 29), 0, 0],
[new Date(2018, 4, 20), 10, null],
[new Date(2018, 4, 21), 5, null],
[new Date(2018, 4, 22), 0, 0],
[new Date(2018, 4, 23), null, -5],
[new Date(2018, 4, 24), null, -10],
[new Date(2018, 4, 25), null, -5],
[new Date(2018, 4, 26), 0, 0],
[new Date(2018, 4, 27), 10, null],
[new Date(2018, 4, 28), 5, null],
[new Date(2018, 4, 29), 0, 0],
[new Date(2018, 5, 20), 10, null],
[new Date(2018, 5, 21), 5, null],
[new Date(2018, 5, 22), 0, 0],
[new Date(2018, 5, 23), null, -5],
[new Date(2018, 5, 24), null, -10],
[new Date(2018, 5, 25), null, -5],
[new Date(2018, 5, 26), 0, 0],
[new Date(2018, 5, 27), 10, null],
[new Date(2018, 5, 28), 5, null],
[new Date(2018, 5, 29), 0, 0],
[new Date(2018, 6, 20), 10, null],
[new Date(2018, 6, 21), 5, null],
[new Date(2018, 6, 22), 0, 0],
[new Date(2018, 6, 23), null, -5],
[new Date(2018, 6, 24), null, -10],
[new Date(2018, 6, 25), null, -5],
[new Date(2018, 6, 26), 0, 0],
[new Date(2018, 6, 27), 10, null],
[new Date(2018, 6, 28), 5, null],
[new Date(2018, 6, 29), 0, 0],
[new Date(2018, 9, 20), 10, null],
[new Date(2018, 9, 21), 5, null],
[new Date(2018, 9, 22), 0, 0],
[new Date(2018, 9, 23), null, -5],
[new Date(2018, 9, 24), null, -10],
[new Date(2018, 9, 25), null, -5],
[new Date(2018, 9, 26), 0, 0],
[new Date(2018, 9, 27), 10, null],
[new Date(2018, 9, 28), 5, null],
[new Date(2018, 9, 29), 0, 0],
[new Date(2018, 11, 20), 10, null],
[new Date(2018, 11, 21), 5, null],
[new Date(2018, 11, 22), 0, 0],
[new Date(2018, 11, 23), null, -5],
[new Date(2018, 11, 24), null, -10],
[new Date(2018, 11, 25), null, -5],
[new Date(2018, 11, 26), 0, 0],
[new Date(2018, 11, 27), 10, null],
[new Date(2018, 11, 28), 5, null],
[new Date(2018, 11, 29), 0, 0],
]);
var rangeFilter = new google.visualization.ControlWrapper({
controlType: 'ChartRangeFilter',
containerId: 'filter-range',
options: {
filterColumnIndex: 0,
ui: {
chartType: 'AreaChart',
chartOptions: {
chartArea: {
width: '100%',
left: 36,
right: 18
},
height: 72
}
}
}
});
var chart = new google.visualization.ChartWrapper({
chartType: 'AreaChart',
containerId: 'chart-area',
options: {
height: 280,
legend: {
alignment: 'end',
position: 'top'
},
animation: {
duration: 500,
easing: 'in',
startup: true
},
chartArea: {
height: '100%',
width: '100%',
top: 36,
left: 36,
right: 18,
bottom: 36
}
}
});
$('#range-buttons button').on('click', function (sender) {
var currentRange = rangeFilter.getState();
var visibleRange = parseInt($(sender.target).data('range'));
if (isNaN(visibleRange)) {
rangeFilter.setState(null);
} else {
rangeFilter.setState({
range: {
start: currentRange.range.start,
end: new Date(currentRange.range.start.getTime() + visibleRange)
}
});
}
rangeFilter.draw();
});
var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard'));
dashboard.bind(rangeFilter, chart);
dashboard.draw(data);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<div id="dashboard">
<div id="range-buttons">
<span>Zoom: </span>
<button class="ui-button ui-widget ui-corner-all" data-range="3600000">1h</button>
<button class="ui-button ui-widget ui-corner-all" data-range="86400000">1d</button>
<button class="ui-button ui-widget ui-corner-all" data-range="432000000">5d</button>
<button class="ui-button ui-widget ui-corner-all" data-range="604800000">1w</button>
<button class="ui-button ui-widget ui-corner-all" data-range="2592000000">1m</button>
<button class="ui-button ui-widget ui-corner-all" data-range="7776000000">3m</button>
<button class="ui-button ui-widget ui-corner-all" data-range="15552000000">6m</button>
<button class="ui-button ui-widget ui-corner-all" data-range="31104000000">1y</button>
<button class="ui-button ui-widget ui-corner-all">max</button>
</div>
<div id="chart-area"></div>
<div id="filter-range"></div>
</div>

It turns out you can use the AnnotationChart directly to display an AreaChart instead of a LineChart. It is actually already using an ComboChart internally, which has a default seriesType of 'line', but you can turn it into an area chart just by setting the 'areaOpacity' to a non-zero value by adding this to your chart options:
var options = {
...
chart: {
areaOpacity: 0.3
}
}

Highcharts - how to prevent xAxis redraw when using addSeries?

I have a highstocks scatter chart and after the series data is initialised I add a line of best fit (once I've calculated the endpoints) using addSeries.
The problem I am having is that when I add my new series the xAxis datetime labels all disappear (they are originally drawn correctly). It seems like because the new series only has two points, the chart redraws the xAxis to cater for the new series and draws it with only a single datetime label.
Looks very similar to this issue which was never solved
How can I avoid this happening?
I can't share my actual code as it's embedded in a Java widget on a proprietary framework but this Fiddle shows the same behaviour
Highcharts.chart('container', {
chart: {
type: 'scatter',
zoomType: 'x'
},
title: {
text: 'Random data'
},
xAxis: {
title: {
enabled: true,
text: 'Height (cm)'
},
type: 'datetime' //,
// startOnTick: true,
// endOnTick: true,
// showLastLabel: true
},
exporting: {
buttons: {
customButton: {
text: 'Add Series',
onclick: function() {
var newRegressionLineSeries = {
type: 'line',
name: 'Line series',
data: [
[Date.UTC(2015, 2, 26), 0.8],
[Date.UTC(2015, 6, 28), 0.7]
],
marker: {
enabled: false
},
states: {
hover: {
lineWidth: 0
}
},
enableMouseTracking: false
};
this.addSeries(newRegressionLineSeries);
}
}
}
},
plotOptions: {
scatter: {
marker: {
radius: 5,
states: {
hover: {
enabled: true,
lineColor: 'rgb(100,100,100)'
}
}
},
states: {
hover: {
marker: {
enabled: false
}
}
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x} cm, {point.y} kg'
}
}
},
series: [{
name: 'Data',
color: 'rgba(223, 83, 83, .5)',
data: [
[Date.UTC(2015, 2, 26), 0.9188],
[Date.UTC(2015, 2, 27), 0.9184],
[Date.UTC(2015, 2, 29), 0.9188],
[Date.UTC(2015, 2, 30), 0.9231],
[Date.UTC(2015, 2, 31), 0.9319],
[Date.UTC(2015, 3, 1), 0.9291],
[Date.UTC(2015, 3, 2), 0.9188],
[Date.UTC(2015, 3, 3), 0.9109],
[Date.UTC(2015, 3, 5), 0.9091],
[Date.UTC(2015, 3, 6), 0.9154],
[Date.UTC(2015, 3, 7), 0.9246],
[Date.UTC(2015, 3, 8), 0.9276],
[Date.UTC(2015, 3, 9), 0.9382],
[Date.UTC(2015, 3, 10), 0.9431],
[Date.UTC(2015, 3, 12), 0.9426],
[Date.UTC(2015, 3, 13), 0.9463],
[Date.UTC(2015, 3, 14), 0.9386],
[Date.UTC(2015, 3, 15), 0.9357],
[Date.UTC(2015, 3, 16), 0.9293],
[Date.UTC(2015, 3, 17), 0.9254],
[Date.UTC(2015, 3, 19), 0.9251],
[Date.UTC(2015, 3, 20), 0.9312],
[Date.UTC(2015, 3, 21), 0.9315],
[Date.UTC(2015, 3, 22), 0.9323],
[Date.UTC(2015, 3, 23), 0.9236],
[Date.UTC(2015, 3, 24), 0.9196],
[Date.UTC(2015, 3, 26), 0.9201],
[Date.UTC(2015, 3, 27), 0.9184],
[Date.UTC(2015, 3, 28), 0.9106],
[Date.UTC(2015, 3, 29), 0.8983],
[Date.UTC(2015, 3, 30), 0.8909],
[Date.UTC(2015, 4, 1), 0.8928],
[Date.UTC(2015, 4, 3), 0.8941],
[Date.UTC(2015, 4, 4), 0.8972],
[Date.UTC(2015, 4, 5), 0.8940],
[Date.UTC(2015, 4, 6), 0.8808],
[Date.UTC(2015, 4, 7), 0.8876],
[Date.UTC(2015, 4, 8), 0.8925],
[Date.UTC(2015, 4, 10), 0.8934],
[Date.UTC(2015, 4, 11), 0.8964],
[Date.UTC(2015, 4, 12), 0.8917],
[Date.UTC(2015, 4, 13), 0.8805],
[Date.UTC(2015, 4, 14), 0.8764],
[Date.UTC(2015, 4, 15), 0.8732],
[Date.UTC(2015, 4, 17), 0.8737],
[Date.UTC(2015, 4, 18), 0.8838],
[Date.UTC(2015, 4, 19), 0.8969],
[Date.UTC(2015, 4, 20), 0.9014],
[Date.UTC(2015, 4, 21), 0.8999],
[Date.UTC(2015, 4, 22), 0.9076],
[Date.UTC(2015, 4, 24), 0.9098],
[Date.UTC(2015, 4, 25), 0.9110],
[Date.UTC(2015, 4, 26), 0.9196],
[Date.UTC(2015, 4, 27), 0.9170],
[Date.UTC(2015, 4, 28), 0.9133],
[Date.UTC(2015, 4, 29), 0.9101],
[Date.UTC(2015, 4, 31), 0.9126],
[Date.UTC(2015, 5, 1), 0.9151],
[Date.UTC(2015, 5, 2), 0.8965],
[Date.UTC(2015, 5, 3), 0.8871],
[Date.UTC(2015, 5, 4), 0.8898],
[Date.UTC(2015, 5, 5), 0.8999],
[Date.UTC(2015, 5, 7), 0.9004],
[Date.UTC(2015, 5, 8), 0.8857],
[Date.UTC(2015, 5, 9), 0.8862],
[Date.UTC(2015, 5, 10), 0.8829],
[Date.UTC(2015, 5, 11), 0.8882],
[Date.UTC(2015, 5, 12), 0.8873],
[Date.UTC(2015, 5, 14), 0.8913],
[Date.UTC(2015, 5, 15), 0.8862],
[Date.UTC(2015, 5, 16), 0.8891],
[Date.UTC(2015, 5, 17), 0.8821],
[Date.UTC(2015, 5, 18), 0.8802],
[Date.UTC(2015, 5, 19), 0.8808],
[Date.UTC(2015, 5, 21), 0.8794],
[Date.UTC(2015, 5, 22), 0.8818],
[Date.UTC(2015, 5, 23), 0.8952],
[Date.UTC(2015, 5, 24), 0.8924],
[Date.UTC(2015, 5, 25), 0.8925],
[Date.UTC(2015, 5, 26), 0.8955],
[Date.UTC(2015, 5, 28), 0.9113],
[Date.UTC(2015, 5, 29), 0.8900],
[Date.UTC(2015, 5, 30), 0.8950],
[Date.UTC(2015, 6, 1), 0.8950],
[Date.UTC(2015, 6, 2), 0.8750],
[Date.UTC(2015, 6, 3), 0.8650],
[Date.UTC(2015, 6, 4), 0.8550],
[Date.UTC(2015, 6, 5), 0.8150],
[Date.UTC(2015, 6, 6), 0.8100],
[Date.UTC(2015, 6, 7), 0.8070],
[Date.UTC(2015, 6, 8), 0.8050],
[Date.UTC(2015, 6, 9), 0.7990],
[Date.UTC(2015, 6, 10), 0.7900],
[Date.UTC(2015, 6, 11), 0.7850],
[Date.UTC(2015, 6, 12), 0.7800],
[Date.UTC(2015, 6, 13), 0.7750],
[Date.UTC(2015, 6, 14), 0.7700],
[Date.UTC(2015, 6, 15), 0.7650],
[Date.UTC(2015, 6, 16), 0.7600],
[Date.UTC(2015, 6, 17), 0.7550],
[Date.UTC(2015, 6, 18), 0.7500],
[Date.UTC(2015, 6, 19), 0.7450],
[Date.UTC(2015, 6, 20), 0.7400],
[Date.UTC(2015, 6, 21), 0.7350],
[Date.UTC(2015, 6, 22), 0.7250],
[Date.UTC(2015, 6, 23), 0.7150],
[Date.UTC(2015, 6, 24), 0.7050],
[Date.UTC(2015, 6, 25), 0.6900],
[Date.UTC(2015, 6, 26), 0.6750],
[Date.UTC(2015, 6, 27), 0.6600],
[Date.UTC(2015, 6, 28), 0.6300],
]
}]
});

An easy workaround would be to create a new axis and put the lines with insufficient points on that axis.
I updated the fiddle you provided to achieve this in the following way:
Add new xAxis:
xAxis: [{
id: '0',
title: {
enabled: true,
text: 'Height (cm)'
},
type: 'datetime'
},{
id: '1', //new axis ID
type: 'datetime',
visible: false,
linkedTo: '0'
}],
New lines are added to the new xAxis:
var newRegressionLineSeries = {
xAxis: '1', //Added this
type: 'line',
...
}
Working example: https://jsfiddle.net/xs9toj13/9/

How to show all data in Highchart

How do I ensure that the data are close to each other & sorting by datetime. I want show all data with datetime
var charts = Highcharts.chart('container', {
xAxis: {
type: 'datetime'
},
series: [{
type: 'area',
data: [
[Date.UTC(2015, 9, 25, 14, 13, 00), 3.500],
[Date.UTC(2015, 9, 25, 14, 13, 02), 3.501],
[Date.UTC(2015, 9, 25, 14, 13, 04), 3.502],
[Date.UTC(2015, 9, 25, 14, 13, 06), 3.505],
[Date.UTC(2015, 9, 25, 14, 13, 08), 3.509],
[Date.UTC(2015, 9, 25, 14, 13, 10), 3.507],
[Date.UTC(2015, 9, 25, 14, 13, 12), 3.510],
[Date.UTC(2015, 9, 25, 14, 13, 14), 3.525],
[Date.UTC(2015, 9, 25, 14, 13, 16), 3.536],
[Date.UTC(2015, 9, 25, 14, 13, 18), 3.575],
[Date.UTC(2015, 9, 25, 14, 13, 20), 3.595],
[Date.UTC(2015, 9, 25, 14, 13, 22), 3.514],
[Date.UTC(2015, 9, 25, 14, 13, 24), 3.525],
[Date.UTC(2015, 9, 25, 14, 13, 26), 3.536],
[Date.UTC(2015, 9, 25, 14, 13, 28), 3.514],
[Date.UTC(2015, 9, 25, 14, 13, 30), 3.510],
[Date.UTC(2015, 9, 25, 14, 13, 32), 3.523],
[Date.UTC(2015, 9, 25, 14, 13, 34), 3.596],
[Date.UTC(2015, 9, 26, 18, 13, 34), 4.596]
]
}]
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

In addition to what #Z. Bagley wrote, to resolve this problem you can use couple solutions. The first one would be concerning using Highstock chart. In Highstock chart there is a property called ordinal (true by default) which distributes points equally on xAxis. Secondly, you can use breaks along with setting a new xAxis extremes to decrease distance between the last two dates. You can also try to add a scrollbar.
API Reference:
http://api.highcharts.com/highstock/xAxis.ordinal
http://api.highcharts.com/highcharts/xAxis.breaks
http://api.highcharts.com/highstock/scrollbar
Examples:
http://jsfiddle.net/pbdor59x/ - using Highstock and ordinal property
http://jsfiddle.net/abwpqs19/ - using breaks
http://jsfiddle.net/4cc2n3sp/ - using scrollbar

Highcharts series rendering problems

I'm working with Highcharts and Highstock and my chart is working weird; it shows vertical lines between markers.
As you can see, Vertical lines appears and they shouldn't.

Your data is filled with duplicate x values, as in this snippet taken from the last few elements of your data array:
[Date.UTC(2015, 0, 31, 6, 38, 0), 1.32905],
[Date.UTC(2015, 0, 31, 6, 38, 0), 1.30528],
[Date.UTC(2015, 0, 31, 10, 8, 0), 1.49073],
[Date.UTC(2015, 0, 31, 10, 8, 0), 1.46641],
[Date.UTC(2015, 0, 31, 12, 5, 0), 1.33667],
[Date.UTC(2015, 0, 31, 12, 5, 0), 1.33403],
[Date.UTC(2015, 0, 31, 14, 5, 0), 1.39598],
[Date.UTC(2015, 0, 31, 14, 5, 0), 1.50467],
[Date.UTC(2015, 0, 31, 15, 40, 0), 1.29815],
[Date.UTC(2015, 0, 31, 15, 40, 0), 1.27599],
Remove duplicate x values from your data if you do not want them to be plotted in this manner.

highcart.js pointInterval for 15 days datetime x-axis

I want the time interval to be half month for x-axis. I figured out I can use pointInterval, but I am not sure why it doesn't work as expected
http://jsfiddle.net/nizsu/otatsrbq/
I expect the x-axis value to be: Aug 26, Sep 11, Sep 26
html
<div class="module" id="changelist">
<div id="chart1" style="min-width: 90%; height: 400px; margin: 0 auto"></div>
</div>
js
$(function () {
$('#chart1').highcharts({
xAxis: {
type: 'datetime',
pointInterval: 13 * 24 * 3600 * 1000, //half month interval
pointStart: Date.UTC(2014, 7, 26),
dateTimeLabelFormats: {
month: '%b %e',
year: '%b'
}
},
series: [{
name: 'New Visits',
data: [
[Date.UTC(2014, 7, 26), 50],
[Date.UTC(2014, 7, 27), 60],
[Date.UTC(2014, 7, 28), 65],
[Date.UTC(2014, 7, 29), 70],
[Date.UTC(2014, 7, 30), 20],
[Date.UTC(2014, 7, 31), 10],
[Date.UTC(2014, 8, 1), 75],
[Date.UTC(2014, 8, 2), 80],
[Date.UTC(2014, 8, 3), 85],
[Date.UTC(2014, 8, 4), 77],
[Date.UTC(2014, 8, 5), 70],
[Date.UTC(2014, 8, 6), 20],
[Date.UTC(2014, 8, 7), 17],
[Date.UTC(2014, 8, 8), 80],
[Date.UTC(2014, 8, 9), 75],
[Date.UTC(2014, 8, 10), 73],
[Date.UTC(2014, 8, 11), 78],
[Date.UTC(2014, 8, 12), 82],
[Date.UTC(2014, 8, 13), 15],
[Date.UTC(2014, 8, 14), 18],
[Date.UTC(2014, 8, 15), 65],
[Date.UTC(2014, 8, 16), 70],
[Date.UTC(2014, 8, 17), 67],
[Date.UTC(2014, 8, 18), 73],
[Date.UTC(2014, 8, 19), 80],
[Date.UTC(2014, 8, 20), 17],
[Date.UTC(2014, 8, 21), 22],
[Date.UTC(2014, 8, 22), 65],
[Date.UTC(2014, 8, 23), 63],
[Date.UTC(2014, 8, 24), 68],
[Date.UTC(2014, 8, 25), 65],
[Date.UTC(2014, 8, 26), 70]
]
}, {
name: 'Total Visits',
data: [
[Date.UTC(2014, 7, 26), 75],
[Date.UTC(2014, 7, 27), 78],
[Date.UTC(2014, 7, 28), 80],
[Date.UTC(2014, 7, 29), 85],
[Date.UTC(2014, 7, 30), 35],
[Date.UTC(2014, 7, 31), 30],
[Date.UTC(2014, 8, 1), 90],
[Date.UTC(2014, 8, 2), 95],
[Date.UTC(2014, 8, 3), 95],
[Date.UTC(2014, 8, 4), 97],
[Date.UTC(2014, 8, 5), 93],
[Date.UTC(2014, 8, 6), 30],
[Date.UTC(2014, 8, 7), 25],
[Date.UTC(2014, 8, 8), 90],
[Date.UTC(2014, 8, 9), 95],
[Date.UTC(2014, 8, 10), 93],
[Date.UTC(2014, 8, 11), 99],
[Date.UTC(2014, 8, 12), 95],
[Date.UTC(2014, 8, 13), 35],
[Date.UTC(2014, 8, 14), 30],
[Date.UTC(2014, 8, 15), 95],
[Date.UTC(2014, 8, 16), 94],
[Date.UTC(2014, 8, 17), 92],
[Date.UTC(2014, 8, 18), 95],
[Date.UTC(2014, 8, 19), 100],
[Date.UTC(2014, 8, 20), 30],
[Date.UTC(2014, 8, 21), 33],
[Date.UTC(2014, 8, 22), 95],
[Date.UTC(2014, 8, 23), 91],
[Date.UTC(2014, 8, 24), 90],
[Date.UTC(2014, 8, 25), 94],
[Date.UTC(2014, 8, 26), 95]
]
}]
});
});

The setting you want is tickInterval, not point interval. You also need to specify startOnTick: true to make it start on your first point.
xAxis: {
type: 'datetime',
tickInterval: 13 * 24 * 3600 * 1000, //half month interval
pointStart: Date.UTC(2014, 7, 26),
startOnTick: true,
dateTimeLabelFormats: {
month: '%b %e',
year: '%b'
}
},
http://jsfiddle.net/pdy4deew/