Starter/samples
1
0
Fork 0
mirror of https://github.com/flutter/samples.git synced 2026-03-30 00:02:02 +00:00
Code Issues Releases Wiki Activity

Add flutter_web samples (#75)

Browse Source
This commit is contained in:
Kevin Moore
2019-05-07 13:32:08 -07:00
committed by Andrew Brogdon
parent 42f2dce01b
commit 3fe927cb29
697 changed files with 241026 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

137
web/charts/example/lib/axes/axes_gallery.dart Normal file
View File

@@ -0,0 +1,137 @@
// 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 'bar_secondary_axis.dart';
import 'bar_secondary_axis_only.dart';
import 'custom_axis_tick_formatters.dart';
import 'custom_font_size_and_color.dart';
import 'custom_measure_tick_count.dart';
import 'gridline_dash_pattern.dart';
import 'hidden_ticks_and_labels_axis.dart';
import 'horizontal_bar_secondary_axis.dart';
import 'integer_only_measure_axis.dart';
import 'line_disjoint_axis.dart';
import 'measure_axis_label_alignment.dart';
import 'numeric_initial_viewport.dart';
import 'nonzero_bound_measure_axis.dart';
import 'ordinal_initial_viewport.dart';
import 'short_tick_length_axis.dart';
import 'statically_provided_ticks.dart';
List<GalleryScaffold> buildGallery() {
return [
new GalleryScaffold(
listTileIcon: new Icon(Icons.insert_chart),
title: 'Bar chart with Secondary Measure Axis',
subtitle: 'Bar chart with a series using a secondary measure axis',
childBuilder: () => new BarChartWithSecondaryAxis.withRandomData(),
),
new GalleryScaffold(
listTileIcon: new Icon(Icons.insert_chart),
title: 'Bar chart with Secondary Measure Axis only',
subtitle: 'Bar chart with both series using secondary measure axis',
childBuilder: () => new BarChartWithSecondaryAxisOnly.withRandomData(),
),
new GalleryScaffold(
listTileIcon: new Transform.rotate(
angle: 1.5708, child: new Icon(Icons.insert_chart)),
title: 'Horizontal bar chart with Secondary Measure Axis',
subtitle:
'Horizontal Bar chart with a series using secondary measure axis',
childBuilder: () =>
new HorizontalBarChartWithSecondaryAxis.withRandomData(),
),
new GalleryScaffold(
listTileIcon: new Icon(Icons.insert_chart),
title: 'Short Ticks Axis',
subtitle: 'Bar chart with the primary measure axis having short ticks',
childBuilder: () => new ShortTickLengthAxis.withRandomData(),
),
new GalleryScaffold(
listTileIcon: new Icon(Icons.insert_chart),
title: 'Custom Axis Fonts',
subtitle: 'Bar chart with custom axis font size and color',
childBuilder: () => new CustomFontSizeAndColor.withRandomData(),
),
new GalleryScaffold(
listTileIcon: new Icon(Icons.insert_chart),
title: 'Label Alignment Axis',
subtitle: 'Bar chart with custom measure axis label alignments',
childBuilder: () => new MeasureAxisLabelAlignment.withRandomData(),
),
new GalleryScaffold(
listTileIcon: new Icon(Icons.insert_chart),
title: 'No Axis',
subtitle: 'Bar chart with only the axis line drawn',
childBuilder: () => new HiddenTicksAndLabelsAxis.withRandomData(),
),
new GalleryScaffold(
listTileIcon: new Icon(Icons.insert_chart),
title: 'Statically Provided Ticks',
subtitle: 'Bar chart with statically provided ticks',
childBuilder: () => new StaticallyProvidedTicks.withRandomData(),
),
new GalleryScaffold(
listTileIcon: new Icon(Icons.show_chart),
title: 'Custom Formatter',
subtitle: 'Timeseries with custom domain and measure tick formatters',
childBuilder: () => new CustomAxisTickFormatters.withRandomData(),
),
new GalleryScaffold(
listTileIcon: new Icon(Icons.show_chart),
title: 'Custom Tick Count',
subtitle: 'Timeseries with custom measure axis tick count',
childBuilder: () => new CustomMeasureTickCount.withRandomData(),
),
new GalleryScaffold(
listTileIcon: new Icon(Icons.show_chart),
title: 'Integer Measure Ticks',
subtitle: 'Timeseries with only whole number measure axis ticks',
childBuilder: () => new IntegerOnlyMeasureAxis.withRandomData(),
),
new GalleryScaffold(
listTileIcon: new Icon(Icons.show_chart),
title: 'Non-zero bound Axis',
subtitle: 'Timeseries with measure axis that does not include zero',
childBuilder: () => new NonzeroBoundMeasureAxis.withRandomData(),
),
new GalleryScaffold(
listTileIcon: new Icon(Icons.insert_chart),
title: 'Ordinal axis with initial viewport',
subtitle: 'Single series with initial viewport',
childBuilder: () => new OrdinalInitialViewport.withRandomData(),
),
new GalleryScaffold(
listTileIcon: new Icon(Icons.show_chart),
title: 'Numeric axis with initial viewport',
subtitle: 'Initial viewport is set to a subset of the data',
childBuilder: () => new NumericInitialViewport.withRandomData(),
),
new GalleryScaffold(
listTileIcon: new Icon(Icons.show_chart),
title: 'Gridline dash pattern',
subtitle: 'Timeseries with measure gridlines that have a dash pattern',
childBuilder: () => new GridlineDashPattern.withRandomData(),
),
new GalleryScaffold(
listTileIcon: new Icon(Icons.show_chart),
title: 'Disjoint Measure Axes',
subtitle: 'Line chart with disjoint measure axes',
childBuilder: () => new DisjointMeasureAxisLineChart.withRandomData(),
),
];
}

158
web/charts/example/lib/axes/bar_secondary_axis.dart Normal file
View File

@@ -0,0 +1,158 @@
// 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.
/// Bar chart example
// EXCLUDE_FROM_GALLERY_DOCS_START
import 'dart:math';
// EXCLUDE_FROM_GALLERY_DOCS_END
import 'package:flutter_web/material.dart';
import 'package:charts_flutter/flutter.dart' as charts;
/// Example of using a primary and secondary axis (left & right respectively)
/// for a set of grouped bars. This is useful for comparing Series that have
/// different units (revenue vs clicks by region), or different magnitudes (2017
/// revenue vs 1/1/2017 revenue by region).
///
/// The first series plots using the primary axis to position its measure
/// values (bar height). This is the default axis used if the measureAxisId is
/// not set.
///
/// The second series plots using the secondary axis due to the measureAxisId of
/// secondaryMeasureAxisId.
///
/// Note: primary and secondary may flip left and right positioning when
/// RTL.flipAxisLocations is set.
class BarChartWithSecondaryAxis extends StatelessWidget {
static const secondaryMeasureAxisId = 'secondaryMeasureAxisId';
final List<charts.Series> seriesList;
final bool animate;
BarChartWithSecondaryAxis(this.seriesList, {this.animate});
factory BarChartWithSecondaryAxis.withSampleData() {
return new BarChartWithSecondaryAxis(
_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 BarChartWithSecondaryAxis.withRandomData() {
return new BarChartWithSecondaryAxis(_createRandomData());
}
/// Create random data.
static List<charts.Series<OrdinalSales, String>> _createRandomData() {
final random = new Random();
final globalSalesData = [
new OrdinalSales('2014', random.nextInt(100) * 100),
new OrdinalSales('2015', random.nextInt(100) * 100),
new OrdinalSales('2016', random.nextInt(100) * 100),
new OrdinalSales('2017', random.nextInt(100) * 100),
];
final losAngelesSalesData = [
new OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)),
];
return [
new charts.Series<OrdinalSales, String>(
id: 'Global Revenue',
domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales,
data: globalSalesData,
),
new charts.Series<OrdinalSales, String>(
id: 'Los Angeles Revenue',
domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales,
data: losAngelesSalesData,
)..setAttribute(charts.measureAxisIdKey, secondaryMeasureAxisId)
// Set the 'Los Angeles Revenue' series to use the secondary measure axis.
// All series that have this set will use the secondary measure axis.
// All other series will use the primary measure axis.
];
}
// EXCLUDE_FROM_GALLERY_DOCS_END
@override
Widget build(BuildContext context) {
return new charts.BarChart(
seriesList,
animate: animate,
barGroupingType: charts.BarGroupingType.grouped,
// It is important when using both primary and secondary axes to choose
// the same number of ticks for both sides to get the gridlines to line
// up.
primaryMeasureAxis: new charts.NumericAxisSpec(
tickProviderSpec:
new charts.BasicNumericTickProviderSpec(desiredTickCount: 3)),
secondaryMeasureAxis: new charts.NumericAxisSpec(
tickProviderSpec:
new charts.BasicNumericTickProviderSpec(desiredTickCount: 3)),
);
}
/// Create series list with multiple series
static List<charts.Series<OrdinalSales, String>> _createSampleData() {
final globalSalesData = [
new OrdinalSales('2014', 5000),
new OrdinalSales('2015', 25000),
new OrdinalSales('2016', 100000),
new OrdinalSales('2017', 750000),
];
final losAngelesSalesData = [
new OrdinalSales('2014', 25),
new OrdinalSales('2015', 50),
new OrdinalSales('2016', 10),
new OrdinalSales('2017', 20),
];
return [
new charts.Series<OrdinalSales, String>(
id: 'Global Revenue',
domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales,
data: globalSalesData,
),
new charts.Series<OrdinalSales, String>(
id: 'Los Angeles Revenue',
domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales,
data: losAngelesSalesData,
)..setAttribute(charts.measureAxisIdKey, secondaryMeasureAxisId)
// Set the 'Los Angeles Revenue' series to use the secondary measure axis.
// All series that have this set will use the secondary measure axis.
// All other series will use the primary measure axis.
];
}
}
/// Sample ordinal data type.
class OrdinalSales {
final String year;
final int sales;
OrdinalSales(this.year, this.sales);
}

114
web/charts/example/lib/axes/bar_secondary_axis_only.dart Normal file
View File

@@ -0,0 +1,114 @@
// 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.
/// Bar chart example
// EXCLUDE_FROM_GALLERY_DOCS_START
import 'dart:math';
// EXCLUDE_FROM_GALLERY_DOCS_END
import 'package:flutter_web/material.dart';
import 'package:charts_flutter/flutter.dart' as charts;
/// Example of using only a secondary axis (on the right) for a set of grouped
/// bars.
///
/// Both series plots using the secondary axis due to the measureAxisId of
/// secondaryMeasureAxisId.
///
/// Note: secondary may flip left and right positioning when
/// RTL.flipAxisLocations is set.
class BarChartWithSecondaryAxisOnly extends StatelessWidget {
static const secondaryMeasureAxisId = 'secondaryMeasureAxisId';
final List<charts.Series> seriesList;
final bool animate;
BarChartWithSecondaryAxisOnly(this.seriesList, {this.animate});
factory BarChartWithSecondaryAxisOnly.withSampleData() {
return new BarChartWithSecondaryAxisOnly(
_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 BarChartWithSecondaryAxisOnly.withRandomData() {
return new BarChartWithSecondaryAxisOnly(_createRandomData());
}
/// Create random data.
static List<charts.Series<OrdinalSales, String>> _createRandomData() {
final random = new Random();
final globalSalesData = [
new OrdinalSales('2014', random.nextInt(100) * 100),
new OrdinalSales('2015', random.nextInt(100) * 100),
new OrdinalSales('2016', random.nextInt(100) * 100),
new OrdinalSales('2017', random.nextInt(100) * 100),
];
return [
new charts.Series<OrdinalSales, String>(
id: 'Global Revenue',
domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales,
data: globalSalesData,
)
// Set series to use the secondary measure axis.
..setAttribute(charts.measureAxisIdKey, secondaryMeasureAxisId),
];
}
// EXCLUDE_FROM_GALLERY_DOCS_END
@override
Widget build(BuildContext context) {
return new charts.BarChart(
seriesList,
animate: animate,
);
}
/// Create series list with multiple series
static List<charts.Series<OrdinalSales, String>> _createSampleData() {
final globalSalesData = [
new OrdinalSales('2014', 500),
new OrdinalSales('2015', 2500),
new OrdinalSales('2016', 1000),
new OrdinalSales('2017', 7500),
];
return [
new charts.Series<OrdinalSales, String>(
id: 'Global Revenue',
domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales,
data: globalSalesData,
)
// Set series to use the secondary measure axis.
..setAttribute(charts.measureAxisIdKey, secondaryMeasureAxisId),
];
}
}
/// Sample ordinal data type.
class OrdinalSales {
final String year;
final int sales;
OrdinalSales(this.year, this.sales);
}

144
web/charts/example/lib/axes/custom_axis_tick_formatters.dart Normal file
View File

@@ -0,0 +1,144 @@
// 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 custom measure and domain formatters.
// 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';
import 'package:intl/intl.dart';
class CustomAxisTickFormatters extends StatelessWidget {
final List<charts.Series> seriesList;
final bool animate;
CustomAxisTickFormatters(this.seriesList, {this.animate});
/// Creates a [TimeSeriesChart] with sample data and no transition.
factory CustomAxisTickFormatters.withSampleData() {
return new CustomAxisTickFormatters(
_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 CustomAxisTickFormatters.withRandomData() {
return new CustomAxisTickFormatters(_createRandomData());
}
/// Create random data.
static List<charts.Series<MyRow, DateTime>> _createRandomData() {
final random = new Random();
final data = [
new MyRow(new DateTime(2017, 9, 25), random.nextInt(100)),
new MyRow(new DateTime(2017, 9, 26), random.nextInt(100)),
new MyRow(new DateTime(2017, 9, 27), random.nextInt(100)),
new MyRow(new DateTime(2017, 9, 28), random.nextInt(100)),
new MyRow(new DateTime(2017, 9, 29), random.nextInt(100)),
new MyRow(new DateTime(2017, 9, 30), random.nextInt(100)),
new MyRow(new DateTime(2017, 10, 01), random.nextInt(100)),
new MyRow(new DateTime(2017, 10, 02), random.nextInt(100)),
new MyRow(new DateTime(2017, 10, 03), random.nextInt(100)),
new MyRow(new DateTime(2017, 10, 04), random.nextInt(100)),
new MyRow(new DateTime(2017, 10, 05), random.nextInt(100)),
];
return [
new charts.Series<MyRow, DateTime>(
id: 'Cost',
domainFn: (MyRow row, _) => row.timeStamp,
measureFn: (MyRow row, _) => row.cost,
data: data,
)
];
}
// EXCLUDE_FROM_GALLERY_DOCS_END
@override
Widget build(BuildContext context) {
/// Formatter for numeric ticks using [NumberFormat] to format into currency
///
/// This is what is used in the [NumericAxisSpec] below.
final simpleCurrencyFormatter =
new charts.BasicNumericTickFormatterSpec.fromNumberFormat(
new NumberFormat.compactSimpleCurrency());
/// Formatter for numeric ticks that uses the callback provided.
///
/// Use this formatter if you need to format values that [NumberFormat]
/// cannot provide.
///
/// To see this formatter, change [NumericAxisSpec] to use this formatter.
// final customTickFormatter =
// charts.BasicNumericTickFormatterSpec((num value) => 'MyValue: $value');
return new charts.TimeSeriesChart(seriesList,
animate: animate,
// Sets up a currency formatter for the measure axis.
primaryMeasureAxis: new charts.NumericAxisSpec(
tickFormatterSpec: simpleCurrencyFormatter),
/// Customizes the date tick formatter. It will print the day of month
/// as the default format, but include the month and year if it
/// transitions to a new month.
///
/// minute, hour, day, month, and year are all provided by default and
/// you can override them following this pattern.
domainAxis: new charts.DateTimeAxisSpec(
tickFormatterSpec: new charts.AutoDateTimeTickFormatterSpec(
day: new charts.TimeFormatterSpec(
format: 'd', transitionFormat: 'MM/dd/yyyy'))));
}
/// Create one series with sample hard coded data.
static List<charts.Series<MyRow, DateTime>> _createSampleData() {
final data = [
new MyRow(new DateTime(2017, 9, 25), 6),
new MyRow(new DateTime(2017, 9, 26), 8),
new MyRow(new DateTime(2017, 9, 27), 6),
new MyRow(new DateTime(2017, 9, 28), 9),
new MyRow(new DateTime(2017, 9, 29), 11),
new MyRow(new DateTime(2017, 9, 30), 15),
new MyRow(new DateTime(2017, 10, 01), 25),
new MyRow(new DateTime(2017, 10, 02), 33),
new MyRow(new DateTime(2017, 10, 03), 27),
new MyRow(new DateTime(2017, 10, 04), 31),
new MyRow(new DateTime(2017, 10, 05), 23),
];
return [
new charts.Series<MyRow, DateTime>(
id: 'Cost',
domainFn: (MyRow row, _) => row.timeStamp,
measureFn: (MyRow row, _) => row.cost,
data: data,
)
];
}
}
/// Sample time series data type.
class MyRow {
final DateTime timeStamp;
final int cost;
MyRow(this.timeStamp, this.cost);
}

136
web/charts/example/lib/axes/custom_font_size_and_color.dart Normal file
View File

@@ -0,0 +1,136 @@
// 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.
/// Custom Font Style Example
// EXCLUDE_FROM_GALLERY_DOCS_START
import 'dart:math';
// EXCLUDE_FROM_GALLERY_DOCS_END
import 'package:flutter_web/material.dart';
import 'package:charts_flutter/flutter.dart' as charts;
/// Example of using a custom primary measure and domain axis replacing the
/// renderSpec with one with a custom font size and a custom color.
///
/// There are many axis styling options in the SmallTickRenderer allowing you
/// to customize the font, tick lengths, and offsets.
class CustomFontSizeAndColor extends StatelessWidget {
final List<charts.Series> seriesList;
final bool animate;
CustomFontSizeAndColor(this.seriesList, {this.animate});
factory CustomFontSizeAndColor.withSampleData() {
return new CustomFontSizeAndColor(
_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 CustomFontSizeAndColor.withRandomData() {
return new CustomFontSizeAndColor(_createRandomData());
}
/// Create random data.
static List<charts.Series<OrdinalSales, String>> _createRandomData() {
final random = new Random();
final globalSalesData = [
new OrdinalSales('2014', random.nextInt(100) * 100),
new OrdinalSales('2015', random.nextInt(100) * 100),
new OrdinalSales('2016', random.nextInt(100) * 100),
new OrdinalSales('2017', random.nextInt(100) * 100),
];
return [
new charts.Series<OrdinalSales, String>(
id: 'Global Revenue',
domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales,
data: globalSalesData,
),
];
}
// EXCLUDE_FROM_GALLERY_DOCS_END
@override
Widget build(BuildContext context) {
return new charts.BarChart(
seriesList,
animate: animate,
/// Assign a custom style for the domain axis.
///
/// This is an OrdinalAxisSpec to match up with BarChart's default
/// ordinal domain axis (use NumericAxisSpec or DateTimeAxisSpec for
/// other charts).
domainAxis: new charts.OrdinalAxisSpec(
renderSpec: new charts.SmallTickRendererSpec(
// Tick and Label styling here.
labelStyle: new charts.TextStyleSpec(
fontSize: 18, // size in Pts.
color: charts.MaterialPalette.black),
// Change the line colors to match text color.
lineStyle: new charts.LineStyleSpec(
color: charts.MaterialPalette.black))),
/// Assign a custom style for the measure axis.
primaryMeasureAxis: new charts.NumericAxisSpec(
renderSpec: new charts.GridlineRendererSpec(
// Tick and Label styling here.
labelStyle: new charts.TextStyleSpec(
fontSize: 18, // size in Pts.
color: charts.MaterialPalette.black),
// Change the line colors to match text color.
lineStyle: new charts.LineStyleSpec(
color: charts.MaterialPalette.black))),
);
}
/// Create series list with single series
static List<charts.Series<OrdinalSales, String>> _createSampleData() {
final globalSalesData = [
new OrdinalSales('2014', 5000),
new OrdinalSales('2015', 25000),
new OrdinalSales('2016', 100000),
new OrdinalSales('2017', 750000),
];
return [
new charts.Series<OrdinalSales, String>(
id: 'Global Revenue',
domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales,
data: globalSalesData,
),
];
}
}
/// Sample ordinal data type.
class OrdinalSales {
final String year;
final int sales;
OrdinalSales(this.year, this.sales);
}

122
web/charts/example/lib/axes/custom_measure_tick_count.dart Normal file
View File

@@ -0,0 +1,122 @@
// 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 a custom number of ticks
///
/// The tick count can be set by setting the [desiredMinTickCount] and
/// [desiredMaxTickCount] for automatically adjusted tick counts (based on
/// how 'nice' the ticks are) or [desiredTickCount] for a fixed tick count.
// 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 CustomMeasureTickCount extends StatelessWidget {
final List<charts.Series> seriesList;
final bool animate;
CustomMeasureTickCount(this.seriesList, {this.animate});
/// Creates a [TimeSeriesChart] with sample data and no transition.
factory CustomMeasureTickCount.withSampleData() {
return new CustomMeasureTickCount(
_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 CustomMeasureTickCount.withRandomData() {
return new CustomMeasureTickCount(_createRandomData());
}
/// Create random data.
static List<charts.Series<MyRow, DateTime>> _createRandomData() {
final random = new Random();
final data = [
new MyRow(new DateTime(2017, 9, 25), random.nextInt(100)),
new MyRow(new DateTime(2017, 9, 26), random.nextInt(100)),
new MyRow(new DateTime(2017, 9, 27), random.nextInt(100)),
new MyRow(new DateTime(2017, 9, 28), random.nextInt(100)),
new MyRow(new DateTime(2017, 9, 29), random.nextInt(100)),
new MyRow(new DateTime(2017, 9, 30), random.nextInt(100)),
new MyRow(new DateTime(2017, 10, 01), random.nextInt(100)),
new MyRow(new DateTime(2017, 10, 02), random.nextInt(100)),
new MyRow(new DateTime(2017, 10, 03), random.nextInt(100)),
new MyRow(new DateTime(2017, 10, 04), random.nextInt(100)),
new MyRow(new DateTime(2017, 10, 05), random.nextInt(100)),
];
return [
new charts.Series<MyRow, DateTime>(
id: 'Cost',
domainFn: (MyRow row, _) => row.timeStamp,
measureFn: (MyRow row, _) => row.cost,
data: data,
)
];
}
// EXCLUDE_FROM_GALLERY_DOCS_END
@override
Widget build(BuildContext context) {
return new charts.TimeSeriesChart(seriesList,
animate: animate,
/// Customize the measure axis to have 2 ticks,
primaryMeasureAxis: new charts.NumericAxisSpec(
tickProviderSpec:
new charts.BasicNumericTickProviderSpec(desiredTickCount: 2)));
}
/// Create one series with sample hard coded data.
static List<charts.Series<MyRow, DateTime>> _createSampleData() {
final data = [
new MyRow(new DateTime(2017, 9, 25), 6),
new MyRow(new DateTime(2017, 9, 26), 8),
new MyRow(new DateTime(2017, 9, 27), 6),
new MyRow(new DateTime(2017, 9, 28), 9),
new MyRow(new DateTime(2017, 9, 29), 11),
new MyRow(new DateTime(2017, 9, 30), 15),
new MyRow(new DateTime(2017, 10, 01), 25),
new MyRow(new DateTime(2017, 10, 02), 33),
new MyRow(new DateTime(2017, 10, 03), 27),
new MyRow(new DateTime(2017, 10, 04), 31),
new MyRow(new DateTime(2017, 10, 05), 23),
];
return [
new charts.Series<MyRow, DateTime>(
id: 'Cost',
domainFn: (MyRow row, _) => row.timeStamp,
measureFn: (MyRow row, _) => row.cost,
data: data,
)
];
}
}
/// Sample time series data type.
class MyRow {
final DateTime timeStamp;
final int cost;
MyRow(this.timeStamp, this.cost);
}

114
web/charts/example/lib/axes/flipped_vertical_axis.dart Normal file
View File

@@ -0,0 +1,114 @@
// 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.
/// Bar chart example
// EXCLUDE_FROM_GALLERY_DOCS_START
import 'dart:math';
// EXCLUDE_FROM_GALLERY_DOCS_END
import 'package:flutter_web/material.dart';
import 'package:charts_flutter/flutter.dart' as charts;
/// Example of flipping the vertical measure axis direction so that larger
/// values render downward instead of the usual rendering up.
///
/// flipVerticalAxis, when set, flips the vertical axis from its default
/// direction.
///
/// Note: primary and secondary may flip left and right positioning when
/// RTL.flipAxisLocations is set.
class FlippedVerticalAxis extends StatelessWidget {
final List<charts.Series> seriesList;
final bool animate;
FlippedVerticalAxis(this.seriesList, {this.animate});
factory FlippedVerticalAxis.withSampleData() {
return new FlippedVerticalAxis(
_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 FlippedVerticalAxis.withRandomData() {
return new FlippedVerticalAxis(_createRandomData());
}
/// Create random data.
static List<charts.Series<RunnerRank, String>> _createRandomData() {
final random = new Random();
const runners = ['Smith', 'Jones', 'Brown', 'Doe'];
// Randomly assign runners, but leave the order of the places.
final raceData = [
new RunnerRank(runners.removeAt(random.nextInt(runners.length)), 1),
new RunnerRank(runners.removeAt(random.nextInt(runners.length)), 2),
new RunnerRank(runners.removeAt(random.nextInt(runners.length)), 3),
new RunnerRank(runners.removeAt(random.nextInt(runners.length)), 4),
];
return [
new charts.Series<RunnerRank, String>(
id: 'Race Results',
domainFn: (RunnerRank row, _) => row.name,
measureFn: (RunnerRank row, _) => row.place,
data: raceData,
),
];
}
// EXCLUDE_FROM_GALLERY_DOCS_END
// Known Issue, the bar chart cannot render negative direction bars at this
// time so the result is an empty chart.
// TODO: Remove this comment
@override
Widget build(BuildContext context) {
return new charts.BarChart(
seriesList,
animate: animate,
flipVerticalAxis: true,
);
}
/// Create series list with multiple series
static List<charts.Series<RunnerRank, String>> _createSampleData() {
final raceData = [
new RunnerRank('Smith', 1),
new RunnerRank('Jones', 2),
new RunnerRank('Brown', 3),
new RunnerRank('Doe', 4),
];
return [
new charts.Series<RunnerRank, String>(
id: 'Race Results',
domainFn: (RunnerRank row, _) => row.name,
measureFn: (RunnerRank row, _) => row.place,
data: raceData),
];
}
}
/// Datum/Row for the chart.
class RunnerRank {
final String name;
final int place;
RunnerRank(this.name, this.place);
}

120
web/charts/example/lib/axes/gridline_dash_pattern.dart Normal file
View File

@@ -0,0 +1,120 @@
// 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 gridlines that have a dash pattern.
// 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 GridlineDashPattern extends StatelessWidget {
final List<charts.Series> seriesList;
final bool animate;
GridlineDashPattern(this.seriesList, {this.animate});
/// Creates a [TimeSeriesChart] with sample data and no transition.
factory GridlineDashPattern.withSampleData() {
return new GridlineDashPattern(
_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 GridlineDashPattern.withRandomData() {
return new GridlineDashPattern(_createRandomData());
}
/// Create random data.
static List<charts.Series<MyRow, DateTime>> _createRandomData() {
final random = new Random();
final data = [
new MyRow(new DateTime(2017, 9, 25), random.nextInt(100)),
new MyRow(new DateTime(2017, 9, 26), random.nextInt(100)),
new MyRow(new DateTime(2017, 9, 27), random.nextInt(100)),
new MyRow(new DateTime(2017, 9, 28), random.nextInt(100)),
new MyRow(new DateTime(2017, 9, 29), random.nextInt(100)),
new MyRow(new DateTime(2017, 9, 30), random.nextInt(100)),
new MyRow(new DateTime(2017, 10, 01), random.nextInt(100)),
new MyRow(new DateTime(2017, 10, 02), random.nextInt(100)),
new MyRow(new DateTime(2017, 10, 03), random.nextInt(100)),
new MyRow(new DateTime(2017, 10, 04), random.nextInt(100)),
new MyRow(new DateTime(2017, 10, 05), random.nextInt(100)),
];
return [
new charts.Series<MyRow, DateTime>(
id: 'Cost',
domainFn: (MyRow row, _) => row.timeStamp,
measureFn: (MyRow row, _) => row.cost,
data: data,
)
];
}
// EXCLUDE_FROM_GALLERY_DOCS_END
@override
Widget build(BuildContext context) {
return new charts.TimeSeriesChart(seriesList,
animate: animate,
/// Customize the gridlines to use a dash pattern.
primaryMeasureAxis: new charts.NumericAxisSpec(
renderSpec: charts.GridlineRendererSpec(
lineStyle: charts.LineStyleSpec(
dashPattern: [4, 4],
))));
}
/// Create one series with sample hard coded data.
static List<charts.Series<MyRow, DateTime>> _createSampleData() {
final data = [
new MyRow(new DateTime(2017, 9, 25), 6),
new MyRow(new DateTime(2017, 9, 26), 8),
new MyRow(new DateTime(2017, 9, 27), 6),
new MyRow(new DateTime(2017, 9, 28), 9),
new MyRow(new DateTime(2017, 9, 29), 11),
new MyRow(new DateTime(2017, 9, 30), 15),
new MyRow(new DateTime(2017, 10, 01), 25),
new MyRow(new DateTime(2017, 10, 02), 33),
new MyRow(new DateTime(2017, 10, 03), 27),
new MyRow(new DateTime(2017, 10, 04), 31),
new MyRow(new DateTime(2017, 10, 05), 23),
];
return [
new charts.Series<MyRow, DateTime>(
id: 'Cost',
domainFn: (MyRow row, _) => row.timeStamp,
measureFn: (MyRow row, _) => row.cost,
data: data,
)
];
}
}
/// Sample time series data type.
class MyRow {
final DateTime timeStamp;
final int cost;
MyRow(this.timeStamp, this.cost);
}

118
web/charts/example/lib/axes/hidden_ticks_and_labels_axis.dart Normal file
View File

@@ -0,0 +1,118 @@
// 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.
/// No Axis Example
// EXCLUDE_FROM_GALLERY_DOCS_START
import 'dart:math';
// EXCLUDE_FROM_GALLERY_DOCS_END
import 'package:flutter_web/material.dart';
import 'package:charts_flutter/flutter.dart' as charts;
/// Example of hiding both axis.
class HiddenTicksAndLabelsAxis extends StatelessWidget {
final List<charts.Series> seriesList;
final bool animate;
HiddenTicksAndLabelsAxis(this.seriesList, {this.animate});
factory HiddenTicksAndLabelsAxis.withSampleData() {
return new HiddenTicksAndLabelsAxis(
_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 HiddenTicksAndLabelsAxis.withRandomData() {
return new HiddenTicksAndLabelsAxis(_createRandomData());
}
/// Create random data.
static List<charts.Series<OrdinalSales, String>> _createRandomData() {
final random = new Random();
final globalSalesData = [
new OrdinalSales('2014', random.nextInt(100) * 100),
new OrdinalSales('2015', random.nextInt(100) * 100),
new OrdinalSales('2016', random.nextInt(100) * 100),
new OrdinalSales('2017', random.nextInt(100) * 100),
];
return [
new charts.Series<OrdinalSales, String>(
id: 'Global Revenue',
domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales,
data: globalSalesData,
),
];
}
// EXCLUDE_FROM_GALLERY_DOCS_END
@override
Widget build(BuildContext context) {
return new charts.BarChart(
seriesList,
animate: animate,
/// Assign a custom style for the measure axis.
///
/// The NoneRenderSpec can still draw an axis line with
/// showAxisLine=true.
primaryMeasureAxis:
new charts.NumericAxisSpec(renderSpec: new charts.NoneRenderSpec()),
/// This is an OrdinalAxisSpec to match up with BarChart's default
/// ordinal domain axis (use NumericAxisSpec or DateTimeAxisSpec for
/// other charts).
domainAxis: new charts.OrdinalAxisSpec(
// Make sure that we draw the domain axis line.
showAxisLine: true,
// But don't draw anything else.
renderSpec: new charts.NoneRenderSpec()),
);
}
/// Create series list with single series
static List<charts.Series<OrdinalSales, String>> _createSampleData() {
final globalSalesData = [
new OrdinalSales('2014', 5000),
new OrdinalSales('2015', 25000),
new OrdinalSales('2016', 100000),
new OrdinalSales('2017', 750000),
];
return [
new charts.Series<OrdinalSales, String>(
id: 'Global Revenue',
domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales,
data: globalSalesData,
),
];
}
}
/// Sample ordinal data type.
class OrdinalSales {
final String year;
final int sales;
OrdinalSales(this.year, this.sales);
}

160
web/charts/example/lib/axes/horizontal_bar_secondary_axis.dart Normal file
View File

@@ -0,0 +1,160 @@
// 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.
/// Bar chart example
// EXCLUDE_FROM_GALLERY_DOCS_START
import 'dart:math';
// EXCLUDE_FROM_GALLERY_DOCS_END
import 'package:flutter_web/material.dart';
import 'package:charts_flutter/flutter.dart' as charts;
/// Example of using a primary and secondary axis (left & right respectively)
/// for a set of grouped bars. This is useful for comparing Series that have
/// different units (revenue vs clicks by region), or different magnitudes (2017
/// revenue vs 1/1/2017 revenue by region).
///
/// The first series plots using the primary axis to position its measure
/// values (bar height). This is the default axis used if the measureAxisId is
/// not set.
///
/// The second series plots using the secondary axis due to the measureAxisId of
/// secondaryMeasureAxisId.
///
/// Note: primary and secondary may flip left and right positioning when
/// RTL.flipAxisLocations is set.
class HorizontalBarChartWithSecondaryAxis extends StatelessWidget {
static const secondaryMeasureAxisId = 'secondaryMeasureAxisId';
final List<charts.Series> seriesList;
final bool animate;
HorizontalBarChartWithSecondaryAxis(this.seriesList, {this.animate});
factory HorizontalBarChartWithSecondaryAxis.withSampleData() {
return new HorizontalBarChartWithSecondaryAxis(
_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 HorizontalBarChartWithSecondaryAxis.withRandomData() {
return new HorizontalBarChartWithSecondaryAxis(_createRandomData());
}
/// Create random data.
static List<charts.Series<OrdinalSales, String>> _createRandomData() {
final random = new Random();
final globalSalesData = [
new OrdinalSales('2014', random.nextInt(100) * 100),
new OrdinalSales('2015', random.nextInt(100) * 100),
new OrdinalSales('2016', random.nextInt(100) * 100),
new OrdinalSales('2017', random.nextInt(100) * 100),
];
final losAngelesSalesData = [
new OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)),
];
return [
new charts.Series<OrdinalSales, String>(
id: 'Global Revenue',
domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales,
data: globalSalesData,
),
new charts.Series<OrdinalSales, String>(
id: 'Los Angeles Revenue',
domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales,
data: losAngelesSalesData,
)..setAttribute(charts.measureAxisIdKey, secondaryMeasureAxisId)
// Set the 'Los Angeles Revenue' series to use the secondary measure axis.
// All series that have this set will use the secondary measure axis.
// All other series will use the primary measure axis.
];
}
// EXCLUDE_FROM_GALLERY_DOCS_END
@override
Widget build(BuildContext context) {
// For horizontal bar charts, set the [vertical] flag to false.
return new charts.BarChart(
seriesList,
animate: animate,
barGroupingType: charts.BarGroupingType.grouped,
vertical: false,
// It is important when using both primary and secondary axes to choose
// the same number of ticks for both sides to get the gridlines to line
// up.
primaryMeasureAxis: new charts.NumericAxisSpec(
tickProviderSpec:
new charts.BasicNumericTickProviderSpec(desiredTickCount: 3)),
secondaryMeasureAxis: new charts.NumericAxisSpec(
tickProviderSpec:
new charts.BasicNumericTickProviderSpec(desiredTickCount: 3)),
);
}
/// Create series list with multiple series
static List<charts.Series<OrdinalSales, String>> _createSampleData() {
final globalSalesData = [
new OrdinalSales('2014', 5000),
new OrdinalSales('2015', 25000),
new OrdinalSales('2016', 100000),
new OrdinalSales('2017', 750000),
];
final losAngelesSalesData = [
new OrdinalSales('2014', 25),
new OrdinalSales('2015', 50),
new OrdinalSales('2016', 10),
new OrdinalSales('2017', 20),
];
return [
new charts.Series<OrdinalSales, String>(
id: 'Global Revenue',
domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales,
data: globalSalesData,
),
new charts.Series<OrdinalSales, String>(
id: 'Los Angeles Revenue',
domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales,
data: losAngelesSalesData,
)..setAttribute(charts.measureAxisIdKey, secondaryMeasureAxisId)
// Set the 'Los Angeles Revenue' series to use the secondary measure axis.
// All series that have this set will use the secondary measure axis.
// All other series will use the primary measure axis.
];
}
}
/// Sample ordinal data type.
class OrdinalSales {
final String year;
final int sales;
OrdinalSales(this.year, this.sales);
}

129
web/charts/example/lib/axes/integer_only_measure_axis.dart Normal file
View File

@@ -0,0 +1,129 @@
// 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 forcing the measure axis to have whole number
/// ticks. This is useful if the measure units don't make sense to present as
/// fractional.
///
/// This is done by customizing the measure axis and setting
/// [dataIsInWholeNumbers] on the tick provider.
// 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 IntegerOnlyMeasureAxis extends StatelessWidget {
final List<charts.Series> seriesList;
final bool animate;
IntegerOnlyMeasureAxis(this.seriesList, {this.animate});
/// Creates a [TimeSeriesChart] with sample data and no transition.
factory IntegerOnlyMeasureAxis.withSampleData() {
return new IntegerOnlyMeasureAxis(
_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 IntegerOnlyMeasureAxis.withRandomData() {
return new IntegerOnlyMeasureAxis(_createRandomData());
}
/// Create random data.
static List<charts.Series<MyRow, DateTime>> _createRandomData() {
final random = new Random();
final data = [
new MyRow(new DateTime(2017, 9, 25), random.nextDouble().round()),
new MyRow(new DateTime(2017, 9, 26), random.nextDouble().round()),
new MyRow(new DateTime(2017, 9, 27), random.nextDouble().round()),
new MyRow(new DateTime(2017, 9, 28), random.nextDouble().round()),
new MyRow(new DateTime(2017, 9, 29), random.nextDouble().round()),
new MyRow(new DateTime(2017, 9, 30), random.nextDouble().round()),
new MyRow(new DateTime(2017, 10, 01), random.nextDouble().round()),
new MyRow(new DateTime(2017, 10, 02), random.nextDouble().round()),
new MyRow(new DateTime(2017, 10, 03), random.nextDouble().round()),
new MyRow(new DateTime(2017, 10, 04), random.nextDouble().round()),
new MyRow(new DateTime(2017, 10, 05), random.nextDouble().round()),
];
return [
new charts.Series<MyRow, DateTime>(
id: 'Headcount',
domainFn: (MyRow row, _) => row.timeStamp,
measureFn: (MyRow row, _) => row.headcount,
data: data,
)
];
}
// EXCLUDE_FROM_GALLERY_DOCS_END
@override
Widget build(BuildContext context) {
return new charts.TimeSeriesChart(
seriesList,
animate: animate,
// Provides a custom axis ensuring that the ticks are in whole numbers.
primaryMeasureAxis: new charts.NumericAxisSpec(
tickProviderSpec: new charts.BasicNumericTickProviderSpec(
// Make sure we don't have values less than 1 as ticks
// (ie: counts).
dataIsInWholeNumbers: true,
// Fixed tick count to highlight the integer only behavior
// generating ticks [0, 1, 2, 3, 4].
desiredTickCount: 5)),
);
}
/// Create one series with sample hard coded data.
static List<charts.Series<MyRow, DateTime>> _createSampleData() {
final data = [
new MyRow(new DateTime(2017, 9, 25), 0),
new MyRow(new DateTime(2017, 9, 26), 0),
new MyRow(new DateTime(2017, 9, 27), 0),
new MyRow(new DateTime(2017, 9, 28), 0),
new MyRow(new DateTime(2017, 9, 29), 0),
new MyRow(new DateTime(2017, 9, 30), 0),
new MyRow(new DateTime(2017, 10, 01), 1),
new MyRow(new DateTime(2017, 10, 02), 1),
new MyRow(new DateTime(2017, 10, 03), 1),
new MyRow(new DateTime(2017, 10, 04), 1),
new MyRow(new DateTime(2017, 10, 05), 1),
];
return [
new charts.Series<MyRow, DateTime>(
id: 'Headcount',
domainFn: (MyRow row, _) => row.timeStamp,
measureFn: (MyRow row, _) => row.headcount,
data: data,
)
];
}
}
/// Sample time series data type.
class MyRow {
final DateTime timeStamp;
final int headcount;
MyRow(this.timeStamp, this.headcount);
}

268
web/charts/example/lib/axes/line_disjoint_axis.dart Normal file
View File

@@ -0,0 +1,268 @@
// 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 using disjoint measure axes to render 4 series of lines with
/// separate scales. The general use case for this type of chart is to show
/// differences in the trends of the data, without comparing their absolute
/// values.
///
/// Disjoint measure axes will be used to scale the series associated with them,
/// but they will not render any tick elements on either side of the chart.
// EXCLUDE_FROM_GALLERY_DOCS_START
import 'dart:collection' show LinkedHashMap;
import 'dart:math';
// EXCLUDE_FROM_GALLERY_DOCS_END
import 'package:charts_flutter/flutter.dart' as charts;
import 'package:flutter_web/material.dart';
class DisjointMeasureAxisLineChart extends StatelessWidget {
final List<charts.Series> seriesList;
final bool animate;
DisjointMeasureAxisLineChart(this.seriesList, {this.animate});
/// Creates a [LineChart] with sample data and no transition.
factory DisjointMeasureAxisLineChart.withSampleData() {
return new DisjointMeasureAxisLineChart(
_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 DisjointMeasureAxisLineChart.withRandomData() {
return new DisjointMeasureAxisLineChart(_createRandomData());
}
/// Create random data.
static List<charts.Series<LinearClicks, num>> _createRandomData() {
final random = new Random();
// The first three series contain similar data with different magnitudes.
// This demonstrates the ability to graph the trends in each series relative
// to each other, without the largest magnitude series compressing the
// smallest.
final myFakeDesktopData = [
new LinearClicks(0, clickCount: random.nextInt(100)),
new LinearClicks(1, clickCount: random.nextInt(100)),
new LinearClicks(2, clickCount: random.nextInt(100)),
new LinearClicks(3, clickCount: random.nextInt(100)),
];
final myFakeTabletData = [
new LinearClicks(0, clickCount: random.nextInt(100) * 100),
new LinearClicks(1, clickCount: random.nextInt(100) * 100),
new LinearClicks(2, clickCount: random.nextInt(100) * 100),
new LinearClicks(3, clickCount: random.nextInt(100) * 100),
];
final myFakeMobileData = [
new LinearClicks(0, clickCount: random.nextInt(100) * 1000),
new LinearClicks(1, clickCount: random.nextInt(100) * 1000),
new LinearClicks(2, clickCount: random.nextInt(100) * 1000),
new LinearClicks(3, clickCount: random.nextInt(100) * 1000),
];
// The fourth series renders with decimal values, representing a very
// different sort ratio-based data. If this was on the same axis as any of
// the other series, it would be squashed near zero.
final myFakeClickRateData = [
new LinearClicks(0, clickRate: .25),
new LinearClicks(1, clickRate: .65),
new LinearClicks(2, clickRate: .50),
new LinearClicks(3, clickRate: .30),
];
return [
// We render an empty series on the primary measure axis to ensure that
// the axis itself gets rendered. This helps us draw the gridlines on the
// chart.
new charts.Series<LinearClicks, int>(
id: 'Fake Series',
domainFn: (LinearClicks clickCount, _) => clickCount.year,
measureFn: (LinearClicks clickCount, _) => clickCount.clickCount,
data: []),
new charts.Series<LinearClicks, int>(
id: 'Desktop',
colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
domainFn: (LinearClicks clickCount, _) => clickCount.year,
measureFn: (LinearClicks clickCount, _) => clickCount.clickCount,
data: myFakeDesktopData,
)
// Set the 'Desktop' series to use a disjoint axis.
..setAttribute(charts.measureAxisIdKey, 'axis 1'),
new charts.Series<LinearClicks, int>(
id: 'Tablet',
colorFn: (_, __) => charts.MaterialPalette.red.shadeDefault,
domainFn: (LinearClicks clickCount, _) => clickCount.year,
measureFn: (LinearClicks clickCount, _) => clickCount.clickCount,
data: myFakeTabletData,
)
// Set the 'Tablet' series to use a disjoint axis.
..setAttribute(charts.measureAxisIdKey, 'axis 2'),
new charts.Series<LinearClicks, int>(
id: 'Mobile',
colorFn: (_, __) => charts.MaterialPalette.green.shadeDefault,
domainFn: (LinearClicks clickCount, _) => clickCount.year,
measureFn: (LinearClicks clickCount, _) => clickCount.clickCount,
data: myFakeMobileData,
)
// Set the 'Mobile' series to use a disjoint axis.
..setAttribute(charts.measureAxisIdKey, 'axis 3'),
new charts.Series<LinearClicks, int>(
id: 'Click Rate',
colorFn: (_, __) => charts.MaterialPalette.purple.shadeDefault,
domainFn: (LinearClicks clickCount, _) => clickCount.year,
measureFn: (LinearClicks clickCount, _) => clickCount.clickCount,
data: myFakeClickRateData,
)
// Set the 'Click Rate' series to use a disjoint axis.
..setAttribute(charts.measureAxisIdKey, 'axis 4'),
];
}
// EXCLUDE_FROM_GALLERY_DOCS_END
@override
Widget build(BuildContext context) {
return new charts.LineChart(seriesList,
animate: animate,
// Configure a primary measure axis that will render gridlines across
// the chart. This axis uses fake ticks with no labels to ensure that we
// get 5 grid lines.
//
// We do this because disjoint measure axes do not draw any tick
// elements on the chart.
primaryMeasureAxis: new charts.NumericAxisSpec(
tickProviderSpec: new charts.StaticNumericTickProviderSpec(
// Create the ticks to be used the domain axis.
<charts.TickSpec<num>>[
new charts.TickSpec(0, label: ''),
new charts.TickSpec(1, label: ''),
new charts.TickSpec(2, label: ''),
new charts.TickSpec(3, label: ''),
new charts.TickSpec(4, label: ''),
],
)),
// Create one disjoint measure axis per series on the chart.
//
// Disjoint measure axes will be used to scale the rendered data,
// without drawing any tick elements on either side of the chart.
disjointMeasureAxes:
new LinkedHashMap<String, charts.NumericAxisSpec>.from({
'axis 1': new charts.NumericAxisSpec(),
'axis 2': new charts.NumericAxisSpec(),
'axis 3': new charts.NumericAxisSpec(),
'axis 4': new charts.NumericAxisSpec(),
}));
}
/// Create one series with sample hard coded data.
static List<charts.Series<LinearClicks, int>> _createSampleData() {
// The first three series contain similar data with different magnitudes.
// This demonstrates the ability to graph the trends in each series relative
// to each other, without the largest magnitude series compressing the
// smallest.
final myFakeDesktopData = [
new LinearClicks(0, clickCount: 25),
new LinearClicks(1, clickCount: 125),
new LinearClicks(2, clickCount: 920),
new LinearClicks(3, clickCount: 375),
];
final myFakeTabletData = [
new LinearClicks(0, clickCount: 375),
new LinearClicks(1, clickCount: 1850),
new LinearClicks(2, clickCount: 9700),
new LinearClicks(3, clickCount: 5000),
];
final myFakeMobileData = [
new LinearClicks(0, clickCount: 5000),
new LinearClicks(1, clickCount: 25000),
new LinearClicks(2, clickCount: 100000),
new LinearClicks(3, clickCount: 75000),
];
// The fourth series renders with decimal values, representing a very
// different sort ratio-based data. If this was on the same axis as any of
// the other series, it would be squashed near zero.
final myFakeClickRateData = [
new LinearClicks(0, clickRate: .25),
new LinearClicks(1, clickRate: .65),
new LinearClicks(2, clickRate: .50),
new LinearClicks(3, clickRate: .30),
];
return [
// We render an empty series on the primary measure axis to ensure that
// the axis itself gets rendered. This helps us draw the gridlines on the
// chart.
new charts.Series<LinearClicks, int>(
id: 'Fake Series',
domainFn: (LinearClicks clickCount, _) => clickCount.year,
measureFn: (LinearClicks clickCount, _) => clickCount.clickCount,
data: []),
new charts.Series<LinearClicks, int>(
id: 'Desktop',
colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
domainFn: (LinearClicks clickCount, _) => clickCount.year,
measureFn: (LinearClicks clickCount, _) => clickCount.clickCount,
data: myFakeDesktopData,
)
// Set the 'Desktop' series to use a disjoint axis.
..setAttribute(charts.measureAxisIdKey, 'axis 1'),
new charts.Series<LinearClicks, int>(
id: 'Tablet',
colorFn: (_, __) => charts.MaterialPalette.red.shadeDefault,
domainFn: (LinearClicks clickCount, _) => clickCount.year,
measureFn: (LinearClicks clickCount, _) => clickCount.clickCount,
data: myFakeTabletData,
)
// Set the 'Tablet' series to use a disjoint axis.
..setAttribute(charts.measureAxisIdKey, 'axis 2'),
new charts.Series<LinearClicks, int>(
id: 'Mobile',
colorFn: (_, __) => charts.MaterialPalette.green.shadeDefault,
domainFn: (LinearClicks clickCount, _) => clickCount.year,
measureFn: (LinearClicks clickCount, _) => clickCount.clickCount,
data: myFakeMobileData,
)
// Set the 'Mobile' series to use a disjoint axis.
..setAttribute(charts.measureAxisIdKey, 'axis 3'),
new charts.Series<LinearClicks, int>(
id: 'Click Rate',
colorFn: (_, __) => charts.MaterialPalette.purple.shadeDefault,
domainFn: (LinearClicks clickCount, _) => clickCount.year,
measureFn: (LinearClicks clickCount, _) => clickCount.clickRate,
data: myFakeClickRateData,
)
// Set the 'Click Rate' series to use a disjoint axis.
..setAttribute(charts.measureAxisIdKey, 'axis 4'),
];
}
}
/// Sample linear data type.
class LinearClicks {
final int year;
final int clickCount;
final double clickRate;
LinearClicks(this.year, {this.clickCount = null, this.clickRate = null});
}

122
web/charts/example/lib/axes/measure_axis_label_alignment.dart Normal file
View File

@@ -0,0 +1,122 @@
// 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.
/// Custom Tick Label Alignment Example
// EXCLUDE_FROM_GALLERY_DOCS_START
import 'dart:math';
// EXCLUDE_FROM_GALLERY_DOCS_END
import 'package:flutter_web/material.dart';
import 'package:charts_flutter/flutter.dart' as charts;
/// Example of using a custom primary measure replacing the renderSpec with one
/// that aligns the text under the tick and left justifies.
class MeasureAxisLabelAlignment extends StatelessWidget {
final List<charts.Series> seriesList;
final bool animate;
MeasureAxisLabelAlignment(this.seriesList, {this.animate});
factory MeasureAxisLabelAlignment.withSampleData() {
return new MeasureAxisLabelAlignment(
_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 MeasureAxisLabelAlignment.withRandomData() {
return new MeasureAxisLabelAlignment(_createRandomData());
}
/// Create random data.
static List<charts.Series<OrdinalSales, String>> _createRandomData() {
final random = new Random();
final globalSalesData = [
new OrdinalSales('2014', random.nextInt(100) * 100),
new OrdinalSales('2015', random.nextInt(100) * 100),
new OrdinalSales('2016', random.nextInt(100) * 100),
new OrdinalSales('2017', random.nextInt(100) * 100),
];
return [
new charts.Series<OrdinalSales, String>(
id: 'Global Revenue',
domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales,
data: globalSalesData,
),
];
}
// EXCLUDE_FROM_GALLERY_DOCS_END
@override
Widget build(BuildContext context) {
return new charts.BarChart(
seriesList,
animate: animate,
/// Customize the primary measure axis using a small tick renderer.
/// Use String instead of num for ordinal domain axis
/// (typically bar charts).
primaryMeasureAxis: new charts.NumericAxisSpec(
renderSpec: new charts.GridlineRendererSpec(
// Display the measure axis labels below the gridline.
//
// 'Before' & 'after' follow the axis value direction.
// Vertical axes draw 'before' below & 'after' above the tick.
// Horizontal axes draw 'before' left & 'after' right the tick.
labelAnchor: charts.TickLabelAnchor.before,
// Left justify the text in the axis.
//
// Note: outside means that the secondary measure axis would right
// justify.
labelJustification: charts.TickLabelJustification.outside,
)),
);
}
/// Create series list with single series
static List<charts.Series<OrdinalSales, String>> _createSampleData() {
final globalSalesData = [
new OrdinalSales('2014', 5000),
new OrdinalSales('2015', 25000),
new OrdinalSales('2016', 100000),
new OrdinalSales('2017', 750000),
];
return [
new charts.Series<OrdinalSales, String>(
id: 'Global Revenue',
domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales,
data: globalSalesData,
),
];
}
}
/// Sample ordinal data type.
class OrdinalSales {
final String year;
final int sales;
OrdinalSales(this.year, this.sales);
}

119
web/charts/example/lib/axes/nonzero_bound_measure_axis.dart Normal file
View File

@@ -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 timeseries chart that has a measure axis that does NOT include
/// zero. It starts at 100 and goes to 140.
// 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 NonzeroBoundMeasureAxis extends StatelessWidget {
final List<charts.Series> seriesList;
final bool animate;
NonzeroBoundMeasureAxis(this.seriesList, {this.animate});
/// Creates a [TimeSeriesChart] with sample data and no transition.
factory NonzeroBoundMeasureAxis.withSampleData() {
return new NonzeroBoundMeasureAxis(
_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 NonzeroBoundMeasureAxis.withRandomData() {
return new NonzeroBoundMeasureAxis(_createRandomData());
}
/// Create random data.
static List<charts.Series<MyRow, DateTime>> _createRandomData() {
final random = new Random();
final data = [
new MyRow(new DateTime(2017, 9, 25), random.nextInt(100) + 100),
new MyRow(new DateTime(2017, 9, 26), random.nextInt(100) + 100),
new MyRow(new DateTime(2017, 9, 27), random.nextInt(100) + 100),
new MyRow(new DateTime(2017, 9, 28), random.nextInt(100) + 100),
new MyRow(new DateTime(2017, 9, 29), random.nextInt(100) + 100),
new MyRow(new DateTime(2017, 9, 30), random.nextInt(100) + 100),
new MyRow(new DateTime(2017, 10, 01), random.nextInt(100) + 100),
new MyRow(new DateTime(2017, 10, 02), random.nextInt(100) + 100),
new MyRow(new DateTime(2017, 10, 03), random.nextInt(100) + 100),
new MyRow(new DateTime(2017, 10, 04), random.nextInt(100) + 100),
new MyRow(new DateTime(2017, 10, 05), random.nextInt(100) + 100),
];
return [
new charts.Series<MyRow, DateTime>(
id: 'Headcount',
domainFn: (MyRow row, _) => row.timeStamp,
measureFn: (MyRow row, _) => row.headcount,
data: data,
)
];
}
// EXCLUDE_FROM_GALLERY_DOCS_END
@override
Widget build(BuildContext context) {
return new charts.TimeSeriesChart(seriesList,
animate: animate,
// Provide a tickProviderSpec which does NOT require that zero is
// included.
primaryMeasureAxis: new charts.NumericAxisSpec(
tickProviderSpec:
new charts.BasicNumericTickProviderSpec(zeroBound: false)));
}
/// Create one series with sample hard coded data.
static List<charts.Series<MyRow, DateTime>> _createSampleData() {
final data = [
new MyRow(new DateTime(2017, 9, 25), 106),
new MyRow(new DateTime(2017, 9, 26), 108),
new MyRow(new DateTime(2017, 9, 27), 106),
new MyRow(new DateTime(2017, 9, 28), 109),
new MyRow(new DateTime(2017, 9, 29), 111),
new MyRow(new DateTime(2017, 9, 30), 115),
new MyRow(new DateTime(2017, 10, 01), 125),
new MyRow(new DateTime(2017, 10, 02), 133),
new MyRow(new DateTime(2017, 10, 03), 127),
new MyRow(new DateTime(2017, 10, 04), 131),
new MyRow(new DateTime(2017, 10, 05), 123),
];
return [
new charts.Series<MyRow, DateTime>(
id: 'Headcount',
domainFn: (MyRow row, _) => row.timeStamp,
measureFn: (MyRow row, _) => row.headcount,
data: data,
)
];
}
}
/// Sample time series data type.
class MyRow {
final DateTime timeStamp;
final int headcount;
MyRow(this.timeStamp, this.headcount);
}

133
web/charts/example/lib/axes/numeric_initial_viewport.dart Normal file
View File

@@ -0,0 +1,133 @@
// 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 setting an initial viewport for ordinal axis.
///
/// This allows for specifying the specific range of data to show that differs
/// from what was provided in the series list.
///
/// In this example, the series list has numeric data from 0 to 10, but we
/// want to show from 3 to 7.
/// We can do this by specifying an [NumericExtents] in [NumericAxisSpec].
// 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 NumericInitialViewport extends StatelessWidget {
final List<charts.Series> seriesList;
final bool animate;
NumericInitialViewport(this.seriesList, {this.animate});
/// Creates a [LineChart] with sample data and no transition.
factory NumericInitialViewport.withSampleData() {
return new NumericInitialViewport(
_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 NumericInitialViewport.withRandomData() {
return new NumericInitialViewport(_createRandomData());
}
/// Create random data.
static List<charts.Series<LinearSales, num>> _createRandomData() {
final random = new Random();
final data = [
new LinearSales(0, random.nextInt(100)),
new LinearSales(1, random.nextInt(100)),
new LinearSales(2, random.nextInt(100)),
new LinearSales(3, random.nextInt(100)),
new LinearSales(4, random.nextInt(100)),
new LinearSales(5, random.nextInt(100)),
new LinearSales(6, random.nextInt(100)),
new LinearSales(7, random.nextInt(100)),
new LinearSales(8, random.nextInt(100)),
new LinearSales(9, random.nextInt(100)),
new LinearSales(10, random.nextInt(100)),
];
return [
new charts.Series<LinearSales, int>(
id: 'Sales',
colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales,
data: data,
)
];
}
// EXCLUDE_FROM_GALLERY_DOCS_END
@override
Widget build(BuildContext context) {
return new charts.LineChart(
seriesList,
animate: animate,
domainAxis: new charts.NumericAxisSpec(
// Set the initial viewport by providing a new AxisSpec with the
// desired viewport, in NumericExtents.
viewport: new charts.NumericExtents(3.0, 7.0)),
// Optionally add a pan or pan and zoom behavior.
// If pan/zoom is not added, the viewport specified remains the viewport.
behaviors: [new charts.PanAndZoomBehavior()],
);
}
/// Create one series with sample hard coded data.
static List<charts.Series<LinearSales, int>> _createSampleData() {
final data = [
new LinearSales(0, 5),
new LinearSales(1, 25),
new LinearSales(2, 100),
new LinearSales(3, 75),
new LinearSales(4, 55),
new LinearSales(5, 66),
new LinearSales(6, 110),
new LinearSales(7, 70),
new LinearSales(8, 20),
new LinearSales(9, 25),
new LinearSales(10, 45),
];
return [
new charts.Series<LinearSales, int>(
id: 'Sales',
colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales,
data: data,
)
];
}
}
/// Sample linear data type.
class LinearSales {
final int year;
final int sales;
LinearSales(this.year, this.sales);
}

145
web/charts/example/lib/axes/ordinal_initial_viewport.dart Normal file
View File

@@ -0,0 +1,145 @@
// 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 setting an initial viewport for ordinal axis.
///
/// This allows for specifying the specific range of data to show that differs
/// from what was provided in the series list.
///
/// In this example, the series list has ordinal data from year 2014 to 2030,
/// but we want to show starting at 2018 and we only want to show 4 values.
/// We can do this by specifying an [OrdinalViewport] in [OrdinalAxisSpec].
// 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 OrdinalInitialViewport extends StatelessWidget {
final List<charts.Series> seriesList;
final bool animate;
OrdinalInitialViewport(this.seriesList, {this.animate});
/// Creates a [BarChart] with sample data and no transition.
factory OrdinalInitialViewport.withSampleData() {
return new OrdinalInitialViewport(
_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 OrdinalInitialViewport.withRandomData() {
return new OrdinalInitialViewport(_createRandomData());
}
/// Create random data.
static List<charts.Series<OrdinalSales, String>> _createRandomData() {
final random = new Random();
final data = [
new OrdinalSales('2014', random.nextInt(100)),
new OrdinalSales('2015', random.nextInt(100)),
new OrdinalSales('2016', random.nextInt(100)),
new OrdinalSales('2017', random.nextInt(100)),
new OrdinalSales('2018', random.nextInt(100)),
new OrdinalSales('2019', random.nextInt(100)),
new OrdinalSales('2020', random.nextInt(100)),
new OrdinalSales('2021', random.nextInt(100)),
new OrdinalSales('2022', random.nextInt(100)),
new OrdinalSales('2023', random.nextInt(100)),
new OrdinalSales('2024', random.nextInt(100)),
new OrdinalSales('2025', random.nextInt(100)),
new OrdinalSales('2026', random.nextInt(100)),
new OrdinalSales('2027', random.nextInt(100)),
new OrdinalSales('2028', random.nextInt(100)),
new OrdinalSales('2029', random.nextInt(100)),
new OrdinalSales('2030', random.nextInt(100)),
];
return [
new charts.Series<OrdinalSales, String>(
id: 'Sales',
colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales,
data: data,
)
];
}
// EXCLUDE_FROM_GALLERY_DOCS_END
@override
Widget build(BuildContext context) {
return new charts.BarChart(
seriesList,
animate: animate,
// Set the initial viewport by providing a new AxisSpec with the
// desired viewport: a starting domain and the data size.
domainAxis: new charts.OrdinalAxisSpec(
viewport: new charts.OrdinalViewport('2018', 4)),
// Optionally add a pan or pan and zoom behavior.
// If pan/zoom is not added, the viewport specified remains the viewport.
behaviors: [new charts.PanAndZoomBehavior()],
);
}
/// Create one series with sample hard coded data.
static List<charts.Series<OrdinalSales, String>> _createSampleData() {
final data = [
new OrdinalSales('2014', 5),
new OrdinalSales('2015', 25),
new OrdinalSales('2016', 100),
new OrdinalSales('2017', 75),
new OrdinalSales('2018', 33),
new OrdinalSales('2019', 80),
new OrdinalSales('2020', 21),
new OrdinalSales('2021', 77),
new OrdinalSales('2022', 8),
new OrdinalSales('2023', 12),
new OrdinalSales('2024', 42),
new OrdinalSales('2025', 70),
new OrdinalSales('2026', 77),
new OrdinalSales('2027', 55),
new OrdinalSales('2028', 19),
new OrdinalSales('2029', 66),
new OrdinalSales('2030', 27),
];
return [
new charts.Series<OrdinalSales, String>(
id: 'Sales',
colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales,
data: data,
)
];
}
}
/// Sample ordinal data type.
class OrdinalSales {
final String year;
final int sales;
OrdinalSales(this.year, this.sales);
}

115
web/charts/example/lib/axes/short_tick_length_axis.dart Normal file
View File

@@ -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.
/// Custom Tick Style Example
// EXCLUDE_FROM_GALLERY_DOCS_START
import 'dart:math';
// EXCLUDE_FROM_GALLERY_DOCS_END
import 'package:flutter_web/material.dart';
import 'package:charts_flutter/flutter.dart' as charts;
/// Example of using a custom primary measure axis replacing the default
/// gridline rendering with a short tick rendering. It also turns on the axis
/// line so that the ticks have something to line up against.
///
/// There are many axis styling options in the SmallTickRenderer allowing you
/// to customize the font, tick lengths, and offsets.
class ShortTickLengthAxis extends StatelessWidget {
final List<charts.Series> seriesList;
final bool animate;
ShortTickLengthAxis(this.seriesList, {this.animate});
factory ShortTickLengthAxis.withSampleData() {
return new ShortTickLengthAxis(
_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 ShortTickLengthAxis.withRandomData() {
return new ShortTickLengthAxis(_createRandomData());
}
/// Create random data.
static List<charts.Series<OrdinalSales, String>> _createRandomData() {
final random = new Random();
final globalSalesData = [
new OrdinalSales('2014', random.nextInt(100) * 100),
new OrdinalSales('2015', random.nextInt(100) * 100),
new OrdinalSales('2016', random.nextInt(100) * 100),
new OrdinalSales('2017', random.nextInt(100) * 100),
];
return [
new charts.Series<OrdinalSales, String>(
id: 'Global Revenue',
domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales,
data: globalSalesData,
),
];
}
// EXCLUDE_FROM_GALLERY_DOCS_END
@override
Widget build(BuildContext context) {
return new charts.BarChart(
seriesList,
animate: animate,
/// Customize the primary measure axis using a small tick renderer.
/// Note: use String instead of num for ordinal domain axis
/// (typically bar charts).
primaryMeasureAxis: new charts.NumericAxisSpec(
renderSpec: new charts.SmallTickRendererSpec(
// Tick and Label styling here.
)),
);
}
/// Create series list with single series
static List<charts.Series<OrdinalSales, String>> _createSampleData() {
final globalSalesData = [
new OrdinalSales('2014', 5000),
new OrdinalSales('2015', 25000),
new OrdinalSales('2016', 100000),
new OrdinalSales('2017', 750000),
];
return [
new charts.Series<OrdinalSales, String>(
id: 'Global Revenue',
domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales,
data: globalSalesData,
),
];
}
}
/// Sample ordinal data type.
class OrdinalSales {
final String year;
final int sales;
OrdinalSales(this.year, this.sales);
}

134
web/charts/example/lib/axes/statically_provided_ticks.dart Normal file
View File

@@ -0,0 +1,134 @@
// 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 axis using statically provided ticks.
// EXCLUDE_FROM_GALLERY_DOCS_START
import 'dart:math';
// EXCLUDE_FROM_GALLERY_DOCS_END
import 'package:flutter_web/material.dart';
import 'package:charts_flutter/flutter.dart' as charts;
/// Example of specifying a custom set of ticks to be used on the domain axis.
///
/// Specifying custom set of ticks allows specifying exactly what ticks are
/// used in the axis. Each tick is also allowed to have a different style set.
///
/// For an ordinal axis, the [StaticOrdinalTickProviderSpec] is shown in this
/// example defining ticks to be used with [TickSpec] of String.
///
/// For numeric axis, the [StaticNumericTickProviderSpec] can be used by passing
/// in a list of ticks defined with [TickSpec] of num.
///
/// For datetime axis, the [StaticDateTimeTickProviderSpec] can be used by
/// passing in a list of ticks defined with [TickSpec] of datetime.
class StaticallyProvidedTicks extends StatelessWidget {
final List<charts.Series> seriesList;
final bool animate;
StaticallyProvidedTicks(this.seriesList, {this.animate});
factory StaticallyProvidedTicks.withSampleData() {
return new StaticallyProvidedTicks(
_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 StaticallyProvidedTicks.withRandomData() {
return new StaticallyProvidedTicks(_createRandomData());
}
/// Create random data.
static List<charts.Series<OrdinalSales, String>> _createRandomData() {
final random = new Random();
final globalSalesData = [
new OrdinalSales('2014', random.nextInt(100) * 100),
new OrdinalSales('2015', random.nextInt(100) * 100),
new OrdinalSales('2016', random.nextInt(100) * 100),
new OrdinalSales('2017', random.nextInt(100) * 100),
];
return [
new charts.Series<OrdinalSales, String>(
id: 'Global Revenue',
domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales,
data: globalSalesData,
),
];
}
// EXCLUDE_FROM_GALLERY_DOCS_END
@override
Widget build(BuildContext context) {
// Create the ticks to be used the domain axis.
final staticTicks = <charts.TickSpec<String>>[
new charts.TickSpec(
// Value must match the domain value.
'2014',
// Optional label for this tick, defaults to domain value if not set.
label: 'Year 2014',
// The styling for this tick.
style: new charts.TextStyleSpec(
color: new charts.Color(r: 0x4C, g: 0xAF, b: 0x50))),
// If no text style is specified - the style from renderSpec will be used
// if one is specified.
new charts.TickSpec('2015'),
new charts.TickSpec('2016'),
new charts.TickSpec('2017'),
];
return new charts.BarChart(
seriesList,
animate: animate,
domainAxis: new charts.OrdinalAxisSpec(
tickProviderSpec:
new charts.StaticOrdinalTickProviderSpec(staticTicks)),
);
}
/// Create series list with single series
static List<charts.Series<OrdinalSales, String>> _createSampleData() {
final globalSalesData = [
new OrdinalSales('2014', 5000),
new OrdinalSales('2015', 25000),
new OrdinalSales('2016', 100000),
new OrdinalSales('2017', 750000),
];
return [
new charts.Series<OrdinalSales, String>(
id: 'Global Revenue',
domainFn: (OrdinalSales sales, _) => sales.year,
measureFn: (OrdinalSales sales, _) => sales.sales,
data: globalSalesData,
),
];
}
}
/// Sample ordinal data type.
class OrdinalSales {
final String year;
final int sales;
OrdinalSales(this.year, this.sales);
}