Add flutter_web samples (#75)

web/charts/example/lib/time_series_chart/confidence_interval.dart

@@ -0,0 +1,119 @@
+// Copyright 2018 the Charts project authors. Please see the AUTHORS file
+// for details.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+/// Example of a time series chart with a confidence interval.
+///
+/// Confidence interval is defined by specifying the upper and lower measure
+/// bounds in the series.
+// EXCLUDE_FROM_GALLERY_DOCS_START
+import 'dart:math';
+// EXCLUDE_FROM_GALLERY_DOCS_END
+import 'package:charts_flutter/flutter.dart' as charts;
+import 'package:flutter_web/material.dart';
+
+class TimeSeriesConfidenceInterval extends StatelessWidget {
+  final List<charts.Series> seriesList;
+  final bool animate;
+
+  TimeSeriesConfidenceInterval(this.seriesList, {this.animate});
+
+  /// Creates a [TimeSeriesChart] with sample data and no transition.
+  factory TimeSeriesConfidenceInterval.withSampleData() {
+    return new TimeSeriesConfidenceInterval(
+      _createSampleData(),
+      // Disable animations for image tests.
+      animate: false,
+    );
+  }
+
+  // EXCLUDE_FROM_GALLERY_DOCS_START
+  // This section is excluded from being copied to the gallery.
+  // It is used for creating random series data to demonstrate animation in
+  // the example app only.
+  factory TimeSeriesConfidenceInterval.withRandomData() {
+    return new TimeSeriesConfidenceInterval(_createRandomData());
+  }
+
+  /// Create random data.
+  static List<charts.Series<TimeSeriesSales, DateTime>> _createRandomData() {
+    final random = new Random();
+
+    final data = [
+      new TimeSeriesSales(new DateTime(2017, 9, 19), random.nextInt(100)),
+      new TimeSeriesSales(new DateTime(2017, 9, 26), random.nextInt(100)),
+      new TimeSeriesSales(new DateTime(2017, 10, 3), random.nextInt(100)),
+      new TimeSeriesSales(new DateTime(2017, 10, 10), random.nextInt(100)),
+    ];
+
+    return [
+      new charts.Series<TimeSeriesSales, DateTime>(
+        id: 'Sales',
+        colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
+        domainFn: (TimeSeriesSales sales, _) => sales.time,
+        measureFn: (TimeSeriesSales sales, _) => sales.sales,
+        // When the measureLowerBoundFn and measureUpperBoundFn is defined,
+        // the line renderer will render the area around the bounds.
+        measureLowerBoundFn: (TimeSeriesSales sales, _) => sales.sales - 5,
+        measureUpperBoundFn: (TimeSeriesSales sales, _) => sales.sales + 5,
+        data: data,
+      )
+    ];
+  }
+  // EXCLUDE_FROM_GALLERY_DOCS_END
+
+  @override
+  Widget build(BuildContext context) {
+    return new charts.TimeSeriesChart(
+      seriesList,
+      animate: animate,
+      // Optionally pass in a [DateTimeFactory] used by the chart. The factory
+      // should create the same type of [DateTime] as the data provided. If none
+      // specified, the default creates local date time.
+      dateTimeFactory: const charts.LocalDateTimeFactory(),
+    );
+  }
+
+  /// Create one series with sample hard coded data.
+  static List<charts.Series<TimeSeriesSales, DateTime>> _createSampleData() {
+    final data = [
+      new TimeSeriesSales(new DateTime(2017, 9, 19), 5),
+      new TimeSeriesSales(new DateTime(2017, 9, 26), 25),
+      new TimeSeriesSales(new DateTime(2017, 10, 3), 100),
+      new TimeSeriesSales(new DateTime(2017, 10, 10), 75),
+    ];
+
+    return [
+      new charts.Series<TimeSeriesSales, DateTime>(
+        id: 'Sales',
+        colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
+        domainFn: (TimeSeriesSales sales, _) => sales.time,
+        measureFn: (TimeSeriesSales sales, _) => sales.sales,
+        // When the measureLowerBoundFn and measureUpperBoundFn is defined,
+        // the line renderer will render the area around the bounds.
+        measureLowerBoundFn: (TimeSeriesSales sales, _) => sales.sales - 5,
+        measureUpperBoundFn: (TimeSeriesSales sales, _) => sales.sales + 5,
+        data: data,
+      )
+    ];
+  }
+}
+
+/// Sample time series data type.
+class TimeSeriesSales {
+  final DateTime time;
+  final int sales;
+
+  TimeSeriesSales(this.time, this.sales);
+}

web/charts/example/lib/time_series_chart/end_points_axis.dart

@@ -0,0 +1,111 @@
+// Copyright 2018 the Charts project authors. Please see the AUTHORS file
+// for details.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+/// Example of a time series chart with an end points domain axis.
+///
+/// An end points axis generates two ticks, one at each end of the axis range.
+// EXCLUDE_FROM_GALLERY_DOCS_START
+import 'dart:math';
+// EXCLUDE_FROM_GALLERY_DOCS_END
+import 'package:charts_flutter/flutter.dart' as charts;
+import 'package:flutter_web/material.dart';
+
+class EndPointsAxisTimeSeriesChart extends StatelessWidget {
+  final List<charts.Series> seriesList;
+  final bool animate;
+
+  EndPointsAxisTimeSeriesChart(this.seriesList, {this.animate});
+
+  /// Creates a [TimeSeriesChart] with sample data and no transition.
+  factory EndPointsAxisTimeSeriesChart.withSampleData() {
+    return new EndPointsAxisTimeSeriesChart(
+      _createSampleData(),
+      // Disable animations for image tests.
+      animate: false,
+    );
+  }
+
+  // EXCLUDE_FROM_GALLERY_DOCS_START
+  // This section is excluded from being copied to the gallery.
+  // It is used for creating random series data to demonstrate animation in
+  // the example app only.
+  factory EndPointsAxisTimeSeriesChart.withRandomData() {
+    return new EndPointsAxisTimeSeriesChart(_createRandomData());
+  }
+
+  /// Create random data.
+  static List<charts.Series<TimeSeriesSales, DateTime>> _createRandomData() {
+    final random = new Random();
+
+    final data = [
+      new TimeSeriesSales(new DateTime(2017, 9, 19), random.nextInt(100)),
+      new TimeSeriesSales(new DateTime(2017, 9, 26), random.nextInt(100)),
+      new TimeSeriesSales(new DateTime(2017, 10, 3), random.nextInt(100)),
+      new TimeSeriesSales(new DateTime(2017, 10, 10), random.nextInt(100)),
+    ];
+
+    return [
+      new charts.Series<TimeSeriesSales, DateTime>(
+        id: 'Sales',
+        colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
+        domainFn: (TimeSeriesSales sales, _) => sales.time,
+        measureFn: (TimeSeriesSales sales, _) => sales.sales,
+        data: data,
+      )
+    ];
+  }
+  // EXCLUDE_FROM_GALLERY_DOCS_END
+
+  @override
+  Widget build(BuildContext context) {
+    return new charts.TimeSeriesChart(
+      seriesList,
+      animate: animate,
+      // Configures an axis spec that is configured to render one tick at each
+      // end of the axis range, anchored "inside" the axis. The start tick label
+      // will be left-aligned with its tick mark, and the end tick label will be
+      // right-aligned with its tick mark.
+      domainAxis: new charts.EndPointsTimeAxisSpec(),
+    );
+  }
+
+  /// Create one series with sample hard coded data.
+  static List<charts.Series<TimeSeriesSales, DateTime>> _createSampleData() {
+    final data = [
+      new TimeSeriesSales(new DateTime(2017, 9, 19), 5),
+      new TimeSeriesSales(new DateTime(2017, 9, 26), 25),
+      new TimeSeriesSales(new DateTime(2017, 10, 3), 100),
+      new TimeSeriesSales(new DateTime(2017, 10, 10), 75),
+    ];
+
+    return [
+      new charts.Series<TimeSeriesSales, DateTime>(
+        id: 'Sales',
+        colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
+        domainFn: (TimeSeriesSales sales, _) => sales.time,
+        measureFn: (TimeSeriesSales sales, _) => sales.sales,
+        data: data,
+      )
+    ];
+  }
+}
+
+/// Sample time series data type.
+class TimeSeriesSales {
+  final DateTime time;
+  final int sales;
+
+  TimeSeriesSales(this.time, this.sales);
+}

web/charts/example/lib/time_series_chart/line_annotation.dart

@@ -0,0 +1,115 @@
+// Copyright 2018 the Charts project authors. Please see the AUTHORS file
+// for details.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+/// Time series chart with line annotation example
+///
+/// The example future range annotation extends beyond the range of the series
+/// data, demonstrating the effect of the [Charts.RangeAnnotation.extendAxis]
+/// flag. This can be set to false to disable range extension.
+///
+/// Additional annotations may be added simply by adding additional
+/// [Charts.RangeAnnotationSegment] items to the list.
+// EXCLUDE_FROM_GALLERY_DOCS_START
+import 'dart:math';
+// EXCLUDE_FROM_GALLERY_DOCS_END
+import 'package:charts_flutter/flutter.dart' as charts;
+import 'package:flutter_web/material.dart';
+
+class TimeSeriesLineAnnotationChart extends StatelessWidget {
+  final List<charts.Series> seriesList;
+  final bool animate;
+
+  TimeSeriesLineAnnotationChart(this.seriesList, {this.animate});
+
+  /// Creates a [TimeSeriesChart] with sample data and no transition.
+  factory TimeSeriesLineAnnotationChart.withSampleData() {
+    return new TimeSeriesLineAnnotationChart(
+      _createSampleData(),
+      // Disable animations for image tests.
+      animate: false,
+    );
+  }
+
+  // EXCLUDE_FROM_GALLERY_DOCS_START
+  // This section is excluded from being copied to the gallery.
+  // It is used for creating random series data to demonstrate animation in
+  // the example app only.
+  factory TimeSeriesLineAnnotationChart.withRandomData() {
+    return new TimeSeriesLineAnnotationChart(_createRandomData());
+  }
+
+  /// Create random data.
+  static List<charts.Series<TimeSeriesSales, DateTime>> _createRandomData() {
+    final random = new Random();
+
+    final data = [
+      new TimeSeriesSales(new DateTime(2017, 9, 19), random.nextInt(100)),
+      new TimeSeriesSales(new DateTime(2017, 9, 26), random.nextInt(100)),
+      new TimeSeriesSales(new DateTime(2017, 10, 3), random.nextInt(100)),
+      new TimeSeriesSales(new DateTime(2017, 10, 10), random.nextInt(100)),
+    ];
+
+    return [
+      new charts.Series<TimeSeriesSales, DateTime>(
+        id: 'Sales',
+        domainFn: (TimeSeriesSales sales, _) => sales.time,
+        measureFn: (TimeSeriesSales sales, _) => sales.sales,
+        data: data,
+      )
+    ];
+  }
+  // EXCLUDE_FROM_GALLERY_DOCS_END
+
+  @override
+  Widget build(BuildContext context) {
+    return new charts.TimeSeriesChart(seriesList, animate: animate, behaviors: [
+      new charts.RangeAnnotation([
+        new charts.LineAnnotationSegment(
+            new DateTime(2017, 10, 4), charts.RangeAnnotationAxisType.domain,
+            startLabel: 'Oct 4'),
+        new charts.LineAnnotationSegment(
+            new DateTime(2017, 10, 15), charts.RangeAnnotationAxisType.domain,
+            endLabel: 'Oct 15'),
+      ]),
+    ]);
+  }
+
+  /// Create one series with sample hard coded data.
+  static List<charts.Series<TimeSeriesSales, DateTime>> _createSampleData() {
+    final data = [
+      new TimeSeriesSales(new DateTime(2017, 9, 19), 5),
+      new TimeSeriesSales(new DateTime(2017, 9, 26), 25),
+      new TimeSeriesSales(new DateTime(2017, 10, 3), 100),
+      new TimeSeriesSales(new DateTime(2017, 10, 10), 75),
+    ];
+
+    return [
+      new charts.Series<TimeSeriesSales, DateTime>(
+        id: 'Sales',
+        domainFn: (TimeSeriesSales sales, _) => sales.time,
+        measureFn: (TimeSeriesSales sales, _) => sales.sales,
+        data: data,
+      )
+    ];
+  }
+}
+
+/// Sample time series data type.
+class TimeSeriesSales {
+  final DateTime time;
+  final int sales;
+
+  TimeSeriesSales(this.time, this.sales);
+}

web/charts/example/lib/time_series_chart/range_annotation.dart

@@ -0,0 +1,111 @@
+// Copyright 2018 the Charts project authors. Please see the AUTHORS file
+// for details.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+/// Time series chart with range annotation example
+///
+/// The example future range annotation extends beyond the range of the series
+/// data, demonstrating the effect of the [Charts.RangeAnnotation.extendAxis]
+/// flag. This can be set to false to disable range extension.
+///
+/// Additional annotations may be added simply by adding additional
+/// [Charts.RangeAnnotationSegment] items to the list.
+// EXCLUDE_FROM_GALLERY_DOCS_START
+import 'dart:math';
+// EXCLUDE_FROM_GALLERY_DOCS_END
+import 'package:charts_flutter/flutter.dart' as charts;
+import 'package:flutter_web/material.dart';
+
+class TimeSeriesRangeAnnotationChart extends StatelessWidget {
+  final List<charts.Series> seriesList;
+  final bool animate;
+
+  TimeSeriesRangeAnnotationChart(this.seriesList, {this.animate});
+
+  /// Creates a [TimeSeriesChart] with sample data and no transition.
+  factory TimeSeriesRangeAnnotationChart.withSampleData() {
+    return new TimeSeriesRangeAnnotationChart(
+      _createSampleData(),
+      // Disable animations for image tests.
+      animate: false,
+    );
+  }
+
+  // EXCLUDE_FROM_GALLERY_DOCS_START
+  // This section is excluded from being copied to the gallery.
+  // It is used for creating random series data to demonstrate animation in
+  // the example app only.
+  factory TimeSeriesRangeAnnotationChart.withRandomData() {
+    return new TimeSeriesRangeAnnotationChart(_createRandomData());
+  }
+
+  /// Create random data.
+  static List<charts.Series<TimeSeriesSales, DateTime>> _createRandomData() {
+    final random = new Random();
+
+    final data = [
+      new TimeSeriesSales(new DateTime(2017, 9, 19), random.nextInt(100)),
+      new TimeSeriesSales(new DateTime(2017, 9, 26), random.nextInt(100)),
+      new TimeSeriesSales(new DateTime(2017, 10, 3), random.nextInt(100)),
+      new TimeSeriesSales(new DateTime(2017, 10, 10), random.nextInt(100)),
+    ];
+
+    return [
+      new charts.Series<TimeSeriesSales, DateTime>(
+        id: 'Sales',
+        domainFn: (TimeSeriesSales sales, _) => sales.time,
+        measureFn: (TimeSeriesSales sales, _) => sales.sales,
+        data: data,
+      )
+    ];
+  }
+  // EXCLUDE_FROM_GALLERY_DOCS_END
+
+  @override
+  Widget build(BuildContext context) {
+    return new charts.TimeSeriesChart(seriesList, animate: animate, behaviors: [
+      new charts.RangeAnnotation([
+        new charts.RangeAnnotationSegment(new DateTime(2017, 10, 4),
+            new DateTime(2017, 10, 15), charts.RangeAnnotationAxisType.domain),
+      ]),
+    ]);
+  }
+
+  /// Create one series with sample hard coded data.
+  static List<charts.Series<TimeSeriesSales, DateTime>> _createSampleData() {
+    final data = [
+      new TimeSeriesSales(new DateTime(2017, 9, 19), 5),
+      new TimeSeriesSales(new DateTime(2017, 9, 26), 25),
+      new TimeSeriesSales(new DateTime(2017, 10, 3), 100),
+      new TimeSeriesSales(new DateTime(2017, 10, 10), 75),
+    ];
+
+    return [
+      new charts.Series<TimeSeriesSales, DateTime>(
+        id: 'Sales',
+        domainFn: (TimeSeriesSales sales, _) => sales.time,
+        measureFn: (TimeSeriesSales sales, _) => sales.sales,
+        data: data,
+      )
+    ];
+  }
+}
+
+/// Sample time series data type.
+class TimeSeriesSales {
+  final DateTime time;
+  final int sales;
+
+  TimeSeriesSales(this.time, this.sales);
+}

web/charts/example/lib/time_series_chart/range_annotation_margin.dart

@@ -0,0 +1,139 @@
+// Copyright 2018 the Charts project authors. Please see the AUTHORS file
+// for details.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+/// Example of a time series chart with range annotations configured to render
+/// labels in the chart margin area.
+// EXCLUDE_FROM_GALLERY_DOCS_START
+import 'dart:math';
+// EXCLUDE_FROM_GALLERY_DOCS_END
+import 'package:charts_flutter/flutter.dart' as charts;
+import 'package:flutter_web/material.dart';
+
+class TimeSeriesRangeAnnotationMarginChart extends StatelessWidget {
+  final List<charts.Series> seriesList;
+  final bool animate;
+
+  TimeSeriesRangeAnnotationMarginChart(this.seriesList, {this.animate});
+
+  /// Creates a [TimeSeriesChart] with sample data and no transition.
+  factory TimeSeriesRangeAnnotationMarginChart.withSampleData() {
+    return new TimeSeriesRangeAnnotationMarginChart(
+      _createSampleData(),
+      // Disable animations for image tests.
+      animate: false,
+    );
+  }
+
+  // EXCLUDE_FROM_GALLERY_DOCS_START
+  // This section is excluded from being copied to the gallery.
+  // It is used for creating random series data to demonstrate animation in
+  // the example app only.
+  factory TimeSeriesRangeAnnotationMarginChart.withRandomData() {
+    return new TimeSeriesRangeAnnotationMarginChart(_createRandomData());
+  }
+
+  /// Create random data.
+  static List<charts.Series<TimeSeriesSales, DateTime>> _createRandomData() {
+    final random = new Random();
+
+    final data = [
+      new TimeSeriesSales(new DateTime(2017, 9, 19), random.nextInt(100)),
+      new TimeSeriesSales(new DateTime(2017, 9, 26), random.nextInt(100)),
+      new TimeSeriesSales(new DateTime(2017, 10, 3), random.nextInt(100)),
+      // Fix one of the points to 100 so that the annotations are consistently
+      // placed.
+      new TimeSeriesSales(new DateTime(2017, 10, 10), 100),
+    ];
+
+    return [
+      new charts.Series<TimeSeriesSales, DateTime>(
+        id: 'Sales',
+        domainFn: (TimeSeriesSales sales, _) => sales.time,
+        measureFn: (TimeSeriesSales sales, _) => sales.sales,
+        data: data,
+      )
+    ];
+  }
+  // EXCLUDE_FROM_GALLERY_DOCS_END
+
+  @override
+  Widget build(BuildContext context) {
+    return new charts.TimeSeriesChart(seriesList,
+        animate: animate,
+
+        // Allow enough space in the left and right chart margins for the
+        // annotations.
+        layoutConfig: new charts.LayoutConfig(
+            leftMarginSpec: new charts.MarginSpec.fixedPixel(60),
+            topMarginSpec: new charts.MarginSpec.fixedPixel(20),
+            rightMarginSpec: new charts.MarginSpec.fixedPixel(60),
+            bottomMarginSpec: new charts.MarginSpec.fixedPixel(20)),
+        behaviors: [
+          // Define one domain and two measure annotations configured to render
+          // labels in the chart margins.
+          new charts.RangeAnnotation([
+            new charts.RangeAnnotationSegment(
+                new DateTime(2017, 10, 4),
+                new DateTime(2017, 10, 15),
+                charts.RangeAnnotationAxisType.domain,
+                startLabel: 'D1 Start',
+                endLabel: 'D1 End',
+                labelAnchor: charts.AnnotationLabelAnchor.end,
+                color: charts.MaterialPalette.gray.shade200,
+                // Override the default vertical direction for domain labels.
+                labelDirection: charts.AnnotationLabelDirection.horizontal),
+            new charts.RangeAnnotationSegment(
+                15, 20, charts.RangeAnnotationAxisType.measure,
+                startLabel: 'M1 Start',
+                endLabel: 'M1 End',
+                labelAnchor: charts.AnnotationLabelAnchor.end,
+                color: charts.MaterialPalette.gray.shade300),
+            new charts.RangeAnnotationSegment(
+                35, 65, charts.RangeAnnotationAxisType.measure,
+                startLabel: 'M2 Start',
+                endLabel: 'M2 End',
+                labelAnchor: charts.AnnotationLabelAnchor.start,
+                color: charts.MaterialPalette.gray.shade300),
+          ], defaultLabelPosition: charts.AnnotationLabelPosition.margin),
+        ]);
+  }
+
+  /// Create one series with sample hard coded data.
+  static List<charts.Series<TimeSeriesSales, DateTime>> _createSampleData() {
+    final data = [
+      new TimeSeriesSales(new DateTime(2017, 9, 19), 5),
+      new TimeSeriesSales(new DateTime(2017, 9, 26), 25),
+      new TimeSeriesSales(new DateTime(2017, 10, 3), 100),
+      new TimeSeriesSales(new DateTime(2017, 10, 10), 75),
+    ];
+
+    return [
+      new charts.Series<TimeSeriesSales, DateTime>(
+        id: 'Sales',
+        domainFn: (TimeSeriesSales sales, _) => sales.time,
+        measureFn: (TimeSeriesSales sales, _) => sales.sales,
+        data: data,
+      )
+    ];
+  }
+}
+
+/// Sample time series data type.
+class TimeSeriesSales {
+  final DateTime time;
+  final int sales;
+
+  TimeSeriesSales(this.time, this.sales);
+}

web/charts/example/lib/time_series_chart/simple.dart

@@ -0,0 +1,108 @@
+// Copyright 2018 the Charts project authors. Please see the AUTHORS file
+// for details.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+/// Timeseries chart example
+// EXCLUDE_FROM_GALLERY_DOCS_START
+import 'dart:math';
+// EXCLUDE_FROM_GALLERY_DOCS_END
+import 'package:charts_flutter/flutter.dart' as charts;
+import 'package:flutter_web/material.dart';
+
+class SimpleTimeSeriesChart extends StatelessWidget {
+  final List<charts.Series> seriesList;
+  final bool animate;
+
+  SimpleTimeSeriesChart(this.seriesList, {this.animate});
+
+  /// Creates a [TimeSeriesChart] with sample data and no transition.
+  factory SimpleTimeSeriesChart.withSampleData() {
+    return new SimpleTimeSeriesChart(
+      _createSampleData(),
+      // Disable animations for image tests.
+      animate: false,
+    );
+  }
+
+  // EXCLUDE_FROM_GALLERY_DOCS_START
+  // This section is excluded from being copied to the gallery.
+  // It is used for creating random series data to demonstrate animation in
+  // the example app only.
+  factory SimpleTimeSeriesChart.withRandomData() {
+    return new SimpleTimeSeriesChart(_createRandomData());
+  }
+
+  /// Create random data.
+  static List<charts.Series<TimeSeriesSales, DateTime>> _createRandomData() {
+    final random = new Random();
+
+    final data = [
+      new TimeSeriesSales(new DateTime(2017, 9, 19), random.nextInt(100)),
+      new TimeSeriesSales(new DateTime(2017, 9, 26), random.nextInt(100)),
+      new TimeSeriesSales(new DateTime(2017, 10, 3), random.nextInt(100)),
+      new TimeSeriesSales(new DateTime(2017, 10, 10), random.nextInt(100)),
+    ];
+
+    return [
+      new charts.Series<TimeSeriesSales, DateTime>(
+        id: 'Sales',
+        colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
+        domainFn: (TimeSeriesSales sales, _) => sales.time,
+        measureFn: (TimeSeriesSales sales, _) => sales.sales,
+        data: data,
+      )
+    ];
+  }
+  // EXCLUDE_FROM_GALLERY_DOCS_END
+
+  @override
+  Widget build(BuildContext context) {
+    return new charts.TimeSeriesChart(
+      seriesList,
+      animate: animate,
+      // Optionally pass in a [DateTimeFactory] used by the chart. The factory
+      // should create the same type of [DateTime] as the data provided. If none
+      // specified, the default creates local date time.
+      dateTimeFactory: const charts.LocalDateTimeFactory(),
+    );
+  }
+
+  /// Create one series with sample hard coded data.
+  static List<charts.Series<TimeSeriesSales, DateTime>> _createSampleData() {
+    final data = [
+      new TimeSeriesSales(new DateTime(2017, 9, 19), 5),
+      new TimeSeriesSales(new DateTime(2017, 9, 26), 25),
+      new TimeSeriesSales(new DateTime(2017, 10, 3), 100),
+      new TimeSeriesSales(new DateTime(2017, 10, 10), 75),
+    ];
+
+    return [
+      new charts.Series<TimeSeriesSales, DateTime>(
+        id: 'Sales',
+        colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
+        domainFn: (TimeSeriesSales sales, _) => sales.time,
+        measureFn: (TimeSeriesSales sales, _) => sales.sales,
+        data: data,
+      )
+    ];
+  }
+}
+
+/// Sample time series data type.
+class TimeSeriesSales {
+  final DateTime time;
+  final int sales;
+
+  TimeSeriesSales(this.time, this.sales);
+}

web/charts/example/lib/time_series_chart/symbol_annotation.dart

@@ -0,0 +1,294 @@
+// Copyright 2018 the Charts project authors. Please see the AUTHORS file
+// for details.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+/// Example of timeseries chart with annotation rows between the chart draw area
+/// and the domain axis.
+///
+/// The symbol annotation renderer draws a row of symbols for each series below
+/// the drawArea but above the bottom axis.
+///
+/// This renderer can draw point annotations and range annotations. Point
+/// annotations are drawn at the location of the domain along the chart's domain
+/// axis, in the row for its series. Range annotations are drawn as a range
+/// shape between the domainLowerBound and domainUpperBound positions along the
+/// chart's domain axis. Point annotations are drawn on top of range
+/// annotations.
+// EXCLUDE_FROM_GALLERY_DOCS_START
+import 'dart:math';
+// EXCLUDE_FROM_GALLERY_DOCS_END
+import 'package:charts_flutter/flutter.dart' as charts;
+import 'package:flutter_web/material.dart';
+
+class TimeSeriesSymbolAnnotationChart extends StatelessWidget {
+  final List<charts.Series> seriesList;
+  final bool animate;
+
+  TimeSeriesSymbolAnnotationChart(this.seriesList, {this.animate});
+
+  /// Creates a [TimeSeriesChart] with sample data and no transition.
+  factory TimeSeriesSymbolAnnotationChart.withSampleData() {
+    return new TimeSeriesSymbolAnnotationChart(
+      _createSampleData(),
+      // Disable animations for image tests.
+      animate: false,
+    );
+  }
+
+  // EXCLUDE_FROM_GALLERY_DOCS_START
+  // This section is excluded from being copied to the gallery.
+  // It is used for creating random series data to demonstrate animation in
+  // the example app only.
+  factory TimeSeriesSymbolAnnotationChart.withRandomData() {
+    return new TimeSeriesSymbolAnnotationChart(_createRandomData());
+  }
+
+  /// Create random data.
+  static List<charts.Series<TimeSeriesSales, DateTime>> _createRandomData() {
+    final random = new Random();
+
+    final myDesktopData = [
+      new TimeSeriesSales(
+          timeCurrent: new DateTime(2017, 9, 19), sales: random.nextInt(100)),
+      new TimeSeriesSales(
+          timeCurrent: new DateTime(2017, 9, 26), sales: random.nextInt(100)),
+      new TimeSeriesSales(
+          timeCurrent: new DateTime(2017, 10, 3), sales: random.nextInt(100)),
+      new TimeSeriesSales(
+          timeCurrent: new DateTime(2017, 10, 10), sales: random.nextInt(100)),
+    ];
+
+    final myTabletData = [
+      new TimeSeriesSales(
+          timeCurrent: new DateTime(2017, 9, 19), sales: random.nextInt(100)),
+      new TimeSeriesSales(
+          timeCurrent: new DateTime(2017, 9, 26), sales: random.nextInt(100)),
+      new TimeSeriesSales(
+          timeCurrent: new DateTime(2017, 10, 3), sales: random.nextInt(100)),
+      new TimeSeriesSales(
+          timeCurrent: new DateTime(2017, 10, 10), sales: random.nextInt(100)),
+    ];
+
+    // Example of a series with two range annotations. A regular point shape
+    // will be drawn at the current domain value, and a range shape will be
+    // drawn between the previous and target domain values.
+    //
+    // Note that these series do not contain any measure values. They are
+    // positioned automatically in rows.
+    final myAnnotationDataTop = [
+      new TimeSeriesSales(
+        timeCurrent: new DateTime(2017, 9, 24),
+        timePrevious: new DateTime(2017, 9, 19),
+        timeTarget: new DateTime(2017, 9, 24),
+      ),
+      new TimeSeriesSales(
+        timeCurrent: new DateTime(2017, 9, 29),
+        timePrevious: new DateTime(2017, 9, 29),
+        timeTarget: new DateTime(2017, 10, 4),
+      ),
+    ];
+
+    // Example of a series with one range annotation and two single point
+    // annotations. Omitting the previous and target domain values causes that
+    // datum to be drawn as a single point.
+    final myAnnotationDataBottom = [
+      new TimeSeriesSales(
+        timeCurrent: new DateTime(2017, 9, 25),
+        timePrevious: new DateTime(2017, 9, 21),
+        timeTarget: new DateTime(2017, 9, 25),
+      ),
+      new TimeSeriesSales(timeCurrent: new DateTime(2017, 9, 31)),
+      new TimeSeriesSales(timeCurrent: new DateTime(2017, 10, 5)),
+    ];
+
+    return [
+      new charts.Series<TimeSeriesSales, DateTime>(
+        id: 'Desktop',
+        colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
+        domainFn: (TimeSeriesSales sales, _) => sales.timeCurrent,
+        measureFn: (TimeSeriesSales sales, _) => sales.sales,
+        data: myDesktopData,
+      ),
+      new charts.Series<TimeSeriesSales, DateTime>(
+        id: 'Tablet',
+        colorFn: (_, __) => charts.MaterialPalette.green.shadeDefault,
+        domainFn: (TimeSeriesSales sales, _) => sales.timeCurrent,
+        measureFn: (TimeSeriesSales sales, _) => sales.sales,
+        data: myTabletData,
+      ),
+      new charts.Series<TimeSeriesSales, DateTime>(
+        id: 'Annotation Series 1',
+        colorFn: (_, __) => charts.MaterialPalette.gray.shadeDefault,
+        domainFn: (TimeSeriesSales sales, _) => sales.timeCurrent,
+        domainLowerBoundFn: (TimeSeriesSales row, _) => row.timePrevious,
+        domainUpperBoundFn: (TimeSeriesSales row, _) => row.timeTarget,
+        // No measure values are needed for symbol annotations.
+        measureFn: (_, __) => null,
+        data: myAnnotationDataTop,
+      )
+        // Configure our custom symbol annotation renderer for this series.
+        ..setAttribute(charts.rendererIdKey, 'customSymbolAnnotation')
+        // Optional radius for the annotation shape. If not specified, this will
+        // default to the same radius as the points.
+        ..setAttribute(charts.boundsLineRadiusPxKey, 3.5),
+      new charts.Series<TimeSeriesSales, DateTime>(
+        id: 'Annotation Series 2',
+        colorFn: (_, __) => charts.MaterialPalette.red.shadeDefault,
+        domainFn: (TimeSeriesSales sales, _) => sales.timeCurrent,
+        domainLowerBoundFn: (TimeSeriesSales row, _) => row.timePrevious,
+        domainUpperBoundFn: (TimeSeriesSales row, _) => row.timeTarget,
+        // No measure values are needed for symbol annotations.
+        measureFn: (_, __) => null,
+        data: myAnnotationDataBottom,
+      )
+        // Configure our custom symbol annotation renderer for this series.
+        ..setAttribute(charts.rendererIdKey, 'customSymbolAnnotation')
+        // Optional radius for the annotation shape. If not specified, this will
+        // default to the same radius as the points.
+        ..setAttribute(charts.boundsLineRadiusPxKey, 3.5),
+    ];
+  }
+  // EXCLUDE_FROM_GALLERY_DOCS_END
+
+  @override
+  Widget build(BuildContext context) {
+    return new charts.TimeSeriesChart(
+      seriesList,
+      animate: animate,
+      // Custom renderer configuration for the point series.
+      customSeriesRenderers: [
+        new charts.SymbolAnnotationRendererConfig(
+            // ID used to link series to this renderer.
+            customRendererId: 'customSymbolAnnotation')
+      ],
+      // Optionally pass in a [DateTimeFactory] used by the chart. The factory
+      // should create the same type of [DateTime] as the data provided. If none
+      // specified, the default creates local date time.
+      dateTimeFactory: const charts.LocalDateTimeFactory(),
+    );
+  }
+
+  /// Create one series with sample hard coded data.
+  static List<charts.Series<TimeSeriesSales, DateTime>> _createSampleData() {
+    final myDesktopData = [
+      new TimeSeriesSales(timeCurrent: new DateTime(2017, 9, 19), sales: 5),
+      new TimeSeriesSales(timeCurrent: new DateTime(2017, 9, 26), sales: 25),
+      new TimeSeriesSales(timeCurrent: new DateTime(2017, 10, 3), sales: 100),
+      new TimeSeriesSales(timeCurrent: new DateTime(2017, 10, 10), sales: 75),
+    ];
+
+    final myTabletData = [
+      new TimeSeriesSales(timeCurrent: new DateTime(2017, 9, 19), sales: 10),
+      new TimeSeriesSales(timeCurrent: new DateTime(2017, 9, 26), sales: 50),
+      new TimeSeriesSales(timeCurrent: new DateTime(2017, 10, 3), sales: 200),
+      new TimeSeriesSales(timeCurrent: new DateTime(2017, 10, 10), sales: 150),
+    ];
+
+    // Example of a series with two range annotations. A regular point shape
+    // will be drawn at the current domain value, and a range shape will be
+    // drawn between the previous and target domain values.
+    //
+    // Note that these series do not contain any measure values. They are
+    // positioned automatically in rows.
+    final myAnnotationDataTop = [
+      new TimeSeriesSales(
+        timeCurrent: new DateTime(2017, 9, 24),
+        timePrevious: new DateTime(2017, 9, 19),
+        timeTarget: new DateTime(2017, 9, 24),
+      ),
+      new TimeSeriesSales(
+        timeCurrent: new DateTime(2017, 9, 29),
+        timePrevious: new DateTime(2017, 9, 29),
+        timeTarget: new DateTime(2017, 10, 4),
+      ),
+    ];
+
+    // Example of a series with one range annotation and two single point
+    // annotations. Omitting the previous and target domain values causes that
+    // datum to be drawn as a single point.
+    final myAnnotationDataBottom = [
+      new TimeSeriesSales(
+        timeCurrent: new DateTime(2017, 9, 25),
+        timePrevious: new DateTime(2017, 9, 21),
+        timeTarget: new DateTime(2017, 9, 25),
+      ),
+      new TimeSeriesSales(timeCurrent: new DateTime(2017, 9, 31)),
+      new TimeSeriesSales(timeCurrent: new DateTime(2017, 10, 5)),
+    ];
+
+    return [
+      new charts.Series<TimeSeriesSales, DateTime>(
+        id: 'Desktop',
+        colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
+        domainFn: (TimeSeriesSales sales, _) => sales.timeCurrent,
+        measureFn: (TimeSeriesSales sales, _) => sales.sales,
+        data: myDesktopData,
+      ),
+      new charts.Series<TimeSeriesSales, DateTime>(
+        id: 'Tablet',
+        colorFn: (_, __) => charts.MaterialPalette.green.shadeDefault,
+        domainFn: (TimeSeriesSales sales, _) => sales.timeCurrent,
+        measureFn: (TimeSeriesSales sales, _) => sales.sales,
+        data: myTabletData,
+      ),
+      new charts.Series<TimeSeriesSales, DateTime>(
+        id: 'Annotation Series 1',
+        colorFn: (_, __) => charts.MaterialPalette.gray.shadeDefault,
+        // A point shape will be drawn at the location of the domain.
+        domainFn: (TimeSeriesSales sales, _) => sales.timeCurrent,
+        // A range shape will be drawn between the lower and upper domain
+        // bounds. The range will be drawn underneath the domain point.
+        domainLowerBoundFn: (TimeSeriesSales row, _) => row.timePrevious,
+        domainUpperBoundFn: (TimeSeriesSales row, _) => row.timeTarget,
+        // No measure values are needed for symbol annotations.
+        measureFn: (_, __) => null,
+        data: myAnnotationDataTop,
+      )
+        // Configure our custom symbol annotation renderer for this series.
+        ..setAttribute(charts.rendererIdKey, 'customSymbolAnnotation')
+        // Optional radius for the annotation range. If not specified, this will
+        // default to the same radius as the domain point.
+        ..setAttribute(charts.boundsLineRadiusPxKey, 3.5),
+      new charts.Series<TimeSeriesSales, DateTime>(
+        id: 'Annotation Series 2',
+        colorFn: (_, __) => charts.MaterialPalette.red.shadeDefault,
+        // A point shape will be drawn at the location of the domain.
+        domainFn: (TimeSeriesSales sales, _) => sales.timeCurrent,
+        // A range shape will be drawn between the lower and upper domain
+        // bounds. The range will be drawn underneath the domain point.
+        domainLowerBoundFn: (TimeSeriesSales row, _) => row.timePrevious,
+        domainUpperBoundFn: (TimeSeriesSales row, _) => row.timeTarget,
+        // No measure values are needed for symbol annotations.
+        measureFn: (_, __) => null,
+        data: myAnnotationDataBottom,
+      )
+        // Configure our custom symbol annotation renderer for this series.
+        ..setAttribute(charts.rendererIdKey, 'customSymbolAnnotation')
+        // Optional radius for the annotation range. If not specified, this will
+        // default to the same radius as the domain point.
+        ..setAttribute(charts.boundsLineRadiusPxKey, 3.5),
+    ];
+  }
+}
+
+/// Sample time series data type.
+class TimeSeriesSales {
+  final DateTime timeCurrent;
+  final DateTime timePrevious;
+  final DateTime timeTarget;
+  final int sales;
+
+  TimeSeriesSales(
+      {this.timeCurrent, this.timePrevious, this.timeTarget, this.sales});
+}

web/charts/example/lib/time_series_chart/time_series_gallery.dart

@@ -0,0 +1,80 @@
+// Copyright 2018 the Charts project authors. Please see the AUTHORS file
+// for details.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import 'package:flutter_web/material.dart';
+import '../gallery_scaffold.dart';
+import 'confidence_interval.dart';
+import 'end_points_axis.dart';
+import 'line_annotation.dart';
+import 'range_annotation.dart';
+import 'range_annotation_margin.dart';
+import 'simple.dart';
+import 'symbol_annotation.dart';
+import 'with_bar_renderer.dart';
+
+List<GalleryScaffold> buildGallery() {
+  return [
+    new GalleryScaffold(
+      listTileIcon: new Icon(Icons.show_chart),
+      title: 'Time Series Chart',
+      subtitle: 'Simple single time series chart',
+      childBuilder: () => new SimpleTimeSeriesChart.withRandomData(),
+    ),
+    new GalleryScaffold(
+      listTileIcon: new Icon(Icons.show_chart),
+      title: 'End Points Axis Time Series Chart',
+      subtitle: 'Time series chart with an end points axis',
+      childBuilder: () => new EndPointsAxisTimeSeriesChart.withRandomData(),
+    ),
+    new GalleryScaffold(
+      listTileIcon: new Icon(Icons.show_chart),
+      title: 'Line Annotation on Time Series Chart',
+      subtitle: 'Time series chart with future line annotation',
+      childBuilder: () => new TimeSeriesLineAnnotationChart.withRandomData(),
+    ),
+    new GalleryScaffold(
+      listTileIcon: new Icon(Icons.show_chart),
+      title: 'Range Annotation on Time Series Chart',
+      subtitle: 'Time series chart with future range annotation',
+      childBuilder: () => new TimeSeriesRangeAnnotationChart.withRandomData(),
+    ),
+    new GalleryScaffold(
+      listTileIcon: new Icon(Icons.show_chart),
+      title: 'Range Annotation Margin Labels on Time Series Chart',
+      subtitle:
+          'Time series chart with range annotations with labels in margins',
+      childBuilder: () =>
+          new TimeSeriesRangeAnnotationMarginChart.withRandomData(),
+    ),
+    new GalleryScaffold(
+      listTileIcon: new Icon(Icons.show_chart),
+      title: 'Symbol Annotation Time Series Chart',
+      subtitle: 'Time series chart with annotation data below the draw area',
+      childBuilder: () => new TimeSeriesSymbolAnnotationChart.withRandomData(),
+    ),
+    new GalleryScaffold(
+      listTileIcon: new Icon(Icons.show_chart),
+      title: 'Time Series Chart with Bars',
+      subtitle: 'Time series chart using the bar renderer',
+      childBuilder: () => new TimeSeriesBar.withRandomData(),
+    ),
+    new GalleryScaffold(
+      listTileIcon: new Icon(Icons.show_chart),
+      title: 'Time Series Chart with Confidence Interval',
+      subtitle: 'Draws area around the confidence interval',
+      childBuilder: () => new TimeSeriesConfidenceInterval.withRandomData(),
+    ),
+  ];
+}

web/charts/example/lib/time_series_chart/with_bar_renderer.dart

@@ -0,0 +1,148 @@
+// Copyright 2018 the Charts project authors. Please see the AUTHORS file
+// for details.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+/// Example of a time series chart using a bar renderer.
+// EXCLUDE_FROM_GALLERY_DOCS_START
+import 'dart:math';
+// EXCLUDE_FROM_GALLERY_DOCS_END
+import 'package:charts_flutter/flutter.dart' as charts;
+import 'package:flutter_web/material.dart';
+
+class TimeSeriesBar extends StatelessWidget {
+  final List<charts.Series<TimeSeriesSales, DateTime>> seriesList;
+  final bool animate;
+
+  TimeSeriesBar(this.seriesList, {this.animate});
+
+  /// Creates a [TimeSeriesChart] with sample data and no transition.
+  factory TimeSeriesBar.withSampleData() {
+    return new TimeSeriesBar(
+      _createSampleData(),
+      // Disable animations for image tests.
+      animate: false,
+    );
+  }
+
+  // EXCLUDE_FROM_GALLERY_DOCS_START
+  // This section is excluded from being copied to the gallery.
+  // It is used for creating random series data to demonstrate animation in
+  // the example app only.
+  factory TimeSeriesBar.withRandomData() {
+    return new TimeSeriesBar(_createRandomData());
+  }
+
+  /// Create random data.
+  static List<charts.Series<TimeSeriesSales, DateTime>> _createRandomData() {
+    final random = new Random();
+
+    final data = [
+      new TimeSeriesSales(new DateTime(2017, 9, 1), random.nextInt(100)),
+      new TimeSeriesSales(new DateTime(2017, 9, 2), random.nextInt(100)),
+      new TimeSeriesSales(new DateTime(2017, 9, 3), random.nextInt(100)),
+      new TimeSeriesSales(new DateTime(2017, 9, 4), random.nextInt(100)),
+      new TimeSeriesSales(new DateTime(2017, 9, 5), random.nextInt(100)),
+      new TimeSeriesSales(new DateTime(2017, 9, 6), random.nextInt(100)),
+      new TimeSeriesSales(new DateTime(2017, 9, 7), random.nextInt(100)),
+      new TimeSeriesSales(new DateTime(2017, 9, 8), random.nextInt(100)),
+      new TimeSeriesSales(new DateTime(2017, 9, 9), random.nextInt(100)),
+      new TimeSeriesSales(new DateTime(2017, 9, 10), random.nextInt(100)),
+      new TimeSeriesSales(new DateTime(2017, 9, 11), random.nextInt(100)),
+      new TimeSeriesSales(new DateTime(2017, 9, 12), random.nextInt(100)),
+      new TimeSeriesSales(new DateTime(2017, 9, 13), random.nextInt(100)),
+      new TimeSeriesSales(new DateTime(2017, 9, 14), random.nextInt(100)),
+      new TimeSeriesSales(new DateTime(2017, 9, 15), random.nextInt(100)),
+      new TimeSeriesSales(new DateTime(2017, 9, 16), random.nextInt(100)),
+      new TimeSeriesSales(new DateTime(2017, 9, 17), random.nextInt(100)),
+      new TimeSeriesSales(new DateTime(2017, 9, 18), random.nextInt(100)),
+      new TimeSeriesSales(new DateTime(2017, 9, 19), random.nextInt(100)),
+      new TimeSeriesSales(new DateTime(2017, 9, 20), random.nextInt(100)),
+      new TimeSeriesSales(new DateTime(2017, 9, 21), random.nextInt(100)),
+    ];
+
+    return [
+      new charts.Series<TimeSeriesSales, DateTime>(
+        id: 'Sales',
+        colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
+        domainFn: (TimeSeriesSales sales, _) => sales.time,
+        measureFn: (TimeSeriesSales sales, _) => sales.sales,
+        data: data,
+      )
+    ];
+  }
+  // EXCLUDE_FROM_GALLERY_DOCS_END
+
+  @override
+  Widget build(BuildContext context) {
+    return new charts.TimeSeriesChart(
+      seriesList,
+      animate: animate,
+      // Set the default renderer to a bar renderer.
+      // This can also be one of the custom renderers of the time series chart.
+      defaultRenderer: new charts.BarRendererConfig<DateTime>(),
+      // It is recommended that default interactions be turned off if using bar
+      // renderer, because the line point highlighter is the default for time
+      // series chart.
+      defaultInteractions: false,
+      // If default interactions were removed, optionally add select nearest
+      // and the domain highlighter that are typical for bar charts.
+      behaviors: [new charts.SelectNearest(), new charts.DomainHighlighter()],
+    );
+  }
+
+  /// Create one series with sample hard coded data.
+  static List<charts.Series<TimeSeriesSales, DateTime>> _createSampleData() {
+    final data = [
+      new TimeSeriesSales(new DateTime(2017, 9, 1), 5),
+      new TimeSeriesSales(new DateTime(2017, 9, 2), 5),
+      new TimeSeriesSales(new DateTime(2017, 9, 3), 25),
+      new TimeSeriesSales(new DateTime(2017, 9, 4), 100),
+      new TimeSeriesSales(new DateTime(2017, 9, 5), 75),
+      new TimeSeriesSales(new DateTime(2017, 9, 6), 88),
+      new TimeSeriesSales(new DateTime(2017, 9, 7), 65),
+      new TimeSeriesSales(new DateTime(2017, 9, 8), 91),
+      new TimeSeriesSales(new DateTime(2017, 9, 9), 100),
+      new TimeSeriesSales(new DateTime(2017, 9, 10), 111),
+      new TimeSeriesSales(new DateTime(2017, 9, 11), 90),
+      new TimeSeriesSales(new DateTime(2017, 9, 12), 50),
+      new TimeSeriesSales(new DateTime(2017, 9, 13), 40),
+      new TimeSeriesSales(new DateTime(2017, 9, 14), 30),
+      new TimeSeriesSales(new DateTime(2017, 9, 15), 40),
+      new TimeSeriesSales(new DateTime(2017, 9, 16), 50),
+      new TimeSeriesSales(new DateTime(2017, 9, 17), 30),
+      new TimeSeriesSales(new DateTime(2017, 9, 18), 35),
+      new TimeSeriesSales(new DateTime(2017, 9, 19), 40),
+      new TimeSeriesSales(new DateTime(2017, 9, 20), 32),
+      new TimeSeriesSales(new DateTime(2017, 9, 21), 31),
+    ];
+
+    return [
+      new charts.Series<TimeSeriesSales, DateTime>(
+        id: 'Sales',
+        colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
+        domainFn: (TimeSeriesSales sales, _) => sales.time,
+        measureFn: (TimeSeriesSales sales, _) => sales.sales,
+        data: data,
+      )
+    ];
+  }
+}
+
+/// Sample time series data type.
+class TimeSeriesSales {
+  final DateTime time;
+  final int sales;
+
+  TimeSeriesSales(this.time, this.sales);
+}