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
Related
I successfully created a charts with two y axis using Highcharts JS Library.
However you can see the y-Axis is stacked (Fahrenheit and temperature), is it possible to merge it to one ?
Here is my code.
<script type="text/javascript">
$(function () {
$('#container').highcharts({
chart: {
type: 'line'
},
time: {
timezone: 'Australia/Brisbane'
},
title: {
text: 'Temperature Graph'
},
xAxis: {
type: 'datetime',
categories: <?php echo json_encode($tgl, JSON_NUMERIC_CHECK); ?>,
title: {
text: 'Dates'
},
},
yAxis: [{
title: {
text: 'temperature'
}
}, {
title: {
text: 'Fahrenheit'
}
}],
series: [{
name: 'Celcius',
data: <?php echo json_encode($suhu, JSON_NUMERIC_CHECK);?>
}, {
name: 'Fahrenheit',
data: <?php echo json_encode($lembap, JSON_NUMERIC_CHECK); ?>,
yAxis: 1
}]
});
});
</script>
You can render this chart with only one yAxis and use the labels.formatter callback to format the displaying labels and show also the Fahrenheit values.
Demo: https://jsfiddle.net/BlackLabel/L8e9g1n3/
labels: {
formatter() {
let fahrenheitValue = 1.8 * this.value + 32;
return this.value + " / " + fahrenheitValue
}
}
API: https://api.highcharts.com/highcharts/yAxis.labels.formatter
If you need you can customize the tooltip in the same way by using the tooltip.formatter.
API: https://api.highcharts.com/highcharts/tooltip.formatter
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>
I have some dates as below mentioned from my database,
['2017-09-18', '2017-09-19', '2017-09-22', '2017-09-23', '2017-09-24','2017-09-26']
Need to add this into jqchart
axes: [
{
type: 'dateTime',
location: 'bottom',
labels: {stringFormat: 'dd-mm-yyyy'},
minimum: new Date(<?php echo str_replace("-",",",substr(min($dtarray),0,-8)); ?>),
maximum: new Date(<?php echo str_replace("-",",",substr(max($dtarray),0,-8)); ?>),
title: { text: 'Days in month' }
},
My code goes like this , but i need to add dates instead of min & max value,
because some dates are missing while checking.
This is my
Here two X-axis is coming i need only one having date.
Please help
We can add date in series,
$(document).ready(function () {
$('#jqChart').jqChart({
title: { text: 'Efficiency' },
animation: { duration: 1 },
shadows: {
enabled: true
},
axes: [
{
type: 'category',
location: 'bottom',
title: { text: 'Days in month' },
categories: [<?php echo $dateData; ?>],
zoomEnabled: true,
},
{
type: 'linear',
name: 'y1',
location: 'left',
title: { text: 'Working hours' },
labels: {
stringFormat: '%d'
},
minimum:0,
maximum:15,
interval:1
},
{
type: 'category',
name: 'y2',
location: 'right',
strokeStyle: '#FCB441',
majorGridLines: { strokeStyle: '#FCB441' },
majorTickMarks: { strokeStyle: '#FCB441' },
title: { text: 'LUF/Efficiency' },
labels: {
stringFormat: '%.1f'
},
minimum:0,
maximum:5
}
],
series: [
{
type: 'stackedColumn',
axisY: 'y1',
title: 'Effective time',
fillStyle: 'green',
data: [<?php echo $dat1; ?>],
labels: {
font: '12px sans-serif'
}
},
{
type: 'stackedColumn',
axisY: 'y1',
title: 'Idle time',
fillStyle: 'red',
data: [<?php echo $dat3; ?>],
labels: {
font: '12px sans-serif'
}
}
]
});
});
<?php
$dat1="";
$dat2="";
$obj->AssetStatbyTeam($frmdt,$todt,$empcode);
$res = $obj->execute();
while($row1=mysql_fetch_array($res))
{
if($i==1)
{
$dat1=$dat1.sec_to_time($row1['wrk_time']);
$dat2=$dat2.sec_to_time($row1['idle_time']);
}
else
{
$dat1=$dat1.",".sec_to_time($row1['wrk_time']);
$dat2=$dat2.",".sec_to_time($row1['idle_time']);
}
$i++;
}
?>
$(function () {
$('#containerGraph').highcharts({
chart: {
type: 'column'
},
title: {
text: ''
},
subtitle: {
text: ''
},
exporting: { enabled: false },
credits: { enabled: false },
xAxis: {
type: 'category',
title: {
text: 'Date'
},
labels: {
rotation: -45,
style: {
fontSize: '10px',
fontFamily: 'Verdana, sans-serif'
}
}
},
plotOptions: {
column: {
colorByPoint: true
}
},
yAxis: {
min: 0,
title: {
text: 'Time (minutes)'
}
},
legend: {
enabled: false
},
tooltip: {
//pointFormat: '<b>{point.y:.1f} minutes</b>{point.x:}'
formatter: function() {
return '<b>'+ this.y +'</b>'+
'minutes<br>'+ this.point.z + 'hi' ;
},
//shared: true
},
series: [{
name: 'Time',
data: [
['<?php print $buildDate[0]?>', <?php print $lastFifteenDurationArray[0]?>, <?php echo $svnHistory[0]?>],
['<?php print $buildDate[1]?>', <?php print $lastFifteenDurationArray[1]?>, <?php print $svnHistory[1]?>],
['<?php print $buildDate[2]?>', <?php print $lastFifteenDurationArray[2]?>, <?php print $svnHistory[2]?>],
['<?php print $buildDate[3]?>', <?php print $lastFifteenDurationArray[3]?>, <?php print $svnHistory[3]?>],
['<?php print $buildDate[4]?>', <?php print $lastFifteenDurationArray[4]?>, <?php print $svnHistory[4]?>],
['<?php print $buildDate[5]?>', <?php print $lastFifteenDurationArray[5]?>, <?php print $svnHistory[5]?>]
],
lang: {noData: "No Data Available"},
dataLabels: {
enabled: false
}
}]
});
});
The value of z-axiz in the tooltip shows Undefined in the chart.
I also tried this.point.config[2], but that doesn't work either.
When I debugged the code, the z-value in the data field is correctly resolved.
Is it because I have to specify type of data or something?
Can someone tell me what I am doing wrong?
In case you wan't a third dimension you'll need to define it like this: data = [{y: yValue, z: zValue, additional: additionalVal}], like this you can access this.point.z (and this.point.additional). Anyway, it seems that using the series X values as x-axis category label does not work while working with an array of objects. In order to make it run, do it like this:
xAxis: {
type: 'category',
categories: ['09-01-2015','09-01-2015'], /* your old x-data */
title: {
text: 'Date'
}
},
series: [{
name: 'Time',
/* data is now an array of objects */
data: [
{y:25, z:492076},
{y:26, z:496222}
],
}
updated Fiddle is here
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