Starter/samples
1
0
Fork 0
mirror of https://github.com/flutter/samples.git synced 2026-03-29 15:51:47 +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

101
web/charts/example/lib/line_chart/animation_zoom.dart Normal file
View File

@@ -0,0 +1,101 @@
// 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 line chart with pan and zoom enabled via
/// [Charts.PanAndZoomBehavior].
// 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 LineAnimationZoomChart extends StatelessWidget {
final List<charts.Series> seriesList;
final bool animate;
LineAnimationZoomChart(this.seriesList, {this.animate});
/// Creates a [LineChart] with sample data and no transition.
factory LineAnimationZoomChart.withSampleData() {
return new LineAnimationZoomChart(
_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 LineAnimationZoomChart.withRandomData() {
return new LineAnimationZoomChart(_createRandomData());
}
/// Create random data.
static List<charts.Series<LinearSales, num>> _createRandomData() {
final random = new Random();
final data = <LinearSales>[];
for (var i = 0; i < 100; i++) {
data.add(new LinearSales(i, random.nextInt(100)));
}
return [
new charts.Series<LinearSales, int>(
id: 'Sales',
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, 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),
];
return [
new charts.Series<LinearSales, int>(
id: 'Sales',
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);
}

141
web/charts/example/lib/line_chart/area_and_line.dart Normal file
View File

@@ -0,0 +1,141 @@
// 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.
/// Line 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 AreaAndLineChart extends StatelessWidget {
final List<charts.Series> seriesList;
final bool animate;
AreaAndLineChart(this.seriesList, {this.animate});
/// Creates a [LineChart] with sample data and no transition.
factory AreaAndLineChart.withSampleData() {
return new AreaAndLineChart(
_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 AreaAndLineChart.withRandomData() {
return new AreaAndLineChart(_createRandomData());
}
/// Create random data.
static List<charts.Series<LinearSales, num>> _createRandomData() {
final random = new Random();
final myFakeDesktopData = [
new LinearSales(0, random.nextInt(100)),
new LinearSales(1, random.nextInt(100)),
new LinearSales(2, random.nextInt(100)),
new LinearSales(3, random.nextInt(100)),
];
var myFakeTabletData = [
new LinearSales(0, random.nextInt(100)),
new LinearSales(1, random.nextInt(100)),
new LinearSales(2, random.nextInt(100)),
new LinearSales(3, random.nextInt(100)),
];
return [
new charts.Series<LinearSales, int>(
id: 'Desktop',
colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales,
data: myFakeDesktopData,
),
new charts.Series<LinearSales, int>(
id: 'Tablet',
colorFn: (_, __) => charts.MaterialPalette.green.shadeDefault,
domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales,
data: myFakeTabletData,
)
// Configure our custom bar target renderer for this series.
..setAttribute(charts.rendererIdKey, 'customArea'),
];
}
// EXCLUDE_FROM_GALLERY_DOCS_END
@override
Widget build(BuildContext context) {
return new charts.LineChart(seriesList,
animate: animate,
customSeriesRenderers: [
new charts.LineRendererConfig(
// ID used to link series to this renderer.
customRendererId: 'customArea',
includeArea: true,
stacked: true),
]);
}
/// Create one series with sample hard coded data.
static List<charts.Series<LinearSales, int>> _createSampleData() {
final myFakeDesktopData = [
new LinearSales(0, 5),
new LinearSales(1, 25),
new LinearSales(2, 100),
new LinearSales(3, 75),
];
var myFakeTabletData = [
new LinearSales(0, 10),
new LinearSales(1, 50),
new LinearSales(2, 200),
new LinearSales(3, 150),
];
return [
new charts.Series<LinearSales, int>(
id: 'Desktop',
colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales,
data: myFakeDesktopData,
)
// Configure our custom bar target renderer for this series.
..setAttribute(charts.rendererIdKey, 'customArea'),
new charts.Series<LinearSales, int>(
id: 'Tablet',
colorFn: (_, __) => charts.MaterialPalette.green.shadeDefault,
domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales,
data: myFakeTabletData,
),
];
}
}
/// Sample linear data type.
class LinearSales {
final int year;
final int sales;
LinearSales(this.year, this.sales);
}

162
web/charts/example/lib/line_chart/dash_pattern.dart Normal file
View File

@@ -0,0 +1,162 @@
// 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.
/// Dash pattern line 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';
/// Example of a line chart rendered with dash patterns.
class DashPatternLineChart extends StatelessWidget {
final List<charts.Series> seriesList;
final bool animate;
DashPatternLineChart(this.seriesList, {this.animate});
/// Creates a [LineChart] with sample data and no transition.
factory DashPatternLineChart.withSampleData() {
return new DashPatternLineChart(
_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 DashPatternLineChart.withRandomData() {
return new DashPatternLineChart(_createRandomData());
}
/// Create random data.
static List<charts.Series<LinearSales, num>> _createRandomData() {
final random = new Random();
final myFakeDesktopData = [
new LinearSales(0, random.nextInt(100)),
new LinearSales(1, random.nextInt(100)),
new LinearSales(2, random.nextInt(100)),
new LinearSales(3, random.nextInt(100)),
];
var myFakeTabletData = [
new LinearSales(0, random.nextInt(100)),
new LinearSales(1, random.nextInt(100)),
new LinearSales(2, random.nextInt(100)),
new LinearSales(3, random.nextInt(100)),
];
var myFakeMobileData = [
new LinearSales(0, random.nextInt(100)),
new LinearSales(1, random.nextInt(100)),
new LinearSales(2, random.nextInt(100)),
new LinearSales(3, random.nextInt(100)),
];
return [
new charts.Series<LinearSales, int>(
id: 'Desktop',
colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales,
data: myFakeDesktopData,
),
new charts.Series<LinearSales, int>(
id: 'Tablet',
colorFn: (_, __) => charts.MaterialPalette.red.shadeDefault,
dashPatternFn: (_, __) => [2, 2],
domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales,
data: myFakeTabletData,
),
new charts.Series<LinearSales, int>(
id: 'Mobile',
colorFn: (_, __) => charts.MaterialPalette.green.shadeDefault,
dashPatternFn: (_, __) => [8, 3, 2, 3],
domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales,
data: myFakeMobileData,
)
];
}
// EXCLUDE_FROM_GALLERY_DOCS_END
@override
Widget build(BuildContext context) {
return new charts.LineChart(seriesList, animate: animate);
}
/// Create three series with sample hard coded data.
static List<charts.Series<LinearSales, int>> _createSampleData() {
final myFakeDesktopData = [
new LinearSales(0, 5),
new LinearSales(1, 25),
new LinearSales(2, 100),
new LinearSales(3, 75),
];
var myFakeTabletData = [
new LinearSales(0, 10),
new LinearSales(1, 50),
new LinearSales(2, 200),
new LinearSales(3, 150),
];
var myFakeMobileData = [
new LinearSales(0, 15),
new LinearSales(1, 75),
new LinearSales(2, 300),
new LinearSales(3, 225),
];
return [
new charts.Series<LinearSales, int>(
id: 'Desktop',
colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales,
data: myFakeDesktopData,
),
new charts.Series<LinearSales, int>(
id: 'Tablet',
colorFn: (_, __) => charts.MaterialPalette.red.shadeDefault,
dashPatternFn: (_, __) => [2, 2],
domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales,
data: myFakeTabletData,
),
new charts.Series<LinearSales, int>(
id: 'Mobile',
colorFn: (_, __) => charts.MaterialPalette.green.shadeDefault,
dashPatternFn: (_, __) => [8, 3, 2, 3],
domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales,
data: myFakeMobileData,
)
];
}
}
/// Sample linear data type.
class LinearSales {
final int year;
final int sales;
LinearSales(this.year, this.sales);
}

124
web/charts/example/lib/line_chart/line_annotation.dart Normal file
View File

@@ -0,0 +1,124 @@
// 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.
/// Line chart with line annotations 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 LineLineAnnotationChart extends StatelessWidget {
final List<charts.Series> seriesList;
final bool animate;
LineLineAnnotationChart(this.seriesList, {this.animate});
/// Creates a [LineChart] with sample data and line annotations.
///
/// The second 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.
factory LineLineAnnotationChart.withSampleData() {
return new LineLineAnnotationChart(
_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 LineLineAnnotationChart.withRandomData() {
return new LineLineAnnotationChart(_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)),
// Fix one of the points to 100 so that the annotations are consistently
// placed.
new LinearSales(3, 100),
];
return [
new charts.Series<LinearSales, int>(
id: 'Sales',
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, behaviors: [
new charts.RangeAnnotation([
new charts.LineAnnotationSegment(
1.0, charts.RangeAnnotationAxisType.domain,
startLabel: 'Domain 1'),
new charts.LineAnnotationSegment(
4, charts.RangeAnnotationAxisType.domain,
endLabel: 'Domain 2', color: charts.MaterialPalette.gray.shade200),
new charts.LineAnnotationSegment(
20, charts.RangeAnnotationAxisType.measure,
startLabel: 'Measure 1 Start',
endLabel: 'Measure 1 End',
color: charts.MaterialPalette.gray.shade300),
new charts.LineAnnotationSegment(
65, charts.RangeAnnotationAxisType.measure,
startLabel: 'Measure 2 Start',
endLabel: 'Measure 2 End',
color: charts.MaterialPalette.gray.shade400),
]),
]);
}
/// 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),
];
return [
new charts.Series<LinearSales, int>(
id: 'Sales',
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);
}

113
web/charts/example/lib/line_chart/line_gallery.dart Normal file
View File

@@ -0,0 +1,113 @@
// 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 'animation_zoom.dart';
import 'area_and_line.dart';
import 'dash_pattern.dart';
import 'line_annotation.dart';
import 'points.dart';
import 'range_annotation.dart';
import 'range_annotation_margin.dart';
import 'segments.dart';
import 'simple.dart';
import 'simple_nulls.dart';
import 'stacked_area.dart';
import 'stacked_area_custom_color.dart';
import 'stacked_area_nulls.dart';
List<GalleryScaffold> buildGallery() {
return [
new GalleryScaffold(
listTileIcon: new Icon(Icons.show_chart),
title: 'Simple Line Chart',
subtitle: 'With a single series and default line point highlighter',
childBuilder: () => new SimpleLineChart.withRandomData(),
),
new GalleryScaffold(
listTileIcon: new Icon(Icons.show_chart),
title: 'Stacked Area Chart',
subtitle: 'Stacked area chart with three series',
childBuilder: () => new StackedAreaLineChart.withRandomData(),
),
new GalleryScaffold(
listTileIcon: new Icon(Icons.show_chart),
title: 'Stacked Area Custom Color Chart',
subtitle: 'Stacked area chart with custom area skirt color',
childBuilder: () => new StackedAreaCustomColorLineChart.withRandomData(),
),
new GalleryScaffold(
listTileIcon: new Icon(Icons.show_chart),
title: 'Area and Line Combo Chart',
subtitle: 'Combo chart with one line series and one area series',
childBuilder: () => new AreaAndLineChart.withRandomData(),
),
new GalleryScaffold(
listTileIcon: new Icon(Icons.show_chart),
title: 'Points Line Chart',
subtitle: 'Line chart with points on a single series',
childBuilder: () => new PointsLineChart.withRandomData(),
),
new GalleryScaffold(
listTileIcon: new Icon(Icons.show_chart),
title: 'Null Data Line Chart',
subtitle: 'With a single series and null measure values',
childBuilder: () => new SimpleNullsLineChart.withRandomData(),
),
new GalleryScaffold(
listTileIcon: new Icon(Icons.show_chart),
title: 'Stacked Area with Nulls Chart',
subtitle: 'Stacked area chart with three series and null measure values',
childBuilder: () => new StackedAreaNullsLineChart.withRandomData(),
),
new GalleryScaffold(
listTileIcon: new Icon(Icons.show_chart),
title: 'Dash Pattern Line Chart',
subtitle: 'Line chart with dash patterns',
childBuilder: () => new DashPatternLineChart.withRandomData(),
),
new GalleryScaffold(
listTileIcon: new Icon(Icons.show_chart),
title: 'Segments Line Chart',
subtitle: 'Line chart with changes of style for each line',
childBuilder: () => new SegmentsLineChart.withRandomData(),
),
new GalleryScaffold(
listTileIcon: new Icon(Icons.show_chart),
title: 'Line Annotation Line Chart',
subtitle: 'Line chart with line annotations',
childBuilder: () => new LineLineAnnotationChart.withRandomData(),
),
new GalleryScaffold(
listTileIcon: new Icon(Icons.show_chart),
title: 'Range Annotation Line Chart',
subtitle: 'Line chart with range annotations',
childBuilder: () => new LineRangeAnnotationChart.withRandomData(),
),
new GalleryScaffold(
listTileIcon: new Icon(Icons.show_chart),
title: 'Range Annotation Margin Labels Line Chart',
subtitle: 'Line chart with range annotations with labels in margins',
childBuilder: () => new LineRangeAnnotationMarginChart.withRandomData(),
),
new GalleryScaffold(
listTileIcon: new Icon(Icons.show_chart),
title: 'Pan and Zoom Line Chart',
subtitle: 'Simple line chart pan and zoom behaviors enabled',
childBuilder: () => new LineAnimationZoomChart.withRandomData(),
),
];
}

103
web/charts/example/lib/line_chart/points.dart Normal file
View File

@@ -0,0 +1,103 @@
// 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.
/// Line 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 PointsLineChart extends StatelessWidget {
final List<charts.Series> seriesList;
final bool animate;
PointsLineChart(this.seriesList, {this.animate});
/// Creates a [LineChart] with sample data and no transition.
factory PointsLineChart.withSampleData() {
return new PointsLineChart(
_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 PointsLineChart.withRandomData() {
return new PointsLineChart(_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)),
];
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,
defaultRenderer: new charts.LineRendererConfig(includePoints: true));
}
/// 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),
];
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);
}

124
web/charts/example/lib/line_chart/range_annotation.dart Normal file
View File

@@ -0,0 +1,124 @@
// 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.
/// Line chart with range annotations 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 LineRangeAnnotationChart extends StatelessWidget {
final List<charts.Series> seriesList;
final bool animate;
LineRangeAnnotationChart(this.seriesList, {this.animate});
/// Creates a [LineChart] with sample data and range annotations.
///
/// The second 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.
factory LineRangeAnnotationChart.withSampleData() {
return new LineRangeAnnotationChart(
_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 LineRangeAnnotationChart.withRandomData() {
return new LineRangeAnnotationChart(_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)),
// Fix one of the points to 100 so that the annotations are consistently
// placed.
new LinearSales(3, 100),
];
return [
new charts.Series<LinearSales, int>(
id: 'Sales',
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, behaviors: [
new charts.RangeAnnotation([
new charts.RangeAnnotationSegment(
0.5, 1.0, charts.RangeAnnotationAxisType.domain,
startLabel: 'Domain 1'),
new charts.RangeAnnotationSegment(
2, 4, charts.RangeAnnotationAxisType.domain,
endLabel: 'Domain 2', color: charts.MaterialPalette.gray.shade200),
new charts.RangeAnnotationSegment(
15, 20, charts.RangeAnnotationAxisType.measure,
startLabel: 'Measure 1 Start',
endLabel: 'Measure 1 End',
color: charts.MaterialPalette.gray.shade300),
new charts.RangeAnnotationSegment(
35, 65, charts.RangeAnnotationAxisType.measure,
startLabel: 'Measure 2 Start',
endLabel: 'Measure 2 End',
color: charts.MaterialPalette.gray.shade400),
]),
]);
}
/// 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),
];
return [
new charts.Series<LinearSales, int>(
id: 'Sales',
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);
}

141
web/charts/example/lib/line_chart/range_annotation_margin.dart Normal file
View File

@@ -0,0 +1,141 @@
// 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 line 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 LineRangeAnnotationMarginChart extends StatelessWidget {
final List<charts.Series> seriesList;
final bool animate;
LineRangeAnnotationMarginChart(this.seriesList, {this.animate});
/// Creates a [LineChart] with sample data and range annotations.
///
/// The second 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.
factory LineRangeAnnotationMarginChart.withSampleData() {
return new LineRangeAnnotationMarginChart(
_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 LineRangeAnnotationMarginChart.withRandomData() {
return new LineRangeAnnotationMarginChart(_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)),
// Fix one of the points to 100 so that the annotations are consistently
// placed.
new LinearSales(3, 100),
];
return [
new charts.Series<LinearSales, int>(
id: 'Sales',
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,
// 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(
0.5, 1.0, 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.shade400),
], defaultLabelPosition: charts.AnnotationLabelPosition.margin),
]);
}
/// 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),
];
return [
new charts.Series<LinearSales, int>(
id: 'Sales',
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);
}

233
web/charts/example/lib/line_chart/segments.dart Normal file
View File

@@ -0,0 +1,233 @@
// 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 stacked area chart with changing styles within each line.
///
/// Each series of data in this example contains different values for color,
/// dashPattern, or strokeWidthPx between each datum. The line and area skirt
/// will be rendered in segments, with the styling of the series changing when
/// these data attributes change.
///
/// Note that if a dashPattern or strokeWidth value is not found for a
/// particular datum, then the chart will fall back to use the value defined in
/// the [charts.LineRendererConfig]. This could be used, for example, to define
/// a default dash pattern for the series, with only a specific datum called out
/// with a different 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 SegmentsLineChart extends StatelessWidget {
final List<charts.Series> seriesList;
final bool animate;
SegmentsLineChart(this.seriesList, {this.animate});
/// Creates a [LineChart] with sample data and no transition.
factory SegmentsLineChart.withSampleData() {
return new SegmentsLineChart(
_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 SegmentsLineChart.withRandomData() {
return new SegmentsLineChart(_createRandomData());
}
/// Create random data.
static List<charts.Series<LinearSales, num>> _createRandomData() {
final random = new Random();
// Series of data with static dash pattern and stroke width. The colorFn
// accessor will colorize each datum (for all three series).
final colorChangeData = [
new LinearSales(0, random.nextInt(100), null, 2.0),
new LinearSales(1, random.nextInt(100), null, 2.0),
new LinearSales(2, random.nextInt(100), null, 2.0),
new LinearSales(3, random.nextInt(100), null, 2.0),
new LinearSales(4, random.nextInt(100), null, 2.0),
new LinearSales(5, random.nextInt(100), null, 2.0),
new LinearSales(6, random.nextInt(100), null, 2.0),
];
// Series of data with changing color and dash pattern.
final dashPatternChangeData = [
new LinearSales(0, random.nextInt(100), [2, 2], 2.0),
new LinearSales(1, random.nextInt(100), [2, 2], 2.0),
new LinearSales(2, random.nextInt(100), [4, 4], 2.0),
new LinearSales(3, random.nextInt(100), [4, 4], 2.0),
new LinearSales(4, random.nextInt(100), [4, 4], 2.0),
new LinearSales(5, random.nextInt(100), [8, 3, 2, 3], 2.0),
new LinearSales(6, random.nextInt(100), [8, 3, 2, 3], 2.0),
];
// Series of data with changing color and stroke width.
final strokeWidthChangeData = [
new LinearSales(0, random.nextInt(100), null, 2.0),
new LinearSales(1, random.nextInt(100), null, 2.0),
new LinearSales(2, random.nextInt(100), null, 4.0),
new LinearSales(3, random.nextInt(100), null, 4.0),
new LinearSales(4, random.nextInt(100), null, 4.0),
new LinearSales(5, random.nextInt(100), null, 6.0),
new LinearSales(6, random.nextInt(100), null, 6.0),
];
// Generate 2 shades of each color so that we can style the line segments.
final blue = charts.MaterialPalette.blue.makeShades(2);
final red = charts.MaterialPalette.red.makeShades(2);
final green = charts.MaterialPalette.green.makeShades(2);
return [
new charts.Series<LinearSales, int>(
id: 'Color Change',
// Light shade for even years, dark shade for odd.
colorFn: (LinearSales sales, _) =>
sales.year % 2 == 0 ? blue[1] : blue[0],
dashPatternFn: (LinearSales sales, _) => sales.dashPattern,
strokeWidthPxFn: (LinearSales sales, _) => sales.strokeWidthPx,
domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales,
data: colorChangeData,
),
new charts.Series<LinearSales, int>(
id: 'Dash Pattern Change',
// Light shade for even years, dark shade for odd.
colorFn: (LinearSales sales, _) =>
sales.year % 2 == 0 ? red[1] : red[0],
dashPatternFn: (LinearSales sales, _) => sales.dashPattern,
strokeWidthPxFn: (LinearSales sales, _) => sales.strokeWidthPx,
domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales,
data: dashPatternChangeData,
),
new charts.Series<LinearSales, int>(
id: 'Stroke Width Change',
// Light shade for even years, dark shade for odd.
colorFn: (LinearSales sales, _) =>
sales.year % 2 == 0 ? green[1] : green[0],
dashPatternFn: (LinearSales sales, _) => sales.dashPattern,
strokeWidthPxFn: (LinearSales sales, _) => sales.strokeWidthPx,
domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales,
data: strokeWidthChangeData,
),
];
}
// EXCLUDE_FROM_GALLERY_DOCS_END
@override
Widget build(BuildContext context) {
return new charts.LineChart(seriesList,
defaultRenderer:
new charts.LineRendererConfig(includeArea: true, stacked: true),
animate: animate);
}
/// Create one series with sample hard coded data.
static List<charts.Series<LinearSales, int>> _createSampleData() {
// Series of data with static dash pattern and stroke width. The colorFn
// accessor will colorize each datum (for all three series).
final colorChangeData = [
new LinearSales(0, 5, null, 2.0),
new LinearSales(1, 15, null, 2.0),
new LinearSales(2, 25, null, 2.0),
new LinearSales(3, 75, null, 2.0),
new LinearSales(4, 100, null, 2.0),
new LinearSales(5, 90, null, 2.0),
new LinearSales(6, 75, null, 2.0),
];
// Series of data with changing color and dash pattern.
final dashPatternChangeData = [
new LinearSales(0, 5, [2, 2], 2.0),
new LinearSales(1, 15, [2, 2], 2.0),
new LinearSales(2, 25, [4, 4], 2.0),
new LinearSales(3, 75, [4, 4], 2.0),
new LinearSales(4, 100, [4, 4], 2.0),
new LinearSales(5, 90, [8, 3, 2, 3], 2.0),
new LinearSales(6, 75, [8, 3, 2, 3], 2.0),
];
// Series of data with changing color and stroke width.
final strokeWidthChangeData = [
new LinearSales(0, 5, null, 2.0),
new LinearSales(1, 15, null, 2.0),
new LinearSales(2, 25, null, 4.0),
new LinearSales(3, 75, null, 4.0),
new LinearSales(4, 100, null, 4.0),
new LinearSales(5, 90, null, 6.0),
new LinearSales(6, 75, null, 6.0),
];
// Generate 2 shades of each color so that we can style the line segments.
final blue = charts.MaterialPalette.blue.makeShades(2);
final red = charts.MaterialPalette.red.makeShades(2);
final green = charts.MaterialPalette.green.makeShades(2);
return [
new charts.Series<LinearSales, int>(
id: 'Color Change',
// Light shade for even years, dark shade for odd.
colorFn: (LinearSales sales, _) =>
sales.year % 2 == 0 ? blue[1] : blue[0],
dashPatternFn: (LinearSales sales, _) => sales.dashPattern,
strokeWidthPxFn: (LinearSales sales, _) => sales.strokeWidthPx,
domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales,
data: colorChangeData,
),
new charts.Series<LinearSales, int>(
id: 'Dash Pattern Change',
// Light shade for even years, dark shade for odd.
colorFn: (LinearSales sales, _) =>
sales.year % 2 == 0 ? red[1] : red[0],
dashPatternFn: (LinearSales sales, _) => sales.dashPattern,
strokeWidthPxFn: (LinearSales sales, _) => sales.strokeWidthPx,
domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales,
data: dashPatternChangeData,
),
new charts.Series<LinearSales, int>(
id: 'Stroke Width Change',
// Light shade for even years, dark shade for odd.
colorFn: (LinearSales sales, _) =>
sales.year % 2 == 0 ? green[1] : green[0],
dashPatternFn: (LinearSales sales, _) => sales.dashPattern,
strokeWidthPxFn: (LinearSales sales, _) => sales.strokeWidthPx,
domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales,
data: strokeWidthChangeData,
),
];
}
}
/// Sample linear data type.
class LinearSales {
final int year;
final int sales;
final List<int> dashPattern;
final double strokeWidthPx;
LinearSales(this.year, this.sales, this.dashPattern, this.strokeWidthPx);
}

101
web/charts/example/lib/line_chart/simple.dart Normal file
View File

@@ -0,0 +1,101 @@
// 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 simple line chart.
// 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 SimpleLineChart extends StatelessWidget {
final List<charts.Series> seriesList;
final bool animate;
SimpleLineChart(this.seriesList, {this.animate});
/// Creates a [LineChart] with sample data and no transition.
factory SimpleLineChart.withSampleData() {
return new SimpleLineChart(
_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 SimpleLineChart.withRandomData() {
return new SimpleLineChart(_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)),
];
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);
}
/// 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),
];
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);
}

179
web/charts/example/lib/line_chart/simple_nulls.dart Normal file
View File

@@ -0,0 +1,179 @@
// 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 line chart with null measure values.
///
/// Null values will be visible as gaps in lines and area skirts. Any data
/// points that exist between two nulls in a line will be rendered as an
/// isolated point, as seen in the green 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 SimpleNullsLineChart extends StatelessWidget {
final List<charts.Series> seriesList;
final bool animate;
SimpleNullsLineChart(this.seriesList, {this.animate});
/// Creates a [LineChart] with sample data and no transition.
factory SimpleNullsLineChart.withSampleData() {
return new SimpleNullsLineChart(
_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 SimpleNullsLineChart.withRandomData() {
return new SimpleNullsLineChart(_createRandomData());
}
/// Create random data.
static List<charts.Series<LinearSales, num>> _createRandomData() {
final random = new Random();
final myFakeDesktopData = [
new LinearSales(0, random.nextInt(100)),
new LinearSales(1, random.nextInt(100)),
new LinearSales(2, null),
new LinearSales(3, random.nextInt(100)),
new LinearSales(4, random.nextInt(100)),
new LinearSales(5, random.nextInt(100)),
new LinearSales(6, random.nextInt(100)),
];
var myFakeTabletData = [
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)),
];
var myFakeMobileData = [
new LinearSales(0, random.nextInt(100)),
new LinearSales(1, random.nextInt(100)),
new LinearSales(2, null),
new LinearSales(3, random.nextInt(100)),
new LinearSales(4, null),
new LinearSales(5, random.nextInt(100)),
new LinearSales(6, random.nextInt(100)),
];
return [
new charts.Series<LinearSales, int>(
id: 'Desktop',
colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales,
data: myFakeDesktopData,
),
new charts.Series<LinearSales, int>(
id: 'Tablet',
colorFn: (_, __) => charts.MaterialPalette.red.shadeDefault,
domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales,
data: myFakeTabletData,
),
new charts.Series<LinearSales, int>(
id: 'Mobile',
colorFn: (_, __) => charts.MaterialPalette.green.shadeDefault,
domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales,
data: myFakeMobileData,
),
];
}
// EXCLUDE_FROM_GALLERY_DOCS_END
@override
Widget build(BuildContext context) {
return new charts.LineChart(seriesList, animate: animate);
}
/// Create one series with sample hard coded data.
static List<charts.Series<LinearSales, int>> _createSampleData() {
final myFakeDesktopData = [
new LinearSales(0, 5),
new LinearSales(1, 15),
new LinearSales(2, null),
new LinearSales(3, 75),
new LinearSales(4, 100),
new LinearSales(5, 90),
new LinearSales(6, 75),
];
final myFakeTabletData = [
new LinearSales(0, 10),
new LinearSales(1, 30),
new LinearSales(2, 50),
new LinearSales(3, 150),
new LinearSales(4, 200),
new LinearSales(5, 180),
new LinearSales(6, 150),
];
final myFakeMobileData = [
new LinearSales(0, 15),
new LinearSales(1, 45),
new LinearSales(2, null),
new LinearSales(3, 225),
new LinearSales(4, null),
new LinearSales(5, 270),
new LinearSales(6, 225),
];
return [
new charts.Series<LinearSales, int>(
id: 'Desktop',
colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales,
data: myFakeDesktopData,
),
new charts.Series<LinearSales, int>(
id: 'Tablet',
colorFn: (_, __) => charts.MaterialPalette.red.shadeDefault,
domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales,
data: myFakeTabletData,
),
new charts.Series<LinearSales, int>(
id: 'Mobile',
colorFn: (_, __) => charts.MaterialPalette.green.shadeDefault,
domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales,
data: myFakeMobileData,
),
];
}
}
/// Sample linear data type.
class LinearSales {
final int year;
final int sales;
LinearSales(this.year, this.sales);
}

160
web/charts/example/lib/line_chart/stacked_area.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.
/// Example of a stacked area chart.
// 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 StackedAreaLineChart extends StatelessWidget {
final List<charts.Series> seriesList;
final bool animate;
StackedAreaLineChart(this.seriesList, {this.animate});
/// Creates a [LineChart] with sample data and no transition.
factory StackedAreaLineChart.withSampleData() {
return new StackedAreaLineChart(
_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 StackedAreaLineChart.withRandomData() {
return new StackedAreaLineChart(_createRandomData());
}
/// Create random data.
static List<charts.Series<LinearSales, num>> _createRandomData() {
final random = new Random();
final myFakeDesktopData = [
new LinearSales(0, random.nextInt(100)),
new LinearSales(1, random.nextInt(100)),
new LinearSales(2, random.nextInt(100)),
new LinearSales(3, random.nextInt(100)),
];
var myFakeTabletData = [
new LinearSales(0, random.nextInt(100)),
new LinearSales(1, random.nextInt(100)),
new LinearSales(2, random.nextInt(100)),
new LinearSales(3, random.nextInt(100)),
];
var myFakeMobileData = [
new LinearSales(0, random.nextInt(100)),
new LinearSales(1, random.nextInt(100)),
new LinearSales(2, random.nextInt(100)),
new LinearSales(3, random.nextInt(100)),
];
return [
new charts.Series<LinearSales, int>(
id: 'Desktop',
colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales,
data: myFakeDesktopData,
),
new charts.Series<LinearSales, int>(
id: 'Tablet',
colorFn: (_, __) => charts.MaterialPalette.red.shadeDefault,
domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales,
data: myFakeTabletData,
),
new charts.Series<LinearSales, int>(
id: 'Mobile',
colorFn: (_, __) => charts.MaterialPalette.green.shadeDefault,
domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales,
data: myFakeMobileData,
),
];
}
// EXCLUDE_FROM_GALLERY_DOCS_END
@override
Widget build(BuildContext context) {
return new charts.LineChart(seriesList,
defaultRenderer:
new charts.LineRendererConfig(includeArea: true, stacked: true),
animate: animate);
}
/// Create one series with sample hard coded data.
static List<charts.Series<LinearSales, int>> _createSampleData() {
final myFakeDesktopData = [
new LinearSales(0, 5),
new LinearSales(1, 25),
new LinearSales(2, 100),
new LinearSales(3, 75),
];
var myFakeTabletData = [
new LinearSales(0, 10),
new LinearSales(1, 50),
new LinearSales(2, 200),
new LinearSales(3, 150),
];
var myFakeMobileData = [
new LinearSales(0, 15),
new LinearSales(1, 75),
new LinearSales(2, 300),
new LinearSales(3, 225),
];
return [
new charts.Series<LinearSales, int>(
id: 'Desktop',
colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales,
data: myFakeDesktopData,
),
new charts.Series<LinearSales, int>(
id: 'Tablet',
colorFn: (_, __) => charts.MaterialPalette.red.shadeDefault,
domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales,
data: myFakeTabletData,
),
new charts.Series<LinearSales, int>(
id: 'Mobile',
colorFn: (_, __) => charts.MaterialPalette.green.shadeDefault,
domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales,
data: myFakeMobileData,
),
];
}
}
/// Sample linear data type.
class LinearSales {
final int year;
final int sales;
LinearSales(this.year, this.sales);
}

175
web/charts/example/lib/line_chart/stacked_area_custom_color.dart Normal file
View File

@@ -0,0 +1,175 @@
// 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 stacked area chart with custom area colors.
///
/// By default, the area skirt for a chart will be drawn with the same color as
/// the line, but with a 10% opacity assigned to it. An area color function can
/// be provided to override this with any custom color.
// 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 StackedAreaCustomColorLineChart extends StatelessWidget {
final List<charts.Series> seriesList;
final bool animate;
StackedAreaCustomColorLineChart(this.seriesList, {this.animate});
/// Creates a [LineChart] with sample data and no transition.
factory StackedAreaCustomColorLineChart.withSampleData() {
return new StackedAreaCustomColorLineChart(
_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 StackedAreaCustomColorLineChart.withRandomData() {
return new StackedAreaCustomColorLineChart(_createRandomData());
}
/// Create random data.
static List<charts.Series<LinearSales, num>> _createRandomData() {
final random = new Random();
final myFakeDesktopData = [
new LinearSales(0, random.nextInt(100)),
new LinearSales(1, random.nextInt(100)),
new LinearSales(2, random.nextInt(100)),
new LinearSales(3, random.nextInt(100)),
];
var myFakeTabletData = [
new LinearSales(0, random.nextInt(100)),
new LinearSales(1, random.nextInt(100)),
new LinearSales(2, random.nextInt(100)),
new LinearSales(3, random.nextInt(100)),
];
var myFakeMobileData = [
new LinearSales(0, random.nextInt(100)),
new LinearSales(1, random.nextInt(100)),
new LinearSales(2, random.nextInt(100)),
new LinearSales(3, random.nextInt(100)),
];
return [
new charts.Series<LinearSales, int>(
id: 'Desktop',
colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales,
data: myFakeDesktopData,
),
new charts.Series<LinearSales, int>(
id: 'Tablet',
colorFn: (_, __) => charts.MaterialPalette.red.shadeDefault,
domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales,
data: myFakeTabletData,
),
new charts.Series<LinearSales, int>(
id: 'Mobile',
colorFn: (_, __) => charts.MaterialPalette.green.shadeDefault,
domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales,
data: myFakeMobileData,
),
];
}
// EXCLUDE_FROM_GALLERY_DOCS_END
@override
Widget build(BuildContext context) {
return new charts.LineChart(seriesList,
defaultRenderer:
new charts.LineRendererConfig(includeArea: true, stacked: true),
animate: animate);
}
/// Create one series with sample hard coded data.
static List<charts.Series<LinearSales, int>> _createSampleData() {
final myFakeDesktopData = [
new LinearSales(0, 5),
new LinearSales(1, 25),
new LinearSales(2, 100),
new LinearSales(3, 75),
];
var myFakeTabletData = [
new LinearSales(0, 10),
new LinearSales(1, 50),
new LinearSales(2, 200),
new LinearSales(3, 150),
];
var myFakeMobileData = [
new LinearSales(0, 15),
new LinearSales(1, 75),
new LinearSales(2, 300),
new LinearSales(3, 225),
];
return [
new charts.Series<LinearSales, int>(
id: 'Desktop',
// colorFn specifies that the line will be blue.
colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
// areaColorFn specifies that the area skirt will be light blue.
areaColorFn: (_, __) =>
charts.MaterialPalette.blue.shadeDefault.lighter,
domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales,
data: myFakeDesktopData,
),
new charts.Series<LinearSales, int>(
id: 'Tablet',
// colorFn specifies that the line will be red.
colorFn: (_, __) => charts.MaterialPalette.red.shadeDefault,
// areaColorFn specifies that the area skirt will be light red.
areaColorFn: (_, __) => charts.MaterialPalette.red.shadeDefault.lighter,
domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales,
data: myFakeTabletData,
),
new charts.Series<LinearSales, int>(
id: 'Mobile',
// colorFn specifies that the line will be green.
colorFn: (_, __) => charts.MaterialPalette.green.shadeDefault,
// areaColorFn specifies that the area skirt will be light green.
areaColorFn: (_, __) =>
charts.MaterialPalette.green.shadeDefault.lighter,
domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales,
data: myFakeMobileData,
),
];
}
}
/// Sample linear data type.
class LinearSales {
final int year;
final int sales;
LinearSales(this.year, this.sales);
}

191
web/charts/example/lib/line_chart/stacked_area_nulls.dart Normal file
View File

@@ -0,0 +1,191 @@
// 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 stacked area chart with null measure values.
///
/// Null values will be visible as gaps in lines and area skirts. Any data
/// points that exist between two nulls in a line will be rendered as an
/// isolated point, as seen in the green series.
///
/// In a stacked area chart, no data above a null value in the stack will be
/// rendered. In this example, the null measure value at domain 2 in the Desktop
/// series will prevent any data from being rendered at domain 2 for every
/// series because it is at the bottom of the stack.
///
/// This will also result in an isolated point being rendered for the domain
/// value 3 in the Mobile series, because that series also contains a null at
/// domain 4.
// 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 StackedAreaNullsLineChart extends StatelessWidget {
final List<charts.Series> seriesList;
final bool animate;
StackedAreaNullsLineChart(this.seriesList, {this.animate});
/// Creates a [LineChart] with sample data and no transition.
factory StackedAreaNullsLineChart.withSampleData() {
return new StackedAreaNullsLineChart(
_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 StackedAreaNullsLineChart.withRandomData() {
return new StackedAreaNullsLineChart(_createRandomData());
}
/// Create random data.
static List<charts.Series<LinearSales, num>> _createRandomData() {
final random = new Random();
final myFakeDesktopData = [
new LinearSales(0, random.nextInt(100)),
new LinearSales(1, random.nextInt(100)),
new LinearSales(2, null),
new LinearSales(3, random.nextInt(100)),
new LinearSales(4, random.nextInt(100)),
new LinearSales(5, random.nextInt(100)),
new LinearSales(6, random.nextInt(100)),
];
var myFakeTabletData = [
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)),
];
var myFakeMobileData = [
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, null),
new LinearSales(5, random.nextInt(100)),
new LinearSales(6, random.nextInt(100)),
];
return [
new charts.Series<LinearSales, int>(
id: 'Desktop',
colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales,
data: myFakeDesktopData,
),
new charts.Series<LinearSales, int>(
id: 'Tablet',
colorFn: (_, __) => charts.MaterialPalette.red.shadeDefault,
domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales,
data: myFakeTabletData,
),
new charts.Series<LinearSales, int>(
id: 'Mobile',
colorFn: (_, __) => charts.MaterialPalette.green.shadeDefault,
domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales,
data: myFakeMobileData,
),
];
}
// EXCLUDE_FROM_GALLERY_DOCS_END
@override
Widget build(BuildContext context) {
return new charts.LineChart(seriesList,
defaultRenderer:
new charts.LineRendererConfig(includeArea: true, stacked: true),
animate: animate);
}
/// Create one series with sample hard coded data.
static List<charts.Series<LinearSales, int>> _createSampleData() {
final myFakeDesktopData = [
new LinearSales(0, 5),
new LinearSales(1, 15),
new LinearSales(2, null),
new LinearSales(3, 75),
new LinearSales(4, 100),
new LinearSales(5, 90),
new LinearSales(6, 75),
];
final myFakeTabletData = [
new LinearSales(0, 5),
new LinearSales(1, 15),
new LinearSales(2, 25),
new LinearSales(3, 75),
new LinearSales(4, 100),
new LinearSales(5, 90),
new LinearSales(6, 75),
];
final myFakeMobileData = [
new LinearSales(0, 5),
new LinearSales(1, 15),
new LinearSales(2, 25),
new LinearSales(3, 75),
new LinearSales(4, null),
new LinearSales(5, 90),
new LinearSales(6, 75),
];
return [
new charts.Series<LinearSales, int>(
id: 'Desktop',
colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales,
data: myFakeDesktopData,
),
new charts.Series<LinearSales, int>(
id: 'Tablet',
colorFn: (_, __) => charts.MaterialPalette.red.shadeDefault,
domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales,
data: myFakeTabletData,
),
new charts.Series<LinearSales, int>(
id: 'Mobile',
colorFn: (_, __) => charts.MaterialPalette.green.shadeDefault,
domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales,
data: myFakeMobileData,
),
];
}
}
/// Sample linear data type.
class LinearSales {
final int year;
final int sales;
LinearSales(this.year, this.sales);
}