Format time labels in charts_flutter time series chart to include hh:mm:ss - charts

Is it possible to format the labels on the xAxis of a charts_flutter time series chart to display hh:mm:ss. This answer explains how to go about formatting the code to display months and days but the information I need to display is collected a few times a minute.
charts.AutoDateTimeTickFormatterSpec doesn't allow for specifying seconds. The OP on the above question alluded to a DateTimeFactory which is mentioned in the charts_flutter gallery, but I'm also unsure how to use this, or if it is even of any use in this situation.
new charts.TimeSeriesChart(
getSeries(item),
animate: false,
primaryMeasureAxis: new charts.NumericAxisSpec(
tickProviderSpec: new charts.BasicNumericTickProviderSpec(zeroBound: false)
),
domainAxis: new charts.DateTimeAxisSpec(
tickFormatterSpec: new charts.AutoDateTimeTickFormatterSpec(
hour: new charts.TimeFormatterSpec(format: 'hh', transitionFormat: 'dd/MM hh:mm'),
)
),
),
Alternatively, is there a different chart I could use that would allow for this functionality? I see that charts.BarChart allows for Strings on the xAxis, but I specifically need a line chart - is there some way of specifying strings rather than datetimes on a line chart if the above formatting is not possible?

Because of a setting down in MinuteTimeStepper, there's no point. The smallest interval that you can achieve between labels appears to be 5 minutes. The MinuteTimeStepper defaults to intervals of 5, 10, 15, 20 and 30 minutes.
class MinuteTimeStepper extends BaseTimeStepper {
static const _defaultIncrements = const [5, 10, 15, 20, 30];
It has a constructor that allows you to pass in your own list, but I can't figure out how to get that to work.
Instead, I just modified it to become const [1, 5, 10... and that now draws labels with a 1 minute gap (if space is available).
Given that the closest the labels will be drawn (even with this change) is every minute, there's no point in including seconds.
Taking the sample and modifying the series data to
new TimeSeriesSales(new DateTime(2018, 8, 22, 13, 00, 00), 15),
new TimeSeriesSales(new DateTime(2018, 8, 22, 13, 00, 30), 5),
new TimeSeriesSales(new DateTime(2018, 8, 22, 13, 01, 00), 25),
new TimeSeriesSales(new DateTime(2018, 8, 22, 13, 01, 30), 20),
new TimeSeriesSales(new DateTime(2018, 8, 22, 13, 02, 00), 10),
gives labels that read 1 00, 01 and 02 (1PM exactly, 1 minute past and 2 minutes past) which are generated by the default format of mm and h mm. Note that the points at the half minute are drawn, but not labeled, as expected.
If you wanted these in 24 hour format you could add a TimeFormatterSpec like
minute: new charts.TimeFormatterSpec(
format: 'mm', // or even HH:mm here too
transitionFormat: 'HH:mm',
),

Related

Google Timeline chart to display 2 rows of same name for a single day

I am trying to create a timeline chart with same start and end date. consider the following code,
 dataTable.addRows([    
[ 'Minister', 'Geo', new Date(1801, 2, 1), new Date(1801, 2, 10) ],
[ 'Minister', 'Geo', new Date(1801, 2, 15), new Date(1801, 2, 20) ],
[ 'Secretary', 'Levi', new Date(1801, 2, 5), new Date(1801, 2, 5)],
[ 'Secretary', 'James', new Date(1801, 2, 5), new Date(1801, 2, 5)],
[ 'President', 'George', new Date(1801, 2, 15), new Date(1801, 2, 25) ]
]);
I want to show the two time periods [James,Levi] under Secretary in a single row when start and end date are same. After executing, the color bar belonging to 'James' is visible whereas 'Levi' is not. See the following graph,
For time periods with more than a single day, color bars for both 'James' and 'Levi' are visible. See below,
Setting groupByRowLabel will not work for me as it will affect the entries under 'Minister'
timeline: {
groupByRowLabel: false
}
Can someone tell why color bar is not visible for single day entries.
TIA

Flutter - How I make date format day on/off unlimited

Flutter - How I make date format day on/off auto unlimited
List<DateTime> onDates = [
DateTime(2021, 03, 1),
DateTime(2021, 03, 3),
];
List<DateTime> offDates = [
DateTime(2021, 03, 2),
DateTime(2021, 03, 4),
];

Flutter Get closest timestamp to now from List

How to get the closest timestamp to now from List?
I got a List of timestamps and I want to determine the closest timestamp in the future to current timestamp.
How can I achieve that?
Something like this? I am not sure how you are representing your timestamps so I have made the example by using DateTime objects:
void main() {
final dateTimes = <DateTime>[
DateTime(2020, 8, 1),
DateTime(2020, 8, 5),
DateTime(2020, 7, 13),
DateTime(2020, 7, 18),
DateTime(2020, 8, 15),
DateTime(2020, 8, 20)
];
final now = DateTime(2020, 7, 14);
final closetsDateTimeToNow = dateTimes.reduce(
(a, b) => a.difference(now).abs() < b.difference(now).abs() ? a : b);
print(closetsDateTimeToNow); // 2020-07-13 00:00:00.000
}
Note, the solution finds the closets timestamp in the list and looks both in the past and future.

Google Chart, how to move annotation on top of columns

I'm using Google Chart's stacked column chart, what i wanna achieve is to display the total on top of each column and i'm using annotation for this. As you look at the image, somehow only the annotation on the 5th column (1,307.20) is working as expected.
As i investigate , this seem like a bug of Google Chart , this bug can be explained like below
[[Date, Car, Motobike, {role: :annotation}],
[June 2015, 500, 0, 500],
[Feb 2015, 500, 600, 1100]]
[March 2015, 700, 0, 700],
With the above data, the annotation for Feb 2015 is the only which is displayed correctly , the other 2 do not since the last value of then is 0 , when I change the last value to 1 for June and March , the annotation is displayed correctly.
Then I think of a work around is to always display the "non-zero" data on top , and here's the result:
The annotations are moved on top properly , but as you can see, it's located within the column and what i want to achieve is to move it on top of the column .
I'm stuck with this for a while , Google Documentation doesn't help much with this case. Any help would be highly appreciated
I had the same problem, some of my series had 0 as my last value so the label would show on the X Axis instead of at the top. With dynamic data it would be a real challenge to ensure the last value was never 0. #dlaliberte gave me a hint where to start with this comment:
"As a workaround, you might consider using a ComboChart with an extra
series to draw a point at the top of each column stack. You'll have to
compute the total of the other series yourself to know where to put
each point."
I found a combo chart from google's gallery and opened jsfiddle to see what I could do. I left the data mostly, but changed the series name labels and made the numbers a little simpler. Don't get caught up on the purpose of the graph the data is regardless, I just wanted to figure out how to get my annotation to the top of the graph even when the last column was 0 (https://jsfiddle.net/L5wc8rcp/1/):
function drawVisualization() {
// Some raw data (not necessarily accurate)
var data = google.visualization.arrayToDataTable([
['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda', 'Total', {type: 'number', role: 'annotation'}],
['Application', 5, 2, 2, 8, 0, 17, 17],
['Friend', 4, 3, 5, 6, 2, 20, 20],
['Newspaper', 6, 1, 0, 2, 0, 9, 9],
['Radio', 8, 0, 8, 1, 1, 18, 18],
['No Referral', 2, 2, 3, 0, 6, 13, 13]
]);
var options = {
isStacked: true,
title : 'Monthly Coffee Production by Country',
vAxis: {title: 'Cups'},
hAxis: {title: 'Month'},
seriesType: 'bars',
series: {5: {type: 'line'}},
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
That produced this graph, which is a great start:
As you can see since series 5 (our Total of the other series) is a type: 'line', so it will always point to the top of the stack. Now, I didn't necessarily want the line in my chart, since it was not used to compare continuous horizontal totals, so I updated series 5 with lineWidth: 0, and then made the title of that category '' so that it wouldn't be included in the legend as a stack (https://jsfiddle.net/Lpgty7rq/):
function drawVisualization() {
// Some raw data (not necessarily accurate)
var data = google.visualization.arrayToDataTable([
['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Papua New Guinea', 'Rwanda', '', {type: 'number', role: 'annotation'}],
['Application', 5, 2, 2, 8, 0, 17, 17],
['Friend', 4, 3, 5, 6, 2, 20, 20],
['Newspaper', 6, 1, 0, 2, 0, 9, 9],
['Radio', 8, 0, 8, 1, 1, 18, 18],
['No Referral', 2, 2, 3, 0, 6, 13, 13]
]);
var options = {
isStacked: true,
title : 'Monthly Coffee Production by Country',
vAxis: {title: 'Cups'},
hAxis: {title: 'Month'},
seriesType: 'bars',
series: {5: {type: 'line', lineWidth: 0}},
};
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
And Voila!
Use alwaysOutside: true.
annotations: {
textStyle: {
color: 'black',
fontSize: 11,
},
alwaysOutside: true
}
You will want to use the annotations.alwaysOutside option:
annotations.alwaysOutside -- In Bar and Column charts, if set to true,
draws all annotations outside of the Bar/Column.
See https://google-developers.appspot.com/chart/interactive/docs/gallery/columnchart
However, with a stacked chart, the annotations are currently always forced to be inside the columns. This will be fixed in the next major release.
As a workaround, you might consider using a ComboChart with an extra series to draw a point at the top of each column stack. You'll have to compute the total of the other series yourself to know where to put each point. Then make the pointSize 0, and add the annotation column after this series.

About jqPlot zoom

I am trying to use jqPlot to create chart in my project. The problem I have is when I zoom to some area, the x axis label shows like this "Jun 01, June 01, June 01, June 02
,June 02, June 02, June 03" etc. What I want is "June 01, June 02, June 03". How can I do this? Sorry for the poor English.
You can provide a tick interval value like that:
var plot = $.jqplot('graph', [dataSet], {
// ...
axes: {
xaxis: {
min: 'X', // E.g. '2012-06-01'
max: 'X',
tickInterval: '1 day' // Yes, it understands this.
// ...
}
},
// ...
});
But keep this in mind: In order tickInterval to work, you have to provide at least one of the min or max values.