I am trying to create a scheduling Gantt. I've based this gantt off of the Resource Management example. Lots of good stuff so far! I'm having a few problems, which I will make separate posts for.
The next problem that I'm dealing with is that I have many rows of data in the Gantt chart. I've added vertical scrolling capabilities, but the headers above the chart disappear when scrolling. I've found examples where the headers don't scroll, but am unable to determine what in the code keeps the headers in place.
Here's the fiddle: https://jsfiddle.net/eddiem9/h9qw5rsj/15/
chart = Highcharts.ganttChart('container', {
series: series,
scrollablePlotArea: {
minHeight: 700
},
plotOptions: {
series: {
color: '#FF0000'
}
},
scrollbar: {
enabled: true
},
title: {
text: 'Irrigation Schedule',
style: {
color: '#000000',
fontWeight: 'bold',
fontSize: '24px'
}
},
tooltip: {
pointFormat: '<span>Schedule: {point.schedule}</span><br/><span>From: {point.start:%m/%d %H:%M}</span><br/><span>To: {point.end:%m/%d %H:%M}</span>'
},
xAxis:
[{
labels: {
format: '{value:%H}' // hour of the day (not working)
},
tickInterval: 1000 * 60 * 60, // HOUR
}, {
labels: {
format: '{value:%B %e}' // day name of the week
},
tickInterval: 1000 * 60 * 60 * 24, // Day
}
],
yAxis: {
type: 'category',
grid: {
columns: [{
title: {
text: 'Pump'
},
categories: map(series, function (s) {
return s.PumpName;
})
}, {
title: {
text: 'Zone'
},
categories: map(series, function (s) {
return s.IrrigationZoneName;
})
}, {
title: {
text: 'Status'
},
categories: map(series, function (s) {
return s.CurrentStatus;
})
}
]
}
}
})
Thanks in advance!
Eddie
You were so close to making it work, you just had a small mistake. scrollablePlotArea object must be defined inside the chart object.
Demo: https://jsfiddle.net/BlackLabel/bu5hfxm1/
chart: {
scrollablePlotArea: {
minHeight: 700
}
},
API: https://api.highcharts.com/gantt/chart.scrollablePlotArea
EDIT:
After digging into the issue I think that a better option will be use the scrollbar for the yAxis than scrollablePlotArea.
Demo: https://jsfiddle.net/BlackLabel/s013uqa5/
stock module is required
Example of the options config for yAxis:
scrollbar: {
enabled: true,
showFull: false
},
max: 5,
API: https://api.highcharts.com/highstock/yAxis.scrollbar
Im trying to make this chart have multiple Y Axes, all of which have different values and tick intervals. Like Signal Strength be on a scale of 0%-100%, Temperature 0F-100F and Main Power be 0V to 25V but cant seem to figure it out. Here's my jFiddle:
http://jsfiddle.net/0k5k8ygz/
Code:
function createChart() {
Highcharts.stockChart('container', {
rangeSelector: {
selected: 4
},
yAxis: [{ // Primary yAxis
labels: {
format: '{value}°F',
style: {
color: Highcharts.getOptions().colors[2]
}
},
title: {
text: 'Temperature',
style: {
color: Highcharts.getOptions().colors[2]
}
},
opposite: true
}, { // Secondary yAxis
gridLineWidth: 0,
title: {
text: 'Main Power',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} volts',
style: {
color: Highcharts.getOptions().colors[0]
}
}
}, { // Tertiary yAxis
gridLineWidth: 0,
title: {
text: 'Signal Strength',
style: {
color: Highcharts.getOptions().colors[1]
}
},
labels: {
format: '{value} %',
style: {
color: Highcharts.getOptions().colors[1]
}
},
opposite: true
}],
plotOptions: {
series: {
compare: 'percent',
showInNavigator: true
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
valueDecimals: 2,
split: true
},
series: seriesOptions
});
}
$.each(names, function(i, name) {
$.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=' + name.toLowerCase() + '-c.json&callback=?', function(data) {
seriesOptions[i] = {
name: name,
data: data
};
// As we're loading the data asynchronously, we don't know what order it will arrive. So
// we keep a counter and create the chart when all the data is loaded.
seriesCounter += 1;
if (seriesCounter === names.length) {
createChart();
}
});
});
If you add some data to each of the y-axes, they will get tick marks automatically. You assign data to a specific y-axis using the series.yAxis index:
seriesOptions[i] = {
name: name,
data: data,
yAxis: i,
};
If you also want to specify a valid range for the y-axes, you can set min and max on each individual axis:
...
labels: {
format: '{value} volts',
},
min: 0,
max: 25,
...
http://jsfiddle.net/0k5k8ygz/5/
I have a area chart build with highcharts, I am trying to reduce some spaces between y axis cell columns means reduce height from 0 to 1 , 1 to 2 etc, but not getting proper result. how to achieve it ?
jQuery(document).ready(function () {
var txt = document.getElementById('hdnYaxis');
var txtFoxXAxis = document.getElementById('hdnXaxis');
$('#container').highcharts({
chart: {
type: 'area'
},
title: {
text: 'Monthly Status'
},
xAxis: {
categories: $.parseJSON(txtFoxXAxis.value),
labels: {
style: {
color: 'red'
}
},
maxPadding: 0,
},
tooltip: {
pointFormat: '{series.name} <b>{point.y:,.0f}'
},
plotOptions: {
area: {
marker: {
enabled: false,
symbol: 'circle',
radius: 2,
states: {
hover: {
enabled: true
}
}
}
}
},
series: $.parseJSON(txt.value)
});
});
set tickPixelInterval in yAxis ,use this:
yAxis: {
tickPixelInterval: 10 // whatever you want
}
Set maxPadding on yAxis as 0.
yAxis:{
maxPadding:0
}
I am trying to finalize a graph where I report the daily production within a month and a couple of other daily based series. The graph is always set at full scale, meaning that I always show all the days within a month, even if I do not have values for them, whichever is the reason why. On the first day of each month, I display the graph of the previous month, as a report.
This is the jfiddle I've set up so that you can have an idea. The problem I've been fighting against is that, whatever I try to do, Highcharts simply ignores me and displays wrong labels on x axis. So the days start from 2, go throughout the whole month to the last and they end with 1.
This is the code for my chart:
$(function() {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'tab-month-graph',
zoomType: 'xy'
},
title: {
text: 'Daily - August 2015'
},
xAxis: {
type: 'datetime',
tickInterval: 24 * 3600 * 1000,
labels: {
align: 'center',
text: 'Giorni',
style: {
fontSize: '10px',
fontFamily: 'Verdana, sans-serif'
}
},
dateTimeLabelFormats: {
day: '%e'
}
},
yAxis: [{ // Primary yAxis
title: {
text: 'Produzione giornaliera',
style: {
color: Highcharts.getOptions().colors[1]
}
}
},
{ // Secondary yAxis
title: {
text: 'PR giornaliero',
style: {
color: Highcharts.getOptions().colors[0]
}
},
min: 0,
startOnTick: false,
opposite: true
}],
legend: {
enabled: false
},
series: [{
name: 'Prod.',
type: 'column',
data: [[1438466230000, 4603.36],[1438552630000, 4264.92],[1438639030000, 3108.05],[1438725430000, 2047.03],[1438811830000, 2270.39],[1438898230000, 2258.2],[1438984630000, 3971.95],[1439071030000, 3784.45],[1439157430000, 3674.53],[1439243830000, 3131.95],[1439330230000, 1963.13],[1439416630000, 3333.52],[1439503030000, 4161.8],[1439589430000, 4408.59],[1439675830000, 2968.83],[1439762230000, 2808.05],[1439848630000, 4439.77],[1439935020000, 3746.48],[1440021430000, 4980],[1440107830000, 3683.91],[1440194230000, 4480.78],[1440280630000, 4406.48],[1440367030000, 4518.98],[1440453430000, 4492.73],[1440539830000, 3924.14],[1440626230000, 4062.89],[1440712630000, 3225.47],[1440799030000, 3213.75],[1440885430000, 4631.95],[1440971830000, 4471.17],[1441058230000, 4223.91]],
color: '#89CE7F',
dataLabels: {
enabled: true,
rotation: -90,
color: '#000000',
align: 'right',
x: 4,
y: 10,
style: {
fontSize: '11px',
fontFamily: 'Verdana, sans-serif',
textShadow: '0 0 3px black'
}
}
},
{
name: 'PR',
type: 'spline',
yAxis: 1,
lineWidth: 0,
marker: {
radius: 6
},
data: [[1438466230000, 73.36],[1438552630000, 75.08],[1438639030000, 57.54],[1438725430000, 38.85],[1438811830000, 39.14],[1438898230000, 63.78],[1438984630000, 76.03],[1439071030000, 75.78],[1439157430000, 77.61],[1439243830000, 79.74],[1439330230000, 77.35],[1439416630000, 73.98],[1439503030000, 75.79]],
color: '#AA0000',
tooltip: {
valueSuffix: ' %'
}
},
{
name: 'PR Cont.',
type: 'spline',
yAxis: 1,
lineWidth: 0,
marker: {
radius: 5,
symbol: 'circle'
},
data: [[1438466230000, 78.84],[1438552630000, 79.85],[1438639030000, 75.16],[1438725430000, 59.15],[1440971830000, 78.5],[1441058230000, 78.45]],
color: '#BBBB00',
tooltip: {
valueSuffix: ' %'
}
}
],
tooltip: {
xDateFormat: '%A, %d %B %Y',
valueSuffix: ' kW',
shared: true // LEGENDA CONDIVISA
},
plotOptions: {
series: {
pointStart: Date.UTC(2015, 7, 1),
pointRange: 24 * 3600 * 1000
}
}
});
});
I've read tons of posts on Stack Overflow, tried tons of suggestions, I've even tried this post tinyurl.com/psbzxeh on HighCharts official forum which is referred to a similar problem, but it did not solve my issue.
Could someone point me out to the right solution?
Just to clarify things: columns look like translated by one day, because of that time (21:57:10 UTC) - which is almost another day (without UTC it's 23:57:10 for GMT+2:00). In general, if you have daily data, then it's better to use 00:00:00 as this is when exactly date starts. Manipulating JSON shouldn't be that hard, see:
function modify(data) {
var time;
data.map(function(e) {
time = new Date(e[0]);
time.setUTCHours(0);
time.setUTCMinutes(0);
time.setUTCSeconds(0);
e[0] = time.getTime();
return e;
});
return data;
}
And:
series: [{
name: 'Prod.',
type: 'column',
data: modify([
[1438466230000, 4603.36],
...
])
}]
Demo: http://jsfiddle.net/p7vnqmt7/3/
Note: to remove extra tick at the last place on the axis, you can simply set xAxis.max.
And to answer question in the comment: no, pointInterval shouldn't be used when you have data as x-y pair.
try below function above your highchart function and set xAxis min and max.
Use very first timestamp(date) as min and last timestamp(date) as max value.
$( function () {
Highcharts.setOptions( {
lang : {
rangeSelectorZoom : ' '
},
global : {
useUTC : false
}
} );
} );
Do you see the range problem when I use multiple yAxis? How Can I solve this problem?
It is the same code I use!!
yAxis: [
{ labels: { formatter: function() { return this.value + '".$unitall1."' }, style: { color: '#89A54E' } }, title: { text: '".$graphall1."' , style: { color : '#4572A7' } }, opposite: true },
{ labels: { formatter: function() { return this.value + '".$unitall2."' }, style: { color: '#4572A7' } }, title: { text: '".$graphall2."' , style: { color : '#89A54E' } }, },
{ labels: { formatter: function() { return this.value + '".$unitall3."' }, style: { color: '#000000' } }, title: { text: '".$graphall3."' , style: { color : '#000000' } }, },
{ labels: { formatter: function() { return this.value + '".$unitall4."' }, style: { color: '#C4087C' } }, title: { text: '".$graphall4."' , style: { color : '#C4087C' } }, opposite: true }
],
You can use offset parameter to set distance yAxis properly.
http://api.highcharts.com/highstock#yAxis.offset
Use the yAxis.offset property to set the offset for each of your y-axis. Looks like the default gap between two axes is lesser in highstock then it is in highchart
You have two options:
use yAxis.offset for each axis, see: http://api.highcharts.com/highstock#yAxis.offset
use Highstock, but create chart using new Highcharts.Chart() instead of new Highcharts.StockChart(). In that case you can use Highstock features like ordinal axis, range selector, scrollbar etc. You have to just enable each of features directly: http://api.highcharts.com/highstock#scrollbar.enabled