3146

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

Question:

Is it possible to format the labels on the xAxis of a charts_flutter time series chart to display <em>hh:mm:ss</em>. <a href="https://stackoverflow.com/a/51138909/1954993" rel="nofollow">This answer</a> 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?

Answer1:

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 <a href="https://google.github.io/charts/flutter/example/time_series_charts/simple" rel="nofollow">the sample</a> 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', ),

Recommend

  • Javascript teechart - set min or max not working?
  • ASP.Net CascadingDropDown and EnableEventValidation=“false”
  • Android fade in not working
  • AJAX Chat Box Scrolling Up Issue
  • jQuery, Calling multiple animations in a row on click
  • Change the width of the JQM panels
  • Variant from android-autofittextview library : scaling makes strange behaviour
  • Unable to connect to OnVif enabled camera using C#
  • jquery code not working without breakpoint
  • multidatatrigger with multibinding in ControlTemplate.Triggers
  • Detecting # in Scheme list
  • Android onKey w/ virtual keyboard
  • Adding Object or changing its parameter programmatically in C# / ASP.Net
  • encoding issues with content in response from HttpWebRequest
  • Can I have a variable number of URI parameters or key-value pairs in Laravel 4?
  • Validate jQuery plugin, field not required
  • Setting the run time properties on SpringApplicationBuilder()
  • Calculating ratio of reciprocated ties for each node in igraph
  • How to disable all widgets inside Panel or inside Composite?
  • Extract zip entries to another Zip file
  • Simulate click Geckofx vb,net
  • Groovy: Unexpected token “:”
  • How to have background script and something similar to a default popup?
  • d3 v4 drag and drop with TypeScript
  • jQuery show() function is not executed in Safari if submit handler returns true
  • RectangularRangeIndicator format like triangular using dojo
  • Align navbar back button on right side
  • DotNetZip - Calculate final zip size before calling Save(stream)
  • Can Jackson SerializationFeature be overridden per field or class?
  • Possible to stop flickering java tooltip in heavyweight mode?
  • How to model a transition system with SPIN
  • Rails 2: use form_for to build a form covering multiple objects of the same class
  • NSLayoutConstraint that would pin a view to the bottom edge of a superview
  • Cant find why the layout is getting smaller
  • How to stop GridView from loading again when I press back button?
  • Bitwise OR returns boolean when one of operands is nil
  • sending mail using smtp is too slow
  • costura.fody for a dll that references another dll
  • Binding checkboxes to object values in AngularJs
  • How to push additional view controllers onto NavigationController but keep the TabBar?