Develop Reference

softMin/softMax for xAxis in HighStock doesnt set?

When looking at the Highstock documentation, it says there is a softMin and softMax for the xAxis, but if i leverage dates, it doesnt seem to properly represent the date ranges requested.
I have been needing to do the following: find the interval of the xAxis data, then padd the front/end of the array with null data at those timepoints to properly convey the info.
This works, but I figured HighStock's soft values should be able to handle this.
In a sample use case: you can set the following:
{
chart: {
type: this.type || 'line',
},
title: {
text: this.title || ''
},
credits: {
enabled: false
},
rangeSelector: {
inputEnabled: false, // Specific to the Date Range Picker.
enabled: false // Specific to the Quick Selects for YTD, 6 mo, zoom.
},
navigator: {
adaptToUpdatedData: true
},
scrollbar: {
enabled: false
},
legend: {
enabled: true
},
xAxis: {
min: undefined,
max: undefined,
softMin: undefined,
softMax: undefined,
type: 'datetime',
dateTimeLabelFormats: {
day: '%b %e'
}
},
// yAxis: {
// title: { text: ''}, opposite: true, type: 'linear'
// },
plotOptions: {
series: {
dataGrouping: {
approximation: 'sum',
groupPixelWidth: 25,
forced: true,
units: [
['minute', [30]],
['day', [1, 7, 15]],
['month', [1, 3, 6]]
]
}
}
},
series: []
}
So I look at the dates as if they are numbers, new Date().getTime() but if i want to set the softMin and softMax, I wanted to do something like:
xAxis: {
softMin: new Date().getTime() - 1000 * 3600 * 24 * days_back
softMax: new Date().getTime()
}
where days_back is a user defined variable for how many days previously to look.
The way i pad out the series info is as follows:
const endtime = new Date().getTime(); //The current definition of endtime is now as there is no data for the future.
const starttime = endtime - 1000 * 3600 * 24 * days;
opts.series = dataset.map((item, idx, arr) => {
const name: string = item.name || '';
const data: any[] = item.data || []; // data is a list of lists. ][time_as_number, value],...]
if (data.length > 1) {
/// The purpose of this code block is to padd out the dataset to the start and end ranges.
/// While there is a softMin and softMax, it doesnt work too when with regards to dates.
/// This will padd the data to be represenative of the users base selection.
/// If the list of data has 0 or 1 points, there is not enough data to define an interval for the target range.
const difference = data[1][0] - data[0][0];
let low = data[1][0];
while (low > starttime) {
low -= difference;
data.unshift([low, null]);
}
let high = data[data.length - 1][0];
while (high < endtime) {
high += difference;
data.push([high, null]);
}
}
return {
marker: { enabled: true },
showInNavigator: true,
type: 'line',
name,
data
};
});
Is there something I am missing which i should be taking into account? min/max/minRange/maxRange according to the docs are not the correct keys i wanted to assign to.
For ease of understanding, HighStock Documentation is located here: https://api.highcharts.com/highstock/xAxis.softMin
Here is a sample: https://jsfiddle.net/sp18efkb/
You will see in this sample i set the softMin but it is not reflected. If i use a chart object though, it works. It seems that while it is valid according to the API, is not a valid or monitored property.

When looking at HighStock charts, there is an additional variable which needs to be set if you are looking at this.
In the xAxis you need to set the property ordinal property to false. In order to get the navigator to function in the same way, you need to use that property, set the softmin and soft max as the same, and also turn off ordinal.
It would look something like this:
...
navigator: {
adaptToUpdatedData: true,
xAxis: {
ordinal: false,
min: undefined,
max: undefined,
softMin: new Date().getTime() - 1000 * 3600 * 24 * 5,
softMax: undefined
}
},
xAxis: {
ordinal: false,
min: undefined,
max: undefined,
softMin: new Date().getTime() - 1000 * 3600 * 24 * 5,
softMax: undefined,
type: 'datetime',
dateTimeLabelFormats: {
day: '%b %e'
}
},
...

How can I change the background color of horizontal bar if date value is less than to current date?

I want to change the background color of horizontal bar in highcharts(gantt chart) if the date value is less than to current date? Please take a look on the picture: https://ibb.co/3MNqJJy and this is the jsfiddle: https://jsfiddle.net/57n1cjyr/
var today = new Date().getTime(),
day = 1000 * 60 * 60 * 24;
var options = {
title: {
text: 'Visual Planner Chart with Navigation',
},
xAxis: currentDateIndicator: true,
min: today - 3 * day,
max: today + 18 * day
},
yAxis: {
uniqueNames: true
},
series: [{
name: 'Visual Planner',
data: [],
dataLabels: {
enabled: true,
format: '{point.owner}'
}
}]
}
var ganttChart = Highcharts.ganttChart('container-ganttChart', options)
ganttChart.series[0].addPoint({
start: Date.UTC(2019, 01, 30),
end: Date.UTC(2019, 03, 01),
name: 'crewRank',
owner: 'crewName'
})

Assuming you have start and today specified as in the code above, this seems to work (replace the last part with it, the other code is unmodified):
var startDate=Date.UTC(2019, 01, 30)
// call gantt chart then add series
ganttChart.series[0].addPoint({
start: startDate,
end: Date.UTC(2019, 03, 01),
name: 'crewRank',
owner: 'crewName',
color: new Date(startDate).getTime() < today ? 'red' :'blue'
}
The color is red or blue depending on the current date value

Flot time series not drawing line

I am trying to plot a line graph, using timestamps from the past 24 hours (plotting data for each 1 hour interval), to show a decreasing and increasing value in flot. When I set my minTickSize, min, and max values, the line no longer plots.
Complete code (also in this fiddle):
$(function () {
var d = [
[1443903422000, 4994],
[1443903429000, 4993],
[1443910918000, 4999]
];
var epochT = (new Date).getTime(); // time right now in js epoch
$.plot("#placeholder", [d], {
xaxis: {
mode: "time",
timeformat: "%I:%M",
minTickSize: [1, "hour"],
min: epochT - 2 * 86400000,
max: epochT,
timezone: "browser",
},
series: {
lines: {
show: true
},
points: {
show: true
},
},
grid: {
hoverable: true,
clickable: true,
},
});
});
Can anyone point me in the right direction to resolving this?

Yout timestamps are in seconds not microseconds like JavaScript needs it (see here in the documentation). Multiplying by thousand (and shifting the min value because it already cuts off the chart) leads to this updated fiddle version.
Changes to your code:
var d = [[1443903422000,4994], [1443903429000,4993], [1443910918000,4999]];
min: epochT - 2*86400000,

How to make yAxis start from a specific time with bar series in highchart?

I want to have bar chart start from a specific time (1.Apr)
So I implemented this in below sample:
(jsFiddle) sample with axis right but can the bar disappear
With the code below
yAxis: {
type: 'datetime',
min:Date.UTC(2010, 3, 1)
},
yAxis actually start from 1.Apr, but I can not see the bar itself .
If I remark the min line as below
yAxis: {
type: 'datetime'
//min:Date.UTC(2010, 3, 1)
},
Now I can see the bar appear, but the yAxis default show from 1.Jan.
Can anyone help me make the bar visible and yAxis starting from 1.Apr ?

I think I found what you're searching.
There's an option in yAxis called min, it's used to set the lowest value of your axis. Like that :
yAxis: {
type: 'datetime',
min: Date.UTC(2010, 3, 1)
}
Hope it's what you're searching. Chears from a bear.

Let me explain how datetime axis works. In general, datetime axis is based on number of milliseconds since 1970-01-01 00:00:00. That means, setting y: 3600 * 1000 will render column from 1970-01-01 00:00:00 to 1970-01-01 01:00:00. You want to start chart as 1st of April, but your data doesn't reflect that. In other words, you need provide such info, for example:
series: [{
name: 'UP',
color: 'lime',
data: [{
x: 1,
y: Date.UTC(2015, 5, 1, 1, 0, 0) // 2015-06-01 01:00:00
// or:
// y: 1433120400000
// is the same as above use for Date.UTC()
}]
}]
Live demo: http://jsfiddle.net/v9582phy/4/

Thanks for your replying, it helps. And I had extended the code yours with further enhancement as below
yAxis: {
type: 'datetime',
labels: {
formatter: function () {
var x=new Date(Date.UTC(2015, 3, 1)+this.value*1000*60)
return moment(x).format('MMM/DD HH:mm:ss')
}
}
},
with series data as
series: [{
data: [{
status:'studying',
color: 'lime',
x: 1,
y: 5
}, {
status:'playing guitar',
color: 'yellow',
x: 2,
y: 10
}, {
status:'exam',
color: 'red',
x: 2,
y: 23
}]
}]
And I got stacked bar which each bar present how many minutes for lasting status
Live demo: http://jsfiddle.net/v9582phy/11/

Flot library setting up y axis to min 0 and max 24

How can i set up my y axis to be in the range of 0 to 24
Here is the code i have.
j$.plot(j$("#placeholder"),[d1],{
xaxis:
{ mode: "time",
min: (new Date("2010/11/01")).getTime(),
max: (new Date("2011/02/01")).getTime()
}
},
{yaxis: { min:0, max:24 } };
};
xaxis seemed to work but when i added y axis it doesnt work.
Apart from this
d1 holds the string which is sent from salesforce
for example d1 holds
[1294041600000,14.00],[1294041600000,14.50],[1294041600000,15.00],[1293955200000,12.00]
I am not able to view the graph, currently i am having the y axis showing only the range -1 to 1, i am assuming this could be the reason why i am not seeing the line.
thanks
Prady

The y axis problem was solved. Here is the code
j$.plot(j$("#placeholder"), [d1], {
xaxis:
{
mode: "time",
min: (new Date("2010/11/01")).getTime(),
max: (new Date("2011/02/01")).getTime()
},
yaxis:
{
min:0, max: 24, tickSize: 5
}
});