how to Trim xAxis scale in highstock? - javascript

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

Related

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>

How to add date on X-axis in jqchart

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++;
}
?>

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.

Series Data for column high chart

I am working on highchart column chart. But I got stuck in series adding part. This is my code
function renderChart(series_data){
$("#container").height(400);
var chart = new Highcharts.Chart({
chart: {
type: 'column',
renderTo: 'container',
marginBottom: 105
},
title: {
text: 'Issue Sales',
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
month: '%e. %b',
year: '%b'
},
minTickInterval: 24 * 3600 * 1000,
labels: {
rotation: -45,
align: 'right',
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}],
title: {
text: 'Number of Units',
margin: 80
}
},
tooltip: {
shared: true,
valueSuffix: ''
},
legend: {
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF'
},
series: {}
});
$.each(series_data, function(key, val) {
toSeries = [];
cat_name = key;
date_data = [];
xdate = '';
$.each(val,function(k,v){
chartdate = v.date;
chartcount = v.count;
dateval = chartdate.split("-");
x = Date.UTC(dateval[0], dateval[1] - 1, dateval[2]);
toSeries.push([x,chartcount]);
});
chart.addSeries({
name : cat_name,
data : parseFloat(toSeries)
});
});
}
If I am adding constant series data like
chart.addSeries({ name: 'Rainfall11', type: 'column', color: '#08F',
data:[100, 200, 300, 400, 100, 200]
});
some graph is displaying. But while coming to dynamic data it doesn't show up. Also I am using Date.UTC function to display the
I sending the json data through the variable, series_data to the function renderChart that is the result of another ajax function . The sample json result is this.
{"Ferrari April
2013":[{"date":"2013-06-05","month":"June-2013","count":"1.00"},{"date":"2013-06-08","month":"June-2013","count":"1.00"},{"date":"2013-06-15","month":"June-2013","count":"1.00"},{"date":"2013-06-16","month":"June-2013","count":"1.00"}],"Ferrari
May
2013":[{"date":"2013-06-05","month":"June-2013","count":"1.00"},{"date":"2013-06-07","month":"June-2013","count":"1.00"},{"date":"2013-06-08","month":"June-2013","count":"2.00"},{"date":"2013-06-09","month":"June-2013","count":"3.00"}],"Ferrari
March
2013":[{"date":"2013-06-07","month":"June-2013","count":"1.00"}],"Ferrari
June
2013":[{"date":"2013-06-10","month":"June-2013","count":"1.00"},{"date":"2013-06-11","month":"June-2013","count":"1.00"},{"date":"2013-06-12","month":"June-2013","count":"1.00"},{"date":"2013-06-13","month":"June-2013","count":"3.00"},{"date":"2013-06-14","month":"June-2013","count":"2.00"},{"date":"2013-06-16","month":"June-2013","count":"4.00"},{"date":"2013-06-17","month":"June-2013","count":"1.00"},{"date":"2013-06-18","month":"June-2013","count":"2.00"}],"Ferrari
February
2013":[{"date":"2013-06-11","month":"June-2013","count":"1.00"},{"date":"2013-06-18","month":"June-2013","count":"1.00"}]}
The problem comes in the Date.UTC part i guess . Because when I do a console.log() it is showing NaN .
Please help to fix this issue.
I am excepting a result like this.
Demo Jsfiddle
var series_data = {"Ferrari April 2013":[{"date":"2013-06-05","month":"June-2013","count":"1.00"}],"Ferrari January 2013":[{"date":"2013-06-02","month":"June-2013","count":"1.00"}],"Ferrari March 2013":[{"date":"2013-06-07","month":"June-2013","count":"1.00"}],"Ferrari May 2013":[{"date":"2013-06-01","month":"June-2013","count":"1.00"},{"date":"2013-06-01","month":"June-2013","count":"1.00"},{"date":"2013-06-02","month":"June-2013","count":"2.00"},{"date":"2013-06-03","month":"June-2013","count":"2.00"},{"date":"2013-06-04","month":"June-2013","count":"1.00"},{"date":"2013-06-05","month":"June-2013","count":"1.00"},{"date":"2013-06-07","month":"June-2013","count":"1.00"}]};
renderChart(series_data)
function renderChart(series_data){
var chart = new Highcharts.Chart({
chart: {
type: 'column',
renderTo: 'container',
marginBottom: 105
},
title: {
text: 'Issue Sales',
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: { // don't display the dummy year
month: '%e. %b',
year: '%b'
},
minTickInterval: 24 * 3600 * 1000,
labels: {
rotation: -45,
align: 'right',
style: {
fontSize: '13px',
fontFamily: 'Verdana, sans-serif'
}
}
},
yAxis: {
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}],
title: {
text: 'Number of Units',
margin: 40
}
},
tooltip: {
shared: true,
valueSuffix: ''
},
legend: {
floating: true,
borderWidth: 1,
backgroundColor: '#FFFFFF'
},
plotOptions: {
column: {
}
},
series: {}
});
$.each(series_data, function(key, val) {
toSeries = [];
cat_name = key;
date_data = [];
xdate = '';
$.each(val,function(k,v){
chartdate = v.date;
chartcount = v.count;
dateval = chartdate.split("-");
x = Date.UTC(dateval[0], dateval[1] - 1, dateval[2]);
toSeries.push([x,parseInt(chartcount)]); // Parse your data here!
});
chart.addSeries({
name : cat_name,
data : toSeries
});
});
}
Hope it works!
You are setting the chart before putting data inside it. First data series and then call Highcharts.Chart. Then your program will run for dynamic data also.
chart.addSeries({
data: [32, 43, 42],
index: 0,
zIndex:1
});
Live Demo

highcharts categories issues

I'm using Highcharts for a project which brings a mysql recordset.
I have two things i can't find the solution:
values are always form 3000 to 8000, how can i show 3000, 3500, 4000 and so on on the x axis?
the chart allows me to zoom in, and I'd like to show the y axis no matter the zoom level, is there a way?
here is my code:
var SpectrumName = '<?php echo $SpectrumName; ?>';
var SpectrumDate = '<?php echo $SpectrumDate; ?>';
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
size:[ 400,250 ],
chart: {
renderTo: 'container',
zoomType: 'xy',
defaultSeriesType: 'line',
marginRight: 130,
marginBottom: 50,
},
title: {
text: 'AstroSpec Observation of: ' + SpectrumName,
x: -20 //center
},
subtitle: {
text: 'Acquired on: ' + SpectrumDate,
x: -20
},
xAxis: {
categories: [<?php echo $x_colf1; ?>],
labels: {
formatter: function() {
if (this.index % 500) { // even numbers only
return this.value;
} else {
return false;
}
}
}
},
yAxis: {min: 0,
title: {
text: ''
},
plotLines: [{
value: 30,
width: 3,
color: '#808080'
}]
},
plotOptions: {
series: {
enableMouseTracking: false,
marker: {
enabled: false
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: [{
name: 'R',
data: [<?php echo $y_axis; ?>]
}]
});
});
For # 1, try setting min and tickInterval as follows:
xAxis: {
min: 3000,
tickInterval: 500
}
I did not quite get the requirement # 2.

Categories