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
}
}

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

How to connect null values with dotted lines in highcharts

I want to connect null values with dotted lines in the chart.
Below is the url to JS fiddle where my code resides -
data: [
[Date.UTC(2016, 1, 1),null],
[Date.UTC(2016, 2, 1),null],
[Date.UTC(2016, 3, 1),500],
[Date.UTC(2016, 4, 1),600],
[Date.UTC(2016, 5, 1),null],
[Date.UTC(2016, 6, 1),700],
[Date.UTC(2016, 7, 1),null],
[Date.UTC(2016, 8, 1),null],
[Date.UTC(2016, 9, 1),null],
[Date.UTC(2016, 10, 1),null],
[Date.UTC(2016, 11, 1),null],
[Date.UTC(2017, 0, 1),500]
],
http://jsfiddle.net/Ashish_developer/ue0wb8w0/

You can use series.zones to define which part of the graph will be dashed.
Based on your data, the algorithm for building the zones array could be sth like this (feel free to adjust it the way you want):
function buildZones(data) {
var zones = [],
i = -1, len = data.length, current, previous, dashStyle, value;
while (data[++i] === null);
zones.push({
value: i
});
while (++i < len) {
previous = data[i - 1];
current = data[i];
dashStyle = '';
if (previous !== null && current === null) {
dashStyle = 'solid';
value = i - 1;
} else if (previous === null && current !== null) {
dashStyle = 'dot';
value = i;
}
if (dashStyle) {
zones.push({
dashStyle: dashStyle,
value: value
});
}
}
return zones;
}
Series config:
series: [{
zones: buildZones(data),
zoneAxis: 'x',
data: data,
connectNulls: true
}]
example: http://jsfiddle.net/asf52ft8/

I Think Its Fine For You.. This Graph Suitable For Irregular Intervals
Highcharts.chart('container', {
chart: {
type: 'spline'
},
title: {
text: 'Snow depth at Kerala, India'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
month: '%b',
year: '%b'
},
title: {
text: 'Date'
}
},
yAxis: {
title: {
text: 'Snow depth (m)'
},
min: 0
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x:%e. %b}: {point.y:.2f} m'
},
plotOptions: {
spline: {
marker: {
enabled: true
}
}
},
series: [{
name: 'Winter 2017',
data: [
[Date.UTC(2017,01,01), 0],
[Date.UTC(2017,04,01), 6],
[Date.UTC(2017,05,01), 3],
[Date.UTC(2017,06,01), 7],
[Date.UTC(2017,07,01), 5],
[Date.UTC(2017,12,01), 6],
]
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

Try this One too
Highcharts.chart('container', {
chart: {
type: 'spline'
},
title: {
text: 'Snow depth at Vikjafjellet, Norway'
},
subtitle: {
text: 'Irregular time data in Highcharts JS'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
month: '%e. %b',
year: '%b'
},
title: {
text: 'Date'
}
},
yAxis: {
title: {
text: 'Snow depth (m)'
},
min: 0
},
tooltip: {
headerFormat: '<b>{series.name}</b><br>',
pointFormat: '{point.x:%e. %b}: {point.y:.2f} m'
},
plotOptions: {
spline: {
marker: {
enabled: true
}
}
},
series: [{
name: 'Winter 2012-2013',
// 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, 21), 0],
[Date.UTC(1970, 10, 4), 0.28],
[Date.UTC(1970, 10, 9), 0.25],
[Date.UTC(1970, 10, 27), 0.2],
[Date.UTC(1970, 11, 2), 0.28],
[Date.UTC(1970, 11, 26), 0.28],
[Date.UTC(1970, 11, 29), 0.47],
[Date.UTC(1971, 0, 11), 0.79],
[Date.UTC(1971, 0, 26), 0.72],
[Date.UTC(1971, 1, 3), 1.02],
[Date.UTC(1971, 1, 11), 1.12],
[Date.UTC(1971, 1, 25), 1.2],
[Date.UTC(1971, 2, 11), 1.18],
[Date.UTC(1971, 3, 11), 1.19],
[Date.UTC(1971, 4, 1), 1.85],
[Date.UTC(1971, 4, 5), 2.22],
[Date.UTC(1971, 4, 19), 1.15],
[Date.UTC(1971, 5, 3), 0]
]
}, {
name: 'Winter 2013-2014',
data: [
[Date.UTC(1970, 9, 29), 0],
[Date.UTC(1970, 10, 9), 0.4],
[Date.UTC(1970, 11, 1), 0.25],
[Date.UTC(1971, 0, 1), 1.66],
[Date.UTC(1971, 0, 10), 1.8],
[Date.UTC(1971, 1, 19), 1.76],
[Date.UTC(1971, 2, 25), 2.62],
[Date.UTC(1971, 3, 19), 2.41],
[Date.UTC(1971, 3, 30), 2.05],
[Date.UTC(1971, 4, 14), 1.7],
[Date.UTC(1971, 4, 24), 1.1],
[Date.UTC(1971, 5, 10), 0]
]
}, {
name: 'Winter 2014-2015',
data: [
[Date.UTC(1970, 10, 25), 0],
[Date.UTC(1970, 11, 6), 0.25],
[Date.UTC(1970, 11, 20), 1.41],
[Date.UTC(1970, 11, 25), 1.64],
[Date.UTC(1971, 0, 4), 1.6],
[Date.UTC(1971, 0, 17), 2.55],
[Date.UTC(1971, 0, 24), 2.62],
[Date.UTC(1971, 1, 4), 2.5],
[Date.UTC(1971, 1, 14), 2.42],
[Date.UTC(1971, 2, 6), 2.74],
[Date.UTC(1971, 2, 14), 2.62],
[Date.UTC(1971, 2, 24), 2.6],
[Date.UTC(1971, 3, 2), 2.81],
[Date.UTC(1971, 3, 12), 2.63],
[Date.UTC(1971, 3, 28), 2.77],
[Date.UTC(1971, 4, 5), 2.68],
[Date.UTC(1971, 4, 10), 2.56],
[Date.UTC(1971, 4, 15), 2.39],
[Date.UTC(1971, 4, 20), 2.3],
[Date.UTC(1971, 5, 5), 2],
[Date.UTC(1971, 5, 10), 1.85],
[Date.UTC(1971, 5, 15), 1.49],
[Date.UTC(1971, 5, 23), 1.08]
]
}]
});
<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>

highcharts.js how to force x-Axis label to display all months regardless of chart size

i am working on a area charts.
http://jsfiddle.net/b8eoszt0/
my example is a bit complex or different from the ones we usually see.
for the data structure, i have 4 weeks aggregated data for each month
eg: Sep1-7: 0, Sep8-15: 20 and so on.
the chart works fine, it displays all data points (5 points each month)
However, for the x-axis labels, what i wanted is to always display "Sep, Oct, Nov, Dec, Jan", regardless what chart size is, because right now, if you resize the broswer, the chart resize, and the a-axis labels are change. sometimes there is less items, sometimes there is more.
$(function () {
$('#container').highcharts({
chart: {
type: 'area'
},
xAxis: {
opposite: true,
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
day: '%b %e',
week: '%b %e',
month: '%b'
},
lineWidth: 0,
startOnTick: false,
endOnTick: false,
tickWidth: 0
},
yAxis: {
gridLineWidth: 0
},
series:[
{
showInLegend: false,
data: [
[Date.UTC(2015, 8, 1), 0],
[Date.UTC(2015, 8, 8), 30],
[Date.UTC(2015, 8, 15), 20],
[Date.UTC(2015, 8, 22), 50],
[Date.UTC(2015, 8, 29), 20],
[Date.UTC(2015, 9, 1), 0],
[Date.UTC(2015, 9, 8), 30],
[Date.UTC(2015, 9, 15), 20],
[Date.UTC(2015, 9, 22), 50],
[Date.UTC(2015, 9, 29), 20],
[Date.UTC(2015, 10, 1), 0],
[Date.UTC(2015, 10, 8), 30],
[Date.UTC(2015, 10, 15), 20],
[Date.UTC(2015, 10, 22), 50],
[Date.UTC(2015, 10, 29), 20],
[Date.UTC(2015, 11, 1), 0],
[Date.UTC(2015, 11, 8), 30],
[Date.UTC(2015, 11, 15), 20],
[Date.UTC(2015, 11, 22), 50],
[Date.UTC(2015, 11, 29), 20],
[Date.UTC(2016, 0, 1), 0],
[Date.UTC(2016, 0, 8), 30],
[Date.UTC(2016, 0, 15), 20],
[Date.UTC(2016, 0, 22), 50],
[Date.UTC(2016, 0, 29), 20],
]
}
],
});
});
i have tried pointinterval, but it doesn't allow Month.
i have tried labels formatter, but it doesnt returns all labels, it seems hightcharts did some filtering before getting into formatter functions.

You can set type on the axis and define your unit.
Check fiddle. I have added the following code in your xAxis. Hope this helps.
type: 'datetime',
units: [
[
'month', [1, 3, 6]
]
]
The first number of the array defines the interval, so for every month I have set 1, you you were to display label only two months the first value would be 2. The next numbers on the array are for allowed multiples, for your requirement this is not needed, a simple 'month', [1] would do. Check the Api Reference for more information.

You can use tickPositioner, for example: http://jsfiddle.net/b8eoszt0/2/
tickPositioner: function(min, max) {
var ticks = this.tickPositions, // original ticks
newTicks = [], // container for a new ticks
start = new Date(ticks[0]); // first tick
// render tick in a first day of the month
start.setDate(1);
// add labels, one for every month:
while (min <= max) {
start.setMonth(start.getMonth() + 1);
min = start.getTime();
newTicks.push(min);
}
// store original info of labels:
newTicks.info = ticks.info;
return newTicks;
},

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/