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,
Related
I am setting up a candlestick chart from this example:
https://www.amcharts.com/demos/candlestick-chart/
What I am trying to do is to pre-zoom the chart to the last 10% of the available data. In the documentation ( https://www.amcharts.com/docs/v5/charts/xy-chart/zoom-and-pan/ ) it says to use the start parameter:
var xAxis = chart.xAxes.push(
am5xy.DateAxis.new(root, {
start: 0.9,
renderer: am5xy.AxisRendererX.new(root, {})
})
);
In the note below this code it says if a scrollbar is used, add the very same start offset as in the chart date axis.
So, within the sample code I set:
var xAxis = chart.xAxes.push(
am5xy.DateAxis.new(root, {
start: 0.95,
groupData: true,
maxDeviation:0.5,
baseInterval: { timeUnit: "day", count: 1 },
renderer: am5xy.AxisRendererX.new(root, {pan:"zoom"}),
tooltip: am5.Tooltip.new(root, {})
})
);
and for the srollbar:
var sbxAxis = scrollbar.chart.xAxes.push(
am5xy.DateAxis.new(root, {
start: 0.95,
groupData: true,
groupIntervals: [{ timeUnit: "week", count: 1 }],
baseInterval: { timeUnit: "day", count: 1 },
renderer: am5xy.AxisRendererX.new(root, {
opposite: false,
strokeOpacity: 0
})
})
);
I tried everything. I tried from https://www.amcharts.com/docs/v5/charts/xy-chart/axes/category-date-axis/
xAxis.zoomToDates(new Date(2021, 0, 1), new Date(2022, 0, 1));
and
series.events.once("datavalidated", function(ev) {
ev.target.get("xAxis").zoomToDates(new Date(2021, 0, 1), new Date(2022, 0, 1));
});
I tried adding "end: 1" to both elements. No luck.
Please, advice. Thanks a lot in advance.
As it happens the second option was correct and works fine. The confusion was with the dates. All the dates data for the chart is in timestamp which caused the confusion. Just in case posting here a final result - zooming to the last 130 records of the data and adding additional margin to the right for a little "air":
series.events.once("datavalidated", function(ev) {
//pre-zooming to last date
var startDate = chartData[0].date;
if(chartData.length >= 130){
startDate = chartData[chartData.length - 130].date;
}
ev.target.get("xAxis").zoomToDates(new Date(startDate), new Date(chartData[chartData.length - 1].date + 600000));
});
Here we take the first alement as the start date and if there are more than 130 records, we take only those 130. On the finale line I add 600000 to the last date (I have minutely chart, so I am adding 10 minutes: 60 seconds * 10 minutes * 1000 microseconds).
Hope this helps someone some day.
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'
}
},
...
I have a chart with two yAxis. And I want both to be grouped by date. But in my chart the last value of both series are ending up in differnt xAxis line. I assume this is because of the time differences. I need to group these points based on the date so that the last points of both series will align in the same line of xAxis. This is my javascript code.
Highcharts.stockChart('container', {
yAxis: [{
title: {
text: 'y axis 1',
},
opposite: false,
showEmpty: false,
},
{
title: {
text: 'y axis 2',
},
opposite: true,
showEmpty: false,
},
],
series: [{
yAxis: 0,
data: series1,
},
{
yAxis: 1,
data: series2,
},
],
});
And this is my jsfiddle. Can anyone please help me?
You can loop through your data and round timestamps to the nearest date:
function roundDate(timeStamp) {
timeStamp -= timeStamp % (24 * 60 * 60 * 1000); //subtract amount of time since midnight
return new Date(timeStamp).getTime();
}
function loopThroughData(data) {
data.forEach(function(el) {
el[0] = roundDate(el[0])
});
}
loopThroughData(series1);
loopThroughData(series2);
Live demo: https://jsfiddle.net/BlackLabel/zhbt4gmw/
Useful thread: Round a timestamp to the nearest date
The code I have processes the data perfectly from my XML file, no problem, however if there is only one hour of data available it stretches across the whole x-axis like so:
15:00
I would like to see a fixed amount on the x-axis so instead of just showing just 15:00 it shows future hours as well, regardless if data is available yet. For example:
15:00 16:00 17:00 18:00 19:00 20:00 21:00
My current configuration is as follows, but not sure how to make the above happen:
{
grid: {
hoverable: false,
clickable: false,
borderWidth: 1
},
xaxis: {
mode: "time",
minTickSize: [1, "hour"],
timeFormat: "%H:%M"
},
yaxis: {
min: 20,
max: 45
},
legend: {
show: true,
position: 'ne'
},
valueLabels: {
show:true,
showAsHtml: true
}
}
I handle this type of situation on the json data creation side. Not sure if there is a flot option to do something similar. By using null's as the data value for all the timestamps I expect. If you have the first hour time you can just increment it by 60 * 60 * 1000 E.g.
"data": [
[
1362139200000,
1.56
],
[
1362142800000,
null
],
[
1362146400000,
null
],
[
1362150000000,
null
],
[
1362153600000,
null
],
[
1362157200000,
null
],
etc.
]
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
}
});