user71,
какими данными оперировать из вашего примера #19 ?
в примере ниже данные продублированы на следующий день.
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script>
$(function () {
var data = [{"ind":1,"create_at":"2016-07-29T11:40:23.000Z","name":"user1","counter":5,"counter2":8},{"ind":2,"create_at":"2016-07-29T11:40:23.000Z","name":"user2","counter":2,"counter2":9},{"ind":3,"create_at":"2016-07-29T11:40:23.000Z","name":"user3","counter":0,"counter2":4},{"ind":4,"create_at":"2016-07-29T11:40:23.000Z","name":"user4","counter":2,"counter2":0},{"ind":1,"create_at":"2016-07-30T11:40:23.000Z","name":"user1","counter":5,"counter2":8},{"ind":2,"create_at":"2016-07-30T11:40:23.000Z","name":"user2","counter":2,"counter2":9},{"ind":3,"create_at":"2016-07-30T11:40:23.000Z","name":"user3","counter":0,"counter2":4},{"ind":4,"create_at":"2016-07-30T11:40:23.000Z","name":"user4","counter":2,"counter2":0}]
var obj = data.reduce(function(a, b) {
if (!a[b.name]) a[b.name] = [];
a[b.name].push([+new Date(b.create_at), +Math.min(+b.counter, +b.counter2), +Math.max(+b.counter, +b.counter2)]);
return a
}, {});
data = Object.keys(obj).map(function(key) {
return {
name: key,
type: "arearange",
data: obj[key].sort(function(a, b) {
return b[0] - a[0]
})
}
});
$('#container').highcharts({
xAxis: {
type: 'datetime'
},
series: data
});
});
</script>
</head>
<body>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>