We Keep Coding

Highcharts Range Selector does not work with multiple series

I have a highchart/highstock where I get my data from a php file. My problem is that If I'm using multiple series the RangeSelector Buttons do not work (In the example the 1h buttno (1 hour) should work. Example: https://jsfiddle.net/mymarcelsql/8xL34qyk/15/
That's my File:
<?php
require("php/00connection.php");
$sql = $conn->query("SELECT read_tickets, write_tickets, epoch_time FROM tickets_available ORDER BY epoch_time;")->fetchAll();
foreach ($sql as $row) {
$read_tickets[] = $row['read_tickets'];
$write_tickets[] = $row['write_tickets'];
}
?>
<script type="text/javascript">
$(document).ready(function() {
var categoriesDate = [ <?php foreach ($sql as $row) { ?>
'<?php $date = $row['epoch_time'] / 1000; echo (date('Y-m-d H:i', $date)) ?>',
<?php } ?>
];
var seriesReadTickets = [ <?php echo join($read_tickets, ',') ?> ];
var seriesWriteTickets = [ <?php echo join($write_tickets, ',') ?> ];
var options ={
chart: {
renderTo: 'tickets',
type: 'line',
zoomType: 'x',
setSize: 400
},
title: {
text: "Memory"
},
xAxis: {
categories: categoriesDate,
title: {
text: "Datetime"
},
type:'datetime',
labels: {
format: '{value:%Y-%m-%d %H:%M}',
}
},
yAxis: {
title: {
text: 'Available Tickets'
}
},
rangeSelector: {
enabled: true,
inputEnabled: false,
buttonPosition: {
align: 'right'
},
labelStyle: {
display: 'none'
},
buttons: [
{
type: 'hour',
count: 1,
text: '1h'
},
{
type: 'day',
count: 1,
text: '1d'
},
{
type: 'month',
count: 1,
text: '1m'
},
{
type: 'month',
count: 6,
text: '6m'
},
{
type: 'year',
count: 1,
text: '1y'
},
{
type: 'all',
text: 'All'
}
]
},
tooltip: {
//crosshairs: true,
shared: true,
valueSuffix: '',
xDateFormat: '%Y-%m-%d %H:%M'
},
series: [{
name: 'Read Tickets',
data: seriesReadTickets
}, {
name: 'Write Tickets',
data: seriesWriteTickets
}]
};
var chart = new Highcharts.Chart(options);
});
</script>
But If I use a single series the buttons are working correctly.
Thanks for your help!

Using xAxis.categories automatically sets a type of the axis to category and the range selector feature works only with the datetime axis type.
You need to convert your data to [x, y] format and use the datetime axis type.
API Reference: https://api.highcharts.com/highcharts/series.line.data

cannot display data on highchart js

I want to display data from MySQL database to highchart. When I do print_r the data, it can display the array as well, but when I try to display them to the chart, it's not working. here's my code:
controller:
$lokasi = $this->Objekwisata_m->getLokasi();
$jumlahSad = array();
$temp = 0;
foreach ($lokasi as $lok ) {
$sad = $this->Objekwisata_m->getSad($lok['id_lokasi']);
$jumlahSad[$temp] = count($sad);
$temp++;
}
$data['jumlahSad'] = $jumlahSad;
$data['lokasi'] = $this->Objekwisata_m->getLokasi();
$this->load->view('objek_wisata_v', $data);
model
public function getSad($id_lokasi){
$this->db->select('t.result');
$this->db->from('tbl_testimoni t');
$this->db->join('tbl_master_lokasi l', 't.id_lokasi = l.id_lokasi', 'left');
$this->db->where("t.result", "'sad'");
$this->db->where("t.id_lokasi = '".$id_lokasi."'");
$query = $this->db->get();
return $query->result_array();
}
highchart.js
<script>
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: 'Grafik Kepuasan Pengunjung KRB'
},
xAxis: {
categories: [<?php foreach($lokasi as $lok){
echo "'".$lok['nama_lokasi']."',";
}?>],
title: {
text: null
}
},
yAxis: {
min: 0,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: 'percents'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -40,
y: 80,
floating: true,
borderWidth: 1,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Sad',
data: [<?php foreach($jumlahSad as $s){
echo "'".$s."',";
}?>]
}, {
name: 'Happy',
data: [<?php foreach($jumlahHappy as $h){
echo "'".$h."',";
}?>]
}, {
name: 'Disgust',
data: [<?php foreach($jumlahDisgust as $d){
echo "'".$d."',";
}?>]
}]
});
</script>

Can`t place on the X axis, dates from ms sql server

$(function () {
Highcharts.setOptions({
global : { useUTC : false
}
});
$('#container').highcharts({
title: {
text: 'coefficient 10 days',
x: -20
},
subtitle: {
text: 'Company',
x: -20
},
xAxis: {
categories: [<?php echo join($data, ',')?>],
type: 'datetime'
},
yAxis: {
title: {
text: 'Коэффициент'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '', enabled: false
},
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
borderWidth: 0
},
series: [
{
name: 'value',
data: [<?php echo join($koef, ',')?>]
}, {
name: 'norm',
data: [<?php echo join($norm, ',')?>], color: '#FF0000'
}
]
});
});
When format in php as 'Ymd', date is correct but as number, like '20151210' this not readable for users. When i try format (in php code) 'd.m.Y' java say script1007 error. On api.highcharts.com nothing in the description specified what to do. Probably i need set in javascript something about datetime setting.

Highchart set min on combo-duel-axis

Been looking and trying every thing I found and can think of.
I'm trying to set a minimum for the chart for the Y-axis (Time ms) & 100 max for the percentage on the x-axis and can't figure out where to put the
{min: 0} // For Time
{max: 100} // for the percent x-axis
Some places it works but takes away some of the chart data or menu's
full code:
$(function () {
$('#container').highcharts({
chart: {
zoomType: 'xy'
},
title: {
text: 'Network Ping Results'
},
subtitle: {
text: ''
},
xAxis: [{
//echo php dates for data
categories: [<?php echo $categories;?>]
}],
// Primary yAxis Time ms
yAxis: [{
labels: {
format: '{value} ms',
style: {
color: '#89A54E'
}
},
title: {
text: 'Average Time',
style: {
color: '#89A54E'
}
}
},
// Secondary yAxis
{
title: {
text: 'Packet Loss',
style: {
color: '#4572A7'
}
},
labels: {
format: '{value} %',
style: {
color: '#4572A7'
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'vertical',
align: 'left',
x: 120,
verticalAlign: 'top',
y: 100,
floating: true,
backgroundColor: '#FFFFFF'
},
series: [{
name: 'Packet Loss',
color: '#4572A7',
type: 'column',
yAxis: 1,
//Data echo for packet loss:
data: [<?php echo $packet_loss;?>],
tooltip: {
valueSuffix: '%'
}
}, {
name: 'Average Time',
color: '#89A54E',
type: 'spline',
//Data echo for time:
data: [<?php echo $avg_times;?>],
tooltip: {
valueSuffix: ' ms'
}
}]
});
});

how to Trim xAxis scale in highstock?

I'm using HighStock.js to build the graph of a stock ticker, and i need to display 2 days data into a graph , and i don't have data when stock market closes , so i'm getting straight line from Nov 27 11:20 to Nov 28 5:19 . I should not get any line when stock closes, that line should be trimmed along with x-axis. I'm having prices in the interval of every 20 mins for 2 days. Below is my code,
$.each(names, function(i, name) {
if(i==0)
{
seriesOptions[i] = {
name: name,
data: [<?php echo join($data0, ',') ?>],
};
}
else if(i==1)
{
date3:[<?php echo $date1 ?>];
seriesOptions[i] = {
name: name,
data: [<?php echo join($data1, ',') ?>],
};
}
else if(i==2)
{
seriesOptions[i] = {
name: name,
data: [<?php echo join($data2, ',') ?>]
};
}
seriesCounter++;
if (seriesCounter == names.length) {
createChart();
}
});
function createChart() {
var date_new1 ;
var date_new2 ;
chart = new Highcharts.StockChart({
chart: {
renderTo: 'container'
},
dataLabels: {
enabled: true
},
yAxis: {
title: {
text: 'PRICE',
},
},
xAxis: {
title: {
text: 'PERIOD',
},
type: 'datetime',
dateTimeLabelFormats: {
second: '%Y-%m-%d<br/>%H:%M:%S',
minute: '%Y-%m-%d<br/>%H:%M',
hour: '%Y-%m-%d<br/>%H:%M',
day: '%Y<br/>%m-%d',
week: '%Y<br/>%m-%d',
month: '%Y-%m',
year: '%Y'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
navigator: {
enabled: false,
},
rangeSelector: {
enabled: false
},
legend: {
enabled: true,
align: 'right',
backgroundColor: '#FCFFC5',
borderColor: 'black',
borderWidth: 2,
layout: 'vertical',
verticalAlign: 'top',
y: 100,
shadow: true
},
series: seriesOptions
});
}
});

The feature to automatically collapse weekends is not completely implemented yet. It is scheduled for the next release of highstock (the one after 1.0.2). Here is the corresponding feature request: on uservoice