mirror of
https://github.com/flutter/samples.git
synced 2026-03-30 16:23:23 +00:00
Add flutter_web samples (#75)
This commit is contained in:
Kevin Moore
committed by
Andrew Brogdon
Andrew Brogdon
parent
42f2dce01b
commit
3fe927cb29
156
web/charts/example/lib/bar_chart/bar_gallery.dart
Normal file
156
web/charts/example/lib/bar_chart/bar_gallery.dart
Normal file
@@ -0,0 +1,156 @@
|
||||
// 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 'custom_rounded_bars.dart';
|
||||
import 'grouped.dart';
|
||||
import 'grouped_fill_color.dart';
|
||||
import 'grouped_single_target_line.dart';
|
||||
import 'grouped_stacked.dart';
|
||||
import 'grouped_stacked_weight_pattern.dart';
|
||||
import 'grouped_target_line.dart';
|
||||
import 'horizontal.dart';
|
||||
import 'horizontal_bar_label.dart';
|
||||
import 'horizontal_bar_label_custom.dart';
|
||||
import 'horizontal_pattern_forward_hatch.dart';
|
||||
import 'pattern_forward_hatch.dart';
|
||||
import 'simple.dart';
|
||||
import 'stacked.dart';
|
||||
import 'stacked_fill_color.dart';
|
||||
import 'stacked_horizontal.dart';
|
||||
import 'stacked_target_line.dart';
|
||||
import 'spark_bar.dart';
|
||||
|
||||
List<GalleryScaffold> buildGallery() {
|
||||
return [
|
||||
new GalleryScaffold(
|
||||
listTileIcon: new Icon(Icons.insert_chart),
|
||||
title: 'Simple Bar Chart',
|
||||
subtitle: 'Simple bar chart with a single series',
|
||||
childBuilder: () => new SimpleBarChart.withRandomData(),
|
||||
),
|
||||
new GalleryScaffold(
|
||||
listTileIcon: new Icon(Icons.insert_chart),
|
||||
title: 'Stacked Bar Chart',
|
||||
subtitle: 'Stacked bar chart with multiple series',
|
||||
childBuilder: () => new StackedBarChart.withRandomData(),
|
||||
),
|
||||
new GalleryScaffold(
|
||||
listTileIcon: new Icon(Icons.insert_chart),
|
||||
title: 'Grouped Bar Chart',
|
||||
subtitle: 'Grouped bar chart with multiple series',
|
||||
childBuilder: () => new GroupedBarChart.withRandomData(),
|
||||
),
|
||||
new GalleryScaffold(
|
||||
listTileIcon: new Icon(Icons.insert_chart),
|
||||
title: 'Grouped Stacked Bar Chart',
|
||||
subtitle: 'Grouped and stacked bar chart with multiple series',
|
||||
childBuilder: () => new GroupedStackedBarChart.withRandomData(),
|
||||
),
|
||||
new GalleryScaffold(
|
||||
listTileIcon: new Icon(Icons.insert_chart),
|
||||
title: 'Grouped Bar Target Line Chart',
|
||||
subtitle: 'Grouped bar target line chart with multiple series',
|
||||
childBuilder: () => new GroupedBarTargetLineChart.withRandomData(),
|
||||
),
|
||||
new GalleryScaffold(
|
||||
listTileIcon: new Icon(Icons.insert_chart),
|
||||
title: 'Grouped Bar Single Target Line Chart',
|
||||
subtitle:
|
||||
'Grouped bar target line chart with multiple series and a single target',
|
||||
childBuilder: () => new GroupedBarSingleTargetLineChart.withRandomData(),
|
||||
),
|
||||
new GalleryScaffold(
|
||||
listTileIcon: new Icon(Icons.insert_chart),
|
||||
title: 'Stacked Bar Target Line Chart',
|
||||
subtitle: 'Stacked bar target line chart with multiple series',
|
||||
childBuilder: () => new StackedBarTargetLineChart.withRandomData(),
|
||||
),
|
||||
new GalleryScaffold(
|
||||
listTileIcon: new Transform.rotate(
|
||||
angle: 1.5708, child: new Icon(Icons.insert_chart)),
|
||||
title: 'Horizontal Bar Chart',
|
||||
subtitle: 'Horizontal bar chart with a single series',
|
||||
childBuilder: () => new HorizontalBarChart.withRandomData(),
|
||||
),
|
||||
new GalleryScaffold(
|
||||
listTileIcon: new Transform.rotate(
|
||||
angle: 1.5708, child: new Icon(Icons.insert_chart)),
|
||||
title: 'Stacked Horizontal Bar Chart',
|
||||
subtitle: 'Stacked horizontal bar chart with multiple series',
|
||||
childBuilder: () => new StackedHorizontalBarChart.withRandomData(),
|
||||
),
|
||||
new GalleryScaffold(
|
||||
listTileIcon: new Transform.rotate(
|
||||
angle: 1.5708, child: new Icon(Icons.insert_chart)),
|
||||
title: 'Horizontal Bar Chart with Bar Labels',
|
||||
subtitle: 'Horizontal bar chart with a single series and bar labels',
|
||||
childBuilder: () => new HorizontalBarLabelChart.withRandomData(),
|
||||
),
|
||||
new GalleryScaffold(
|
||||
listTileIcon: new Transform.rotate(
|
||||
angle: 1.5708, child: new Icon(Icons.insert_chart)),
|
||||
title: 'Horizontal Bar Chart with Custom Bar Labels',
|
||||
subtitle: 'Bar labels with customized styling',
|
||||
childBuilder: () => new HorizontalBarLabelCustomChart.withRandomData(),
|
||||
),
|
||||
new GalleryScaffold(
|
||||
listTileIcon: new Icon(Icons.insert_chart),
|
||||
title: 'Spark Bar Chart',
|
||||
subtitle: 'Spark Bar Chart',
|
||||
childBuilder: () => new SparkBar.withRandomData(),
|
||||
),
|
||||
new GalleryScaffold(
|
||||
listTileIcon: new Icon(Icons.insert_chart),
|
||||
title: 'Grouped Fill Color Bar Chart',
|
||||
subtitle: 'Grouped bar chart with fill colors',
|
||||
childBuilder: () => new GroupedFillColorBarChart.withRandomData(),
|
||||
),
|
||||
new GalleryScaffold(
|
||||
listTileIcon: new Icon(Icons.insert_chart),
|
||||
title: 'Stacked Fill Color Bar Chart',
|
||||
subtitle: 'Stacked bar chart with fill colors',
|
||||
childBuilder: () => new StackedFillColorBarChart.withRandomData(),
|
||||
),
|
||||
new GalleryScaffold(
|
||||
listTileIcon: new Icon(Icons.insert_chart),
|
||||
title: 'Pattern Forward Hatch Bar Chart',
|
||||
subtitle: 'Pattern Forward Hatch Bar Chart',
|
||||
childBuilder: () => new PatternForwardHatchBarChart.withRandomData(),
|
||||
),
|
||||
new GalleryScaffold(
|
||||
listTileIcon: new Transform.rotate(
|
||||
angle: 1.5708, child: new Icon(Icons.insert_chart)),
|
||||
title: 'Horizontal Pattern Forward Hatch Bar Chart',
|
||||
subtitle: 'Horizontal Pattern Forward Hatch Bar Chart',
|
||||
childBuilder: () =>
|
||||
new HorizontalPatternForwardHatchBarChart.withRandomData(),
|
||||
),
|
||||
new GalleryScaffold(
|
||||
listTileIcon: new Icon(Icons.insert_chart),
|
||||
title: 'Weight Pattern Bar Chart',
|
||||
subtitle: 'Grouped and stacked bar chart with a weight pattern',
|
||||
childBuilder: () =>
|
||||
new GroupedStackedWeightPatternBarChart.withRandomData(),
|
||||
),
|
||||
new GalleryScaffold(
|
||||
listTileIcon: new Icon(Icons.insert_chart),
|
||||
title: 'Bar Chart with custom bar radius',
|
||||
subtitle: 'Custom rounded bar corners',
|
||||
childBuilder: () => new CustomRoundedBars.withRandomData(),
|
||||
),
|
||||
];
|
||||
}
|
||||
110
web/charts/example/lib/bar_chart/custom_rounded_bars.dart
Normal file
110
web/charts/example/lib/bar_chart/custom_rounded_bars.dart
Normal file
@@ -0,0 +1,110 @@
|
||||
// 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:charts_flutter/flutter.dart' as charts;
|
||||
import 'package:flutter_web/material.dart';
|
||||
|
||||
class CustomRoundedBars extends StatelessWidget {
|
||||
final List<charts.Series> seriesList;
|
||||
final bool animate;
|
||||
|
||||
CustomRoundedBars(this.seriesList, {this.animate});
|
||||
|
||||
/// Creates a [BarChart] with custom rounded bars.
|
||||
factory CustomRoundedBars.withSampleData() {
|
||||
return new CustomRoundedBars(
|
||||
_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 CustomRoundedBars.withRandomData() {
|
||||
return new CustomRoundedBars(_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)),
|
||||
];
|
||||
|
||||
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,
|
||||
defaultRenderer: new charts.BarRendererConfig(
|
||||
// By default, bar renderer will draw rounded bars with a constant
|
||||
// radius of 30.
|
||||
// To not have any rounded corners, use [NoCornerStrategy]
|
||||
// To change the radius of the bars, use [ConstCornerStrategy]
|
||||
cornerStrategy: const charts.ConstCornerStrategy(30)),
|
||||
);
|
||||
}
|
||||
|
||||
/// 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),
|
||||
];
|
||||
|
||||
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);
|
||||
}
|
||||
154
web/charts/example/lib/bar_chart/grouped.dart
Normal file
154
web/charts/example/lib/bar_chart/grouped.dart
Normal file
@@ -0,0 +1,154 @@
|
||||
// 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;
|
||||
|
||||
class GroupedBarChart extends StatelessWidget {
|
||||
final List<charts.Series> seriesList;
|
||||
final bool animate;
|
||||
|
||||
GroupedBarChart(this.seriesList, {this.animate});
|
||||
|
||||
factory GroupedBarChart.withSampleData() {
|
||||
return new GroupedBarChart(
|
||||
_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 GroupedBarChart.withRandomData() {
|
||||
return new GroupedBarChart(_createRandomData());
|
||||
}
|
||||
|
||||
/// Create random data.
|
||||
static List<charts.Series<OrdinalSales, String>> _createRandomData() {
|
||||
final random = new Random();
|
||||
|
||||
final desktopSalesData = [
|
||||
new OrdinalSales('2014', random.nextInt(100)),
|
||||
new OrdinalSales('2015', random.nextInt(100)),
|
||||
new OrdinalSales('2016', random.nextInt(100)),
|
||||
new OrdinalSales('2017', random.nextInt(100)),
|
||||
];
|
||||
|
||||
final tableSalesData = [
|
||||
new OrdinalSales('2014', random.nextInt(100)),
|
||||
new OrdinalSales('2015', random.nextInt(100)),
|
||||
new OrdinalSales('2016', random.nextInt(100)),
|
||||
new OrdinalSales('2017', random.nextInt(100)),
|
||||
];
|
||||
|
||||
final mobileSalesData = [
|
||||
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: 'Desktop',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: desktopSalesData,
|
||||
),
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Tablet',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: tableSalesData,
|
||||
),
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Mobile',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: mobileSalesData,
|
||||
),
|
||||
];
|
||||
}
|
||||
// EXCLUDE_FROM_GALLERY_DOCS_END
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return new charts.BarChart(
|
||||
seriesList,
|
||||
animate: animate,
|
||||
barGroupingType: charts.BarGroupingType.grouped,
|
||||
);
|
||||
}
|
||||
|
||||
/// Create series list with multiple series
|
||||
static List<charts.Series<OrdinalSales, String>> _createSampleData() {
|
||||
final desktopSalesData = [
|
||||
new OrdinalSales('2014', 5),
|
||||
new OrdinalSales('2015', 25),
|
||||
new OrdinalSales('2016', 100),
|
||||
new OrdinalSales('2017', 75),
|
||||
];
|
||||
|
||||
final tableSalesData = [
|
||||
new OrdinalSales('2014', 25),
|
||||
new OrdinalSales('2015', 50),
|
||||
new OrdinalSales('2016', 10),
|
||||
new OrdinalSales('2017', 20),
|
||||
];
|
||||
|
||||
final mobileSalesData = [
|
||||
new OrdinalSales('2014', 10),
|
||||
new OrdinalSales('2015', 15),
|
||||
new OrdinalSales('2016', 50),
|
||||
new OrdinalSales('2017', 45),
|
||||
];
|
||||
|
||||
return [
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Desktop',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: desktopSalesData,
|
||||
),
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Tablet',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: tableSalesData,
|
||||
),
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Mobile',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: mobileSalesData,
|
||||
),
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
/// Sample ordinal data type.
|
||||
class OrdinalSales {
|
||||
final String year;
|
||||
final int sales;
|
||||
|
||||
OrdinalSales(this.year, this.sales);
|
||||
}
|
||||
178
web/charts/example/lib/bar_chart/grouped_fill_color.dart
Normal file
178
web/charts/example/lib/bar_chart/grouped_fill_color.dart
Normal file
@@ -0,0 +1,178 @@
|
||||
// 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 a grouped bar chart with three series, each rendered with
|
||||
/// different fill colors.
|
||||
class GroupedFillColorBarChart extends StatelessWidget {
|
||||
final List<charts.Series> seriesList;
|
||||
final bool animate;
|
||||
|
||||
GroupedFillColorBarChart(this.seriesList, {this.animate});
|
||||
|
||||
factory GroupedFillColorBarChart.withSampleData() {
|
||||
return new GroupedFillColorBarChart(
|
||||
_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 GroupedFillColorBarChart.withRandomData() {
|
||||
return new GroupedFillColorBarChart(_createRandomData());
|
||||
}
|
||||
|
||||
/// Create random data.
|
||||
static List<charts.Series<OrdinalSales, String>> _createRandomData() {
|
||||
final random = new Random();
|
||||
|
||||
final desktopSalesData = [
|
||||
new OrdinalSales('2014', random.nextInt(100)),
|
||||
new OrdinalSales('2015', random.nextInt(100)),
|
||||
new OrdinalSales('2016', random.nextInt(100)),
|
||||
new OrdinalSales('2017', random.nextInt(100)),
|
||||
];
|
||||
|
||||
final tableSalesData = [
|
||||
new OrdinalSales('2014', random.nextInt(100)),
|
||||
new OrdinalSales('2015', random.nextInt(100)),
|
||||
new OrdinalSales('2016', random.nextInt(100)),
|
||||
new OrdinalSales('2017', random.nextInt(100)),
|
||||
];
|
||||
|
||||
final mobileSalesData = [
|
||||
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 [
|
||||
// Blue bars with a lighter center color.
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Desktop',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: desktopSalesData,
|
||||
colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
|
||||
fillColorFn: (_, __) =>
|
||||
charts.MaterialPalette.blue.shadeDefault.lighter,
|
||||
),
|
||||
// Solid red bars. Fill color will default to the series color if no
|
||||
// fillColorFn is configured.
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Tablet',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: tableSalesData,
|
||||
colorFn: (_, __) => charts.MaterialPalette.red.shadeDefault,
|
||||
),
|
||||
// Hollow green bars.
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Mobile',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: mobileSalesData,
|
||||
colorFn: (_, __) => charts.MaterialPalette.green.shadeDefault,
|
||||
fillColorFn: (_, __) => charts.MaterialPalette.transparent,
|
||||
),
|
||||
];
|
||||
}
|
||||
// EXCLUDE_FROM_GALLERY_DOCS_END
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return new charts.BarChart(
|
||||
seriesList,
|
||||
animate: animate,
|
||||
// Configure a stroke width to enable borders on the bars.
|
||||
defaultRenderer: new charts.BarRendererConfig(
|
||||
groupingType: charts.BarGroupingType.grouped, strokeWidthPx: 2.0),
|
||||
);
|
||||
}
|
||||
|
||||
/// Create series list with multiple series
|
||||
static List<charts.Series<OrdinalSales, String>> _createSampleData() {
|
||||
final desktopSalesData = [
|
||||
new OrdinalSales('2014', 5),
|
||||
new OrdinalSales('2015', 25),
|
||||
new OrdinalSales('2016', 100),
|
||||
new OrdinalSales('2017', 75),
|
||||
];
|
||||
|
||||
final tableSalesData = [
|
||||
new OrdinalSales('2014', 25),
|
||||
new OrdinalSales('2015', 50),
|
||||
new OrdinalSales('2016', 10),
|
||||
new OrdinalSales('2017', 20),
|
||||
];
|
||||
|
||||
final mobileSalesData = [
|
||||
new OrdinalSales('2014', 10),
|
||||
new OrdinalSales('2015', 50),
|
||||
new OrdinalSales('2016', 50),
|
||||
new OrdinalSales('2017', 45),
|
||||
];
|
||||
|
||||
return [
|
||||
// Blue bars with a lighter center color.
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Desktop',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: desktopSalesData,
|
||||
colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
|
||||
fillColorFn: (_, __) =>
|
||||
charts.MaterialPalette.blue.shadeDefault.lighter,
|
||||
),
|
||||
// Solid red bars. Fill color will default to the series color if no
|
||||
// fillColorFn is configured.
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Tablet',
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: tableSalesData,
|
||||
colorFn: (_, __) => charts.MaterialPalette.red.shadeDefault,
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
),
|
||||
// Hollow green bars.
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Mobile',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: mobileSalesData,
|
||||
colorFn: (_, __) => charts.MaterialPalette.green.shadeDefault,
|
||||
fillColorFn: (_, __) => charts.MaterialPalette.transparent,
|
||||
),
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
/// Sample ordinal data type.
|
||||
class OrdinalSales {
|
||||
final String year;
|
||||
final int sales;
|
||||
|
||||
OrdinalSales(this.year, this.sales);
|
||||
}
|
||||
180
web/charts/example/lib/bar_chart/grouped_single_target_line.dart
Normal file
180
web/charts/example/lib/bar_chart/grouped_single_target_line.dart
Normal file
@@ -0,0 +1,180 @@
|
||||
// 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;
|
||||
|
||||
class GroupedBarSingleTargetLineChart extends StatelessWidget {
|
||||
final List<charts.Series> seriesList;
|
||||
final bool animate;
|
||||
|
||||
GroupedBarSingleTargetLineChart(this.seriesList, {this.animate});
|
||||
|
||||
factory GroupedBarSingleTargetLineChart.withSampleData() {
|
||||
return new GroupedBarSingleTargetLineChart(
|
||||
_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 GroupedBarSingleTargetLineChart.withRandomData() {
|
||||
return new GroupedBarSingleTargetLineChart(_createRandomData());
|
||||
}
|
||||
|
||||
/// Create random data.
|
||||
static List<charts.Series<OrdinalSales, String>> _createRandomData() {
|
||||
final random = new Random();
|
||||
|
||||
final desktopSalesData = [
|
||||
new OrdinalSales('2014', random.nextInt(100)),
|
||||
new OrdinalSales('2015', random.nextInt(100)),
|
||||
new OrdinalSales('2016', random.nextInt(100)),
|
||||
new OrdinalSales('2017', random.nextInt(100)),
|
||||
];
|
||||
|
||||
final tableSalesData = [
|
||||
new OrdinalSales('2014', random.nextInt(100)),
|
||||
new OrdinalSales('2015', random.nextInt(100)),
|
||||
new OrdinalSales('2016', random.nextInt(100)),
|
||||
new OrdinalSales('2017', random.nextInt(100)),
|
||||
];
|
||||
|
||||
final mobileSalesData = [
|
||||
new OrdinalSales('2014', random.nextInt(100)),
|
||||
new OrdinalSales('2015', random.nextInt(100)),
|
||||
new OrdinalSales('2016', random.nextInt(100)),
|
||||
new OrdinalSales('2017', random.nextInt(100)),
|
||||
];
|
||||
|
||||
final targetLineData = [
|
||||
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: 'Desktop',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: desktopSalesData),
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Tablet',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: tableSalesData),
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Mobile',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: mobileSalesData),
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Desktop Target Line',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: targetLineData)
|
||||
// Configure our custom bar target renderer for this series.
|
||||
..setAttribute(charts.rendererIdKey, 'customTargetLine'),
|
||||
];
|
||||
}
|
||||
// EXCLUDE_FROM_GALLERY_DOCS_END
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return new charts.BarChart(seriesList,
|
||||
animate: animate,
|
||||
barGroupingType: charts.BarGroupingType.grouped,
|
||||
customSeriesRenderers: [
|
||||
new charts.BarTargetLineRendererConfig(
|
||||
// ID used to link series to this renderer.
|
||||
customRendererId: 'customTargetLine',
|
||||
groupingType: charts.BarGroupingType.grouped)
|
||||
]);
|
||||
}
|
||||
|
||||
/// Create series list with multiple series
|
||||
static List<charts.Series<OrdinalSales, String>> _createSampleData() {
|
||||
final desktopSalesData = [
|
||||
new OrdinalSales('2014', 5),
|
||||
new OrdinalSales('2015', 25),
|
||||
new OrdinalSales('2016', 100),
|
||||
new OrdinalSales('2017', 75),
|
||||
];
|
||||
|
||||
final tableSalesData = [
|
||||
new OrdinalSales('2014', 25),
|
||||
new OrdinalSales('2015', 50),
|
||||
new OrdinalSales('2016', 10),
|
||||
new OrdinalSales('2017', 20),
|
||||
];
|
||||
|
||||
final mobileSalesData = [
|
||||
new OrdinalSales('2014', 10),
|
||||
new OrdinalSales('2015', 15),
|
||||
new OrdinalSales('2016', 50),
|
||||
new OrdinalSales('2017', 45),
|
||||
];
|
||||
|
||||
final targetLineData = [
|
||||
new OrdinalSales('2014', 30),
|
||||
new OrdinalSales('2015', 55),
|
||||
new OrdinalSales('2016', 15),
|
||||
new OrdinalSales('2017', 25),
|
||||
];
|
||||
|
||||
return [
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Desktop',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: desktopSalesData),
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Tablet',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: tableSalesData),
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Mobile',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: mobileSalesData),
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Desktop Target Line',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: targetLineData)
|
||||
// Configure our custom bar target renderer for this series.
|
||||
..setAttribute(charts.rendererIdKey, 'customTargetLine'),
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
/// Sample ordinal data type.
|
||||
class OrdinalSales {
|
||||
final String year;
|
||||
final int sales;
|
||||
|
||||
OrdinalSales(this.year, this.sales);
|
||||
}
|
||||
244
web/charts/example/lib/bar_chart/grouped_stacked.dart
Normal file
244
web/charts/example/lib/bar_chart/grouped_stacked.dart
Normal file
@@ -0,0 +1,244 @@
|
||||
// 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 bar chart with grouped, stacked series oriented vertically.
|
||||
// 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;
|
||||
|
||||
class GroupedStackedBarChart extends StatelessWidget {
|
||||
final List<charts.Series> seriesList;
|
||||
final bool animate;
|
||||
|
||||
GroupedStackedBarChart(this.seriesList, {this.animate});
|
||||
|
||||
factory GroupedStackedBarChart.withSampleData() {
|
||||
return new GroupedStackedBarChart(
|
||||
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 GroupedStackedBarChart.withRandomData() {
|
||||
return new GroupedStackedBarChart(_createRandomData());
|
||||
}
|
||||
|
||||
/// Create random data.
|
||||
static List<charts.Series<OrdinalSales, String>> _createRandomData() {
|
||||
final random = new Random();
|
||||
|
||||
final desktopSalesDataA = [
|
||||
new OrdinalSales('2014', random.nextInt(100)),
|
||||
new OrdinalSales('2015', random.nextInt(100)),
|
||||
new OrdinalSales('2016', random.nextInt(100)),
|
||||
new OrdinalSales('2017', random.nextInt(100)),
|
||||
];
|
||||
|
||||
final tableSalesDataA = [
|
||||
new OrdinalSales('2014', random.nextInt(100)),
|
||||
new OrdinalSales('2015', random.nextInt(100)),
|
||||
new OrdinalSales('2016', random.nextInt(100)),
|
||||
new OrdinalSales('2017', random.nextInt(100)),
|
||||
];
|
||||
|
||||
final mobileSalesDataA = [
|
||||
new OrdinalSales('2014', random.nextInt(100)),
|
||||
new OrdinalSales('2015', random.nextInt(100)),
|
||||
new OrdinalSales('2016', random.nextInt(100)),
|
||||
new OrdinalSales('2017', random.nextInt(100)),
|
||||
];
|
||||
|
||||
final desktopSalesDataB = [
|
||||
new OrdinalSales('2014', random.nextInt(100)),
|
||||
new OrdinalSales('2015', random.nextInt(100)),
|
||||
new OrdinalSales('2016', random.nextInt(100)),
|
||||
new OrdinalSales('2017', random.nextInt(100)),
|
||||
];
|
||||
|
||||
final tableSalesDataB = [
|
||||
new OrdinalSales('2014', random.nextInt(100)),
|
||||
new OrdinalSales('2015', random.nextInt(100)),
|
||||
new OrdinalSales('2016', random.nextInt(100)),
|
||||
new OrdinalSales('2017', random.nextInt(100)),
|
||||
];
|
||||
|
||||
final mobileSalesDataB = [
|
||||
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: 'Desktop A',
|
||||
seriesCategory: 'A',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: desktopSalesDataA,
|
||||
),
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Tablet A',
|
||||
seriesCategory: 'A',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: tableSalesDataA,
|
||||
),
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Mobile A',
|
||||
seriesCategory: 'A',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: mobileSalesDataA,
|
||||
),
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Desktop B',
|
||||
seriesCategory: 'B',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: desktopSalesDataB,
|
||||
),
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Tablet B',
|
||||
seriesCategory: 'B',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: tableSalesDataB,
|
||||
),
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Mobile B',
|
||||
seriesCategory: 'B',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: mobileSalesDataB,
|
||||
),
|
||||
];
|
||||
}
|
||||
// EXCLUDE_FROM_GALLERY_DOCS_END
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return new charts.BarChart(
|
||||
seriesList,
|
||||
animate: animate,
|
||||
barGroupingType: charts.BarGroupingType.groupedStacked,
|
||||
);
|
||||
}
|
||||
|
||||
/// Create series list with multiple series
|
||||
static List<charts.Series<OrdinalSales, String>> createSampleData() {
|
||||
final desktopSalesDataA = [
|
||||
new OrdinalSales('2014', 5),
|
||||
new OrdinalSales('2015', 25),
|
||||
new OrdinalSales('2016', 100),
|
||||
new OrdinalSales('2017', 75),
|
||||
];
|
||||
|
||||
final tableSalesDataA = [
|
||||
new OrdinalSales('2014', 25),
|
||||
new OrdinalSales('2015', 50),
|
||||
new OrdinalSales('2016', 10),
|
||||
new OrdinalSales('2017', 20),
|
||||
];
|
||||
|
||||
final mobileSalesDataA = [
|
||||
new OrdinalSales('2014', 10),
|
||||
new OrdinalSales('2015', 15),
|
||||
new OrdinalSales('2016', 50),
|
||||
new OrdinalSales('2017', 45),
|
||||
];
|
||||
|
||||
final desktopSalesDataB = [
|
||||
new OrdinalSales('2014', 5),
|
||||
new OrdinalSales('2015', 25),
|
||||
new OrdinalSales('2016', 100),
|
||||
new OrdinalSales('2017', 75),
|
||||
];
|
||||
|
||||
final tableSalesDataB = [
|
||||
new OrdinalSales('2014', 25),
|
||||
new OrdinalSales('2015', 50),
|
||||
new OrdinalSales('2016', 10),
|
||||
new OrdinalSales('2017', 20),
|
||||
];
|
||||
|
||||
final mobileSalesDataB = [
|
||||
new OrdinalSales('2014', 10),
|
||||
new OrdinalSales('2015', 15),
|
||||
new OrdinalSales('2016', 50),
|
||||
new OrdinalSales('2017', 45),
|
||||
];
|
||||
|
||||
return [
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Desktop A',
|
||||
seriesCategory: 'A',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: desktopSalesDataA,
|
||||
),
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Tablet A',
|
||||
seriesCategory: 'A',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: tableSalesDataA,
|
||||
),
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Mobile A',
|
||||
seriesCategory: 'A',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: mobileSalesDataA,
|
||||
),
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Desktop B',
|
||||
seriesCategory: 'B',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: desktopSalesDataB,
|
||||
),
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Tablet B',
|
||||
seriesCategory: 'B',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: tableSalesDataB,
|
||||
),
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Mobile B',
|
||||
seriesCategory: 'B',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: mobileSalesDataB,
|
||||
),
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
/// Sample ordinal data type.
|
||||
class OrdinalSales {
|
||||
final String year;
|
||||
final int sales;
|
||||
|
||||
OrdinalSales(this.year, this.sales);
|
||||
}
|
||||
@@ -0,0 +1,256 @@
|
||||
// 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 bar chart with grouped, stacked series oriented vertically with
|
||||
/// a custom weight pattern.
|
||||
///
|
||||
/// This is a pattern of weights used to calculate the width of bars within a
|
||||
/// bar group. If not specified, each bar in the group will have an equal width.
|
||||
// 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;
|
||||
|
||||
class GroupedStackedWeightPatternBarChart extends StatelessWidget {
|
||||
final List<charts.Series> seriesList;
|
||||
final bool animate;
|
||||
|
||||
GroupedStackedWeightPatternBarChart(this.seriesList, {this.animate});
|
||||
|
||||
factory GroupedStackedWeightPatternBarChart.withSampleData() {
|
||||
return new GroupedStackedWeightPatternBarChart(
|
||||
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 GroupedStackedWeightPatternBarChart.withRandomData() {
|
||||
return new GroupedStackedWeightPatternBarChart(_createRandomData());
|
||||
}
|
||||
|
||||
/// Create random data.
|
||||
static List<charts.Series<OrdinalSales, String>> _createRandomData() {
|
||||
final random = new Random();
|
||||
|
||||
final desktopSalesDataA = [
|
||||
new OrdinalSales('2014', random.nextInt(100)),
|
||||
new OrdinalSales('2015', random.nextInt(100)),
|
||||
new OrdinalSales('2016', random.nextInt(100)),
|
||||
new OrdinalSales('2017', random.nextInt(100)),
|
||||
];
|
||||
|
||||
final tableSalesDataA = [
|
||||
new OrdinalSales('2014', random.nextInt(100)),
|
||||
new OrdinalSales('2015', random.nextInt(100)),
|
||||
new OrdinalSales('2016', random.nextInt(100)),
|
||||
new OrdinalSales('2017', random.nextInt(100)),
|
||||
];
|
||||
|
||||
final mobileSalesDataA = [
|
||||
new OrdinalSales('2014', random.nextInt(100)),
|
||||
new OrdinalSales('2015', random.nextInt(100)),
|
||||
new OrdinalSales('2016', random.nextInt(100)),
|
||||
new OrdinalSales('2017', random.nextInt(100)),
|
||||
];
|
||||
|
||||
final desktopSalesDataB = [
|
||||
new OrdinalSales('2014', random.nextInt(100)),
|
||||
new OrdinalSales('2015', random.nextInt(100)),
|
||||
new OrdinalSales('2016', random.nextInt(100)),
|
||||
new OrdinalSales('2017', random.nextInt(100)),
|
||||
];
|
||||
|
||||
final tableSalesDataB = [
|
||||
new OrdinalSales('2014', random.nextInt(100)),
|
||||
new OrdinalSales('2015', random.nextInt(100)),
|
||||
new OrdinalSales('2016', random.nextInt(100)),
|
||||
new OrdinalSales('2017', random.nextInt(100)),
|
||||
];
|
||||
|
||||
final mobileSalesDataB = [
|
||||
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: 'Desktop A',
|
||||
seriesCategory: 'A',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: desktopSalesDataA,
|
||||
),
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Tablet A',
|
||||
seriesCategory: 'A',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: tableSalesDataA,
|
||||
),
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Mobile A',
|
||||
seriesCategory: 'A',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: mobileSalesDataA,
|
||||
),
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Desktop B',
|
||||
seriesCategory: 'B',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: desktopSalesDataB,
|
||||
),
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Tablet B',
|
||||
seriesCategory: 'B',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: tableSalesDataB,
|
||||
),
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Mobile B',
|
||||
seriesCategory: 'B',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: mobileSalesDataB,
|
||||
),
|
||||
];
|
||||
}
|
||||
// EXCLUDE_FROM_GALLERY_DOCS_END
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return new charts.BarChart(
|
||||
seriesList,
|
||||
animate: animate,
|
||||
// Configure the bar renderer in grouped stacked rendering mode with a
|
||||
// custom weight pattern.
|
||||
//
|
||||
// The first stack of bars in each group is configured to be twice as wide
|
||||
// as the second stack of bars in each group.
|
||||
defaultRenderer: new charts.BarRendererConfig(
|
||||
groupingType: charts.BarGroupingType.groupedStacked,
|
||||
weightPattern: [2, 1],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
/// Create series list with multiple series
|
||||
static List<charts.Series<OrdinalSales, String>> createSampleData() {
|
||||
final desktopSalesDataA = [
|
||||
new OrdinalSales('2014', 5),
|
||||
new OrdinalSales('2015', 25),
|
||||
new OrdinalSales('2016', 100),
|
||||
new OrdinalSales('2017', 75),
|
||||
];
|
||||
|
||||
final tableSalesDataA = [
|
||||
new OrdinalSales('2014', 25),
|
||||
new OrdinalSales('2015', 50),
|
||||
new OrdinalSales('2016', 10),
|
||||
new OrdinalSales('2017', 20),
|
||||
];
|
||||
|
||||
final mobileSalesDataA = [
|
||||
new OrdinalSales('2014', 10),
|
||||
new OrdinalSales('2015', 15),
|
||||
new OrdinalSales('2016', 50),
|
||||
new OrdinalSales('2017', 45),
|
||||
];
|
||||
|
||||
final desktopSalesDataB = [
|
||||
new OrdinalSales('2014', 5),
|
||||
new OrdinalSales('2015', 25),
|
||||
new OrdinalSales('2016', 100),
|
||||
new OrdinalSales('2017', 75),
|
||||
];
|
||||
|
||||
final tableSalesDataB = [
|
||||
new OrdinalSales('2014', 25),
|
||||
new OrdinalSales('2015', 50),
|
||||
new OrdinalSales('2016', 10),
|
||||
new OrdinalSales('2017', 20),
|
||||
];
|
||||
|
||||
final mobileSalesDataB = [
|
||||
new OrdinalSales('2014', 10),
|
||||
new OrdinalSales('2015', 15),
|
||||
new OrdinalSales('2016', 50),
|
||||
new OrdinalSales('2017', 45),
|
||||
];
|
||||
|
||||
return [
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Desktop A',
|
||||
seriesCategory: 'A',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: desktopSalesDataA,
|
||||
),
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Tablet A',
|
||||
seriesCategory: 'A',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: tableSalesDataA,
|
||||
),
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Mobile A',
|
||||
seriesCategory: 'A',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: mobileSalesDataA,
|
||||
),
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Desktop B',
|
||||
seriesCategory: 'B',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: desktopSalesDataB,
|
||||
),
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Tablet B',
|
||||
seriesCategory: 'B',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: tableSalesDataB,
|
||||
),
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Mobile B',
|
||||
seriesCategory: 'B',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: mobileSalesDataB,
|
||||
),
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
/// Sample ordinal data type.
|
||||
class OrdinalSales {
|
||||
final String year;
|
||||
final int sales;
|
||||
|
||||
OrdinalSales(this.year, this.sales);
|
||||
}
|
||||
248
web/charts/example/lib/bar_chart/grouped_target_line.dart
Normal file
248
web/charts/example/lib/bar_chart/grouped_target_line.dart
Normal file
@@ -0,0 +1,248 @@
|
||||
// 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;
|
||||
|
||||
class GroupedBarTargetLineChart extends StatelessWidget {
|
||||
final List<charts.Series> seriesList;
|
||||
final bool animate;
|
||||
|
||||
GroupedBarTargetLineChart(this.seriesList, {this.animate});
|
||||
|
||||
factory GroupedBarTargetLineChart.withSampleData() {
|
||||
return new GroupedBarTargetLineChart(
|
||||
_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 GroupedBarTargetLineChart.withRandomData() {
|
||||
return new GroupedBarTargetLineChart(_createRandomData());
|
||||
}
|
||||
|
||||
/// Create random data.
|
||||
static List<charts.Series<OrdinalSales, String>> _createRandomData() {
|
||||
final random = new Random();
|
||||
|
||||
final desktopSalesData = [
|
||||
new OrdinalSales('2014', random.nextInt(100)),
|
||||
new OrdinalSales('2015', random.nextInt(100)),
|
||||
new OrdinalSales('2016', random.nextInt(100)),
|
||||
new OrdinalSales('2017', random.nextInt(100)),
|
||||
];
|
||||
|
||||
final tableSalesData = [
|
||||
new OrdinalSales('2014', random.nextInt(100)),
|
||||
new OrdinalSales('2015', random.nextInt(100)),
|
||||
new OrdinalSales('2016', random.nextInt(100)),
|
||||
new OrdinalSales('2017', random.nextInt(100)),
|
||||
];
|
||||
|
||||
final mobileSalesData = [
|
||||
new OrdinalSales('2014', random.nextInt(100)),
|
||||
new OrdinalSales('2015', random.nextInt(100)),
|
||||
new OrdinalSales('2016', random.nextInt(100)),
|
||||
new OrdinalSales('2017', random.nextInt(100)),
|
||||
];
|
||||
|
||||
final desktopTargetLineData = [
|
||||
new OrdinalSales('2014', random.nextInt(100)),
|
||||
new OrdinalSales('2015', random.nextInt(100)),
|
||||
new OrdinalSales('2016', random.nextInt(100)),
|
||||
new OrdinalSales('2017', random.nextInt(100)),
|
||||
];
|
||||
|
||||
final tableTargetLineData = [
|
||||
new OrdinalSales('2014', random.nextInt(100)),
|
||||
new OrdinalSales('2015', random.nextInt(100)),
|
||||
new OrdinalSales('2016', random.nextInt(100)),
|
||||
new OrdinalSales('2017', random.nextInt(100)),
|
||||
];
|
||||
|
||||
final mobileTargetLineData = [
|
||||
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: 'Desktop',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: desktopSalesData,
|
||||
),
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Tablet',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: tableSalesData,
|
||||
),
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Mobile',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: mobileSalesData,
|
||||
),
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Desktop Target Line',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: desktopTargetLineData,
|
||||
)
|
||||
// Configure our custom bar target renderer for this series.
|
||||
..setAttribute(charts.rendererIdKey, 'customTargetLine'),
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Tablet Target Line',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: tableTargetLineData,
|
||||
)
|
||||
// Configure our custom bar target renderer for this series.
|
||||
..setAttribute(charts.rendererIdKey, 'customTargetLine'),
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Mobile Target Line',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: mobileTargetLineData,
|
||||
)
|
||||
// Configure our custom bar target renderer for this series.
|
||||
..setAttribute(charts.rendererIdKey, 'customTargetLine'),
|
||||
];
|
||||
}
|
||||
// EXCLUDE_FROM_GALLERY_DOCS_END
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return new charts.BarChart(seriesList,
|
||||
animate: animate,
|
||||
barGroupingType: charts.BarGroupingType.grouped,
|
||||
customSeriesRenderers: [
|
||||
new charts.BarTargetLineRendererConfig<String>(
|
||||
// ID used to link series to this renderer.
|
||||
customRendererId: 'customTargetLine',
|
||||
groupingType: charts.BarGroupingType.grouped)
|
||||
]);
|
||||
}
|
||||
|
||||
/// Create series list with multiple series
|
||||
static List<charts.Series<OrdinalSales, String>> _createSampleData() {
|
||||
final desktopSalesData = [
|
||||
new OrdinalSales('2014', 5),
|
||||
new OrdinalSales('2015', 25),
|
||||
new OrdinalSales('2016', 100),
|
||||
new OrdinalSales('2017', 75),
|
||||
];
|
||||
|
||||
final tableSalesData = [
|
||||
new OrdinalSales('2014', 25),
|
||||
new OrdinalSales('2015', 50),
|
||||
new OrdinalSales('2016', 10),
|
||||
new OrdinalSales('2017', 20),
|
||||
];
|
||||
|
||||
final mobileSalesData = [
|
||||
new OrdinalSales('2014', 10),
|
||||
new OrdinalSales('2015', 15),
|
||||
new OrdinalSales('2016', 50),
|
||||
new OrdinalSales('2017', 45),
|
||||
];
|
||||
|
||||
final desktopTargetLineData = [
|
||||
new OrdinalSales('2014', 4),
|
||||
new OrdinalSales('2015', 20),
|
||||
new OrdinalSales('2016', 80),
|
||||
new OrdinalSales('2017', 65),
|
||||
];
|
||||
|
||||
final tableTargetLineData = [
|
||||
new OrdinalSales('2014', 30),
|
||||
new OrdinalSales('2015', 55),
|
||||
new OrdinalSales('2016', 15),
|
||||
new OrdinalSales('2017', 25),
|
||||
];
|
||||
|
||||
final mobileTargetLineData = [
|
||||
new OrdinalSales('2014', 10),
|
||||
new OrdinalSales('2015', 5),
|
||||
new OrdinalSales('2016', 45),
|
||||
new OrdinalSales('2017', 35),
|
||||
];
|
||||
|
||||
return [
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Desktop',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: desktopSalesData,
|
||||
),
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Tablet',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: tableSalesData,
|
||||
),
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Mobile',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: mobileSalesData,
|
||||
),
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Desktop Target Line',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: desktopTargetLineData,
|
||||
)
|
||||
// Configure our custom bar target renderer for this series.
|
||||
..setAttribute(charts.rendererIdKey, 'customTargetLine'),
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Tablet Target Line',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: tableTargetLineData,
|
||||
)
|
||||
// Configure our custom bar target renderer for this series.
|
||||
..setAttribute(charts.rendererIdKey, 'customTargetLine'),
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Mobile Target Line',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: mobileTargetLineData,
|
||||
)
|
||||
// Configure our custom bar target renderer for this series.
|
||||
..setAttribute(charts.rendererIdKey, 'customTargetLine'),
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
/// Sample ordinal data type.
|
||||
class OrdinalSales {
|
||||
final String year;
|
||||
final int sales;
|
||||
|
||||
OrdinalSales(this.year, this.sales);
|
||||
}
|
||||
104
web/charts/example/lib/bar_chart/horizontal.dart
Normal file
104
web/charts/example/lib/bar_chart/horizontal.dart
Normal file
@@ -0,0 +1,104 @@
|
||||
// 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.
|
||||
|
||||
/// Horizontal bar 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 HorizontalBarChart extends StatelessWidget {
|
||||
final List<charts.Series> seriesList;
|
||||
final bool animate;
|
||||
|
||||
HorizontalBarChart(this.seriesList, {this.animate});
|
||||
|
||||
/// Creates a [BarChart] with sample data and no transition.
|
||||
factory HorizontalBarChart.withSampleData() {
|
||||
return new HorizontalBarChart(
|
||||
_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 HorizontalBarChart.withRandomData() {
|
||||
return new HorizontalBarChart(_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)),
|
||||
];
|
||||
|
||||
return [
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Sales',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: data,
|
||||
)
|
||||
];
|
||||
}
|
||||
// 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,
|
||||
vertical: false,
|
||||
);
|
||||
}
|
||||
|
||||
/// 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),
|
||||
];
|
||||
|
||||
return [
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Sales',
|
||||
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);
|
||||
}
|
||||
123
web/charts/example/lib/bar_chart/horizontal_bar_label.dart
Normal file
123
web/charts/example/lib/bar_chart/horizontal_bar_label.dart
Normal file
@@ -0,0 +1,123 @@
|
||||
// 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.
|
||||
|
||||
/// Horizontal bar chart with bar label renderer example and hidden domain axis.
|
||||
// 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 HorizontalBarLabelChart extends StatelessWidget {
|
||||
final List<charts.Series> seriesList;
|
||||
final bool animate;
|
||||
|
||||
HorizontalBarLabelChart(this.seriesList, {this.animate});
|
||||
|
||||
/// Creates a [BarChart] with sample data and no transition.
|
||||
factory HorizontalBarLabelChart.withSampleData() {
|
||||
return new HorizontalBarLabelChart(
|
||||
_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 HorizontalBarLabelChart.withRandomData() {
|
||||
return new HorizontalBarLabelChart(_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)),
|
||||
];
|
||||
|
||||
return [
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Sales',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: data,
|
||||
// Set a label accessor to control the text of the bar label.
|
||||
labelAccessorFn: (OrdinalSales sales, _) =>
|
||||
'${sales.year}: \$${sales.sales.toString()}')
|
||||
];
|
||||
}
|
||||
// EXCLUDE_FROM_GALLERY_DOCS_END
|
||||
|
||||
// [BarLabelDecorator] will automatically position the label
|
||||
// inside the bar if the label will fit. If the label will not fit and the
|
||||
// area outside of the bar is larger than the bar, it will draw outside of the
|
||||
// bar. Labels can always display inside or outside using [LabelPosition].
|
||||
//
|
||||
// Text style for inside / outside can be controlled independently by setting
|
||||
// [insideLabelStyleSpec] and [outsideLabelStyleSpec].
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return new charts.BarChart(
|
||||
seriesList,
|
||||
animate: animate,
|
||||
vertical: false,
|
||||
// Set a bar label decorator.
|
||||
// Example configuring different styles for inside/outside:
|
||||
// barRendererDecorator: new charts.BarLabelDecorator(
|
||||
// insideLabelStyleSpec: new charts.TextStyleSpec(...),
|
||||
// outsideLabelStyleSpec: new charts.TextStyleSpec(...)),
|
||||
barRendererDecorator: new charts.BarLabelDecorator<String>(),
|
||||
// Hide domain axis.
|
||||
domainAxis:
|
||||
new charts.OrdinalAxisSpec(renderSpec: new charts.NoneRenderSpec()),
|
||||
);
|
||||
}
|
||||
|
||||
/// 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),
|
||||
];
|
||||
|
||||
return [
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Sales',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: data,
|
||||
// Set a label accessor to control the text of the bar label.
|
||||
labelAccessorFn: (OrdinalSales sales, _) =>
|
||||
'${sales.year}: \$${sales.sales.toString()}')
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
/// Sample ordinal data type.
|
||||
class OrdinalSales {
|
||||
final String year;
|
||||
final int sales;
|
||||
|
||||
OrdinalSales(this.year, this.sales);
|
||||
}
|
||||
@@ -0,0 +1,140 @@
|
||||
// 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.
|
||||
|
||||
/// Horizontal bar chart with custom style for each datum in the bar label.
|
||||
// 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 HorizontalBarLabelCustomChart extends StatelessWidget {
|
||||
final List<charts.Series> seriesList;
|
||||
final bool animate;
|
||||
|
||||
HorizontalBarLabelCustomChart(this.seriesList, {this.animate});
|
||||
|
||||
/// Creates a [BarChart] with sample data and no transition.
|
||||
static HorizontalBarLabelCustomChart createWithSampleData() {
|
||||
return new HorizontalBarLabelCustomChart(
|
||||
_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 HorizontalBarLabelCustomChart.withRandomData() {
|
||||
return new HorizontalBarLabelCustomChart(_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)),
|
||||
];
|
||||
|
||||
return [
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Sales',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: data,
|
||||
// Set a label accessor to control the text of the bar label.
|
||||
labelAccessorFn: (OrdinalSales sales, _) =>
|
||||
'${sales.year}: \$${sales.sales.toString()}',
|
||||
insideLabelStyleAccessorFn: (OrdinalSales sales, _) {
|
||||
final color = (sales.year == '2014')
|
||||
? charts.MaterialPalette.red.shadeDefault
|
||||
: charts.MaterialPalette.yellow.shadeDefault.darker;
|
||||
return new charts.TextStyleSpec(color: color);
|
||||
},
|
||||
outsideLabelStyleAccessorFn: (OrdinalSales sales, _) {
|
||||
final color = (sales.year == '2014')
|
||||
? charts.MaterialPalette.red.shadeDefault
|
||||
: charts.MaterialPalette.yellow.shadeDefault.darker;
|
||||
return new charts.TextStyleSpec(color: color);
|
||||
},
|
||||
),
|
||||
];
|
||||
}
|
||||
// EXCLUDE_FROM_GALLERY_DOCS_END
|
||||
|
||||
// The [BarLabelDecorator] has settings to set the text style for all labels
|
||||
// for inside the bar and outside the bar. To be able to control each datum's
|
||||
// style, set the style accessor functions on the series.
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return new charts.BarChart(
|
||||
seriesList,
|
||||
animate: animate,
|
||||
vertical: false,
|
||||
barRendererDecorator: new charts.BarLabelDecorator<String>(),
|
||||
// Hide domain axis.
|
||||
domainAxis:
|
||||
new charts.OrdinalAxisSpec(renderSpec: new charts.NoneRenderSpec()),
|
||||
);
|
||||
}
|
||||
|
||||
/// 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),
|
||||
];
|
||||
|
||||
return [
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Sales',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: data,
|
||||
// Set a label accessor to control the text of the bar label.
|
||||
labelAccessorFn: (OrdinalSales sales, _) =>
|
||||
'${sales.year}: \$${sales.sales.toString()}',
|
||||
insideLabelStyleAccessorFn: (OrdinalSales sales, _) {
|
||||
final color = (sales.year == '2014')
|
||||
? charts.MaterialPalette.red.shadeDefault
|
||||
: charts.MaterialPalette.yellow.shadeDefault.darker;
|
||||
return new charts.TextStyleSpec(color: color);
|
||||
},
|
||||
outsideLabelStyleAccessorFn: (OrdinalSales sales, _) {
|
||||
final color = (sales.year == '2014')
|
||||
? charts.MaterialPalette.red.shadeDefault
|
||||
: charts.MaterialPalette.yellow.shadeDefault.darker;
|
||||
return new charts.TextStyleSpec(color: color);
|
||||
},
|
||||
),
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
/// Sample ordinal data type.
|
||||
class OrdinalSales {
|
||||
final String year;
|
||||
final int sales;
|
||||
|
||||
OrdinalSales(this.year, this.sales);
|
||||
}
|
||||
@@ -0,0 +1,163 @@
|
||||
// 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.
|
||||
|
||||
/// Forward pattern hatch 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;
|
||||
|
||||
/// Forward hatch pattern horizontal bar chart example.
|
||||
///
|
||||
/// The second series of bars is rendered with a pattern by defining a
|
||||
/// fillPatternFn mapping function.
|
||||
class HorizontalPatternForwardHatchBarChart extends StatelessWidget {
|
||||
final List<charts.Series> seriesList;
|
||||
final bool animate;
|
||||
|
||||
HorizontalPatternForwardHatchBarChart(this.seriesList, {this.animate});
|
||||
|
||||
factory HorizontalPatternForwardHatchBarChart.withSampleData() {
|
||||
return new HorizontalPatternForwardHatchBarChart(
|
||||
_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 HorizontalPatternForwardHatchBarChart.withRandomData() {
|
||||
return new HorizontalPatternForwardHatchBarChart(_createRandomData());
|
||||
}
|
||||
|
||||
/// Create random data.
|
||||
static List<charts.Series<OrdinalSales, String>> _createRandomData() {
|
||||
final random = new Random();
|
||||
|
||||
final desktopSalesData = [
|
||||
new OrdinalSales('2014', random.nextInt(100)),
|
||||
new OrdinalSales('2015', random.nextInt(100)),
|
||||
new OrdinalSales('2016', random.nextInt(100)),
|
||||
new OrdinalSales('2017', random.nextInt(100)),
|
||||
];
|
||||
|
||||
final tableSalesData = [
|
||||
new OrdinalSales('2014', random.nextInt(100)),
|
||||
new OrdinalSales('2015', random.nextInt(100)),
|
||||
new OrdinalSales('2016', random.nextInt(100)),
|
||||
new OrdinalSales('2017', random.nextInt(100)),
|
||||
];
|
||||
|
||||
final mobileSalesData = [
|
||||
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: 'Desktop',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: desktopSalesData,
|
||||
),
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Tablet',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: tableSalesData,
|
||||
fillPatternFn: (OrdinalSales sales, _) =>
|
||||
charts.FillPatternType.forwardHatch,
|
||||
),
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Mobile',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: mobileSalesData,
|
||||
),
|
||||
];
|
||||
}
|
||||
// EXCLUDE_FROM_GALLERY_DOCS_END
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return new charts.BarChart(
|
||||
seriesList,
|
||||
animate: animate,
|
||||
barGroupingType: charts.BarGroupingType.grouped,
|
||||
vertical: false,
|
||||
);
|
||||
}
|
||||
|
||||
/// Create series list with multiple series
|
||||
static List<charts.Series<OrdinalSales, String>> _createSampleData() {
|
||||
final desktopSalesData = [
|
||||
new OrdinalSales('2014', 5),
|
||||
new OrdinalSales('2015', 25),
|
||||
new OrdinalSales('2016', 100),
|
||||
new OrdinalSales('2017', 75),
|
||||
];
|
||||
|
||||
final tableSalesData = [
|
||||
new OrdinalSales('2014', 25),
|
||||
new OrdinalSales('2015', 50),
|
||||
new OrdinalSales('2016', 10),
|
||||
new OrdinalSales('2017', 20),
|
||||
];
|
||||
|
||||
final mobileSalesData = [
|
||||
new OrdinalSales('2014', 10),
|
||||
new OrdinalSales('2015', 15),
|
||||
new OrdinalSales('2016', 50),
|
||||
new OrdinalSales('2017', 45),
|
||||
];
|
||||
|
||||
return [
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Desktop',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: desktopSalesData,
|
||||
),
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Tablet',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: tableSalesData,
|
||||
fillPatternFn: (OrdinalSales sales, _) =>
|
||||
charts.FillPatternType.forwardHatch,
|
||||
),
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Mobile',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: mobileSalesData,
|
||||
),
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
/// Sample ordinal data type.
|
||||
class OrdinalSales {
|
||||
final String year;
|
||||
final int sales;
|
||||
|
||||
OrdinalSales(this.year, this.sales);
|
||||
}
|
||||
161
web/charts/example/lib/bar_chart/pattern_forward_hatch.dart
Normal file
161
web/charts/example/lib/bar_chart/pattern_forward_hatch.dart
Normal file
@@ -0,0 +1,161 @@
|
||||
// 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.
|
||||
|
||||
/// Forward hatch pattern bar chart example.
|
||||
///
|
||||
/// The second series of bars is rendered with a pattern by defining a
|
||||
/// fillPatternFn mapping function.
|
||||
// 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;
|
||||
|
||||
class PatternForwardHatchBarChart extends StatelessWidget {
|
||||
final List<charts.Series> seriesList;
|
||||
final bool animate;
|
||||
|
||||
PatternForwardHatchBarChart(this.seriesList, {this.animate});
|
||||
|
||||
factory PatternForwardHatchBarChart.withSampleData() {
|
||||
return new PatternForwardHatchBarChart(
|
||||
_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 PatternForwardHatchBarChart.withRandomData() {
|
||||
return new PatternForwardHatchBarChart(_createRandomData());
|
||||
}
|
||||
|
||||
/// Create random data.
|
||||
static List<charts.Series<OrdinalSales, String>> _createRandomData() {
|
||||
final random = new Random();
|
||||
|
||||
final desktopSalesData = [
|
||||
new OrdinalSales('2014', random.nextInt(100)),
|
||||
new OrdinalSales('2015', random.nextInt(100)),
|
||||
new OrdinalSales('2016', random.nextInt(100)),
|
||||
new OrdinalSales('2017', random.nextInt(100)),
|
||||
];
|
||||
|
||||
final tableSalesData = [
|
||||
new OrdinalSales('2014', random.nextInt(100)),
|
||||
new OrdinalSales('2015', random.nextInt(100)),
|
||||
new OrdinalSales('2016', random.nextInt(100)),
|
||||
new OrdinalSales('2017', random.nextInt(100)),
|
||||
];
|
||||
|
||||
final mobileSalesData = [
|
||||
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: 'Desktop',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: desktopSalesData,
|
||||
),
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Tablet',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: tableSalesData,
|
||||
fillPatternFn: (OrdinalSales sales, _) =>
|
||||
charts.FillPatternType.forwardHatch,
|
||||
),
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Mobile',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: mobileSalesData,
|
||||
),
|
||||
];
|
||||
}
|
||||
// EXCLUDE_FROM_GALLERY_DOCS_END
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return new charts.BarChart(
|
||||
seriesList,
|
||||
animate: animate,
|
||||
barGroupingType: charts.BarGroupingType.grouped,
|
||||
);
|
||||
}
|
||||
|
||||
/// Create series list with multiple series
|
||||
static List<charts.Series<OrdinalSales, String>> _createSampleData() {
|
||||
final desktopSalesData = [
|
||||
new OrdinalSales('2014', 5),
|
||||
new OrdinalSales('2015', 25),
|
||||
new OrdinalSales('2016', 100),
|
||||
new OrdinalSales('2017', 75),
|
||||
];
|
||||
|
||||
final tableSalesData = [
|
||||
new OrdinalSales('2014', 25),
|
||||
new OrdinalSales('2015', 50),
|
||||
new OrdinalSales('2016', 10),
|
||||
new OrdinalSales('2017', 20),
|
||||
];
|
||||
|
||||
final mobileSalesData = [
|
||||
new OrdinalSales('2014', 10),
|
||||
new OrdinalSales('2015', 15),
|
||||
new OrdinalSales('2016', 50),
|
||||
new OrdinalSales('2017', 45),
|
||||
];
|
||||
|
||||
return [
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Desktop',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: desktopSalesData,
|
||||
),
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Tablet',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: tableSalesData,
|
||||
fillPatternFn: (OrdinalSales sales, _) =>
|
||||
charts.FillPatternType.forwardHatch,
|
||||
),
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Mobile',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: mobileSalesData,
|
||||
),
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
/// Sample ordinal data type.
|
||||
class OrdinalSales {
|
||||
final String year;
|
||||
final int sales;
|
||||
|
||||
OrdinalSales(this.year, this.sales);
|
||||
}
|
||||
104
web/charts/example/lib/bar_chart/simple.dart
Normal file
104
web/charts/example/lib/bar_chart/simple.dart
Normal file
@@ -0,0 +1,104 @@
|
||||
// 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:charts_flutter/flutter.dart' as charts;
|
||||
import 'package:flutter_web/material.dart';
|
||||
|
||||
class SimpleBarChart extends StatelessWidget {
|
||||
final List<charts.Series> seriesList;
|
||||
final bool animate;
|
||||
|
||||
SimpleBarChart(this.seriesList, {this.animate});
|
||||
|
||||
/// Creates a [BarChart] with sample data and no transition.
|
||||
factory SimpleBarChart.withSampleData() {
|
||||
return new SimpleBarChart(
|
||||
_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 SimpleBarChart.withRandomData() {
|
||||
return new SimpleBarChart(_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)),
|
||||
];
|
||||
|
||||
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,
|
||||
);
|
||||
}
|
||||
|
||||
/// 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),
|
||||
];
|
||||
|
||||
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);
|
||||
}
|
||||
140
web/charts/example/lib/bar_chart/spark_bar.dart
Normal file
140
web/charts/example/lib/bar_chart/spark_bar.dart
Normal file
@@ -0,0 +1,140 @@
|
||||
// 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.
|
||||
|
||||
/// Spark Bar 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 a Spark Bar by hiding both axis, reducing the chart margins.
|
||||
class SparkBar extends StatelessWidget {
|
||||
final List<charts.Series> seriesList;
|
||||
final bool animate;
|
||||
|
||||
SparkBar(this.seriesList, {this.animate});
|
||||
|
||||
factory SparkBar.withSampleData() {
|
||||
return new SparkBar(
|
||||
_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 SparkBar.withRandomData() {
|
||||
return new SparkBar(_createRandomData());
|
||||
}
|
||||
|
||||
/// Create random data.
|
||||
static List<charts.Series<OrdinalSales, String>> _createRandomData() {
|
||||
final random = new Random();
|
||||
|
||||
final globalSalesData = [
|
||||
new OrdinalSales('2007', random.nextInt(100)),
|
||||
new OrdinalSales('2008', random.nextInt(100)),
|
||||
new OrdinalSales('2009', random.nextInt(100)),
|
||||
new OrdinalSales('2010', random.nextInt(100)),
|
||||
new OrdinalSales('2011', random.nextInt(100)),
|
||||
new OrdinalSales('2012', random.nextInt(100)),
|
||||
new OrdinalSales('2013', random.nextInt(100)),
|
||||
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,
|
||||
),
|
||||
];
|
||||
}
|
||||
// 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 only draws an axis line (and even that can be hidden
|
||||
/// with showAxisLine=false).
|
||||
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()),
|
||||
|
||||
// With a spark chart we likely don't want large chart margins.
|
||||
// 1px is the smallest we can make each margin.
|
||||
layoutConfig: new charts.LayoutConfig(
|
||||
leftMarginSpec: new charts.MarginSpec.fixedPixel(0),
|
||||
topMarginSpec: new charts.MarginSpec.fixedPixel(0),
|
||||
rightMarginSpec: new charts.MarginSpec.fixedPixel(0),
|
||||
bottomMarginSpec: new charts.MarginSpec.fixedPixel(0)),
|
||||
);
|
||||
}
|
||||
|
||||
/// Create series list with single series
|
||||
static List<charts.Series<OrdinalSales, String>> _createSampleData() {
|
||||
final globalSalesData = [
|
||||
new OrdinalSales('2007', 3100),
|
||||
new OrdinalSales('2008', 3500),
|
||||
new OrdinalSales('2009', 5000),
|
||||
new OrdinalSales('2010', 2500),
|
||||
new OrdinalSales('2011', 3200),
|
||||
new OrdinalSales('2012', 4500),
|
||||
new OrdinalSales('2013', 4400),
|
||||
new OrdinalSales('2014', 5000),
|
||||
new OrdinalSales('2015', 5000),
|
||||
new OrdinalSales('2016', 4500),
|
||||
new OrdinalSales('2017', 4300),
|
||||
];
|
||||
|
||||
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);
|
||||
}
|
||||
155
web/charts/example/lib/bar_chart/stacked.dart
Normal file
155
web/charts/example/lib/bar_chart/stacked.dart
Normal file
@@ -0,0 +1,155 @@
|
||||
// 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;
|
||||
|
||||
class StackedBarChart extends StatelessWidget {
|
||||
final List<charts.Series> seriesList;
|
||||
final bool animate;
|
||||
|
||||
StackedBarChart(this.seriesList, {this.animate});
|
||||
|
||||
/// Creates a stacked [BarChart] with sample data and no transition.
|
||||
factory StackedBarChart.withSampleData() {
|
||||
return new StackedBarChart(
|
||||
_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 StackedBarChart.withRandomData() {
|
||||
return new StackedBarChart(_createRandomData());
|
||||
}
|
||||
|
||||
/// Create random data.
|
||||
static List<charts.Series<OrdinalSales, String>> _createRandomData() {
|
||||
final random = new Random();
|
||||
|
||||
final desktopSalesData = [
|
||||
new OrdinalSales('2014', random.nextInt(100)),
|
||||
new OrdinalSales('2015', random.nextInt(100)),
|
||||
new OrdinalSales('2016', random.nextInt(100)),
|
||||
new OrdinalSales('2017', random.nextInt(100)),
|
||||
];
|
||||
|
||||
final tableSalesData = [
|
||||
new OrdinalSales('2014', random.nextInt(100)),
|
||||
new OrdinalSales('2015', random.nextInt(100)),
|
||||
new OrdinalSales('2016', random.nextInt(100)),
|
||||
new OrdinalSales('2017', random.nextInt(100)),
|
||||
];
|
||||
|
||||
final mobileSalesData = [
|
||||
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: 'Desktop',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: desktopSalesData,
|
||||
),
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Tablet',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: tableSalesData,
|
||||
),
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Mobile',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: mobileSalesData,
|
||||
),
|
||||
];
|
||||
}
|
||||
// EXCLUDE_FROM_GALLERY_DOCS_END
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return new charts.BarChart(
|
||||
seriesList,
|
||||
animate: animate,
|
||||
barGroupingType: charts.BarGroupingType.stacked,
|
||||
);
|
||||
}
|
||||
|
||||
/// Create series list with multiple series
|
||||
static List<charts.Series<OrdinalSales, String>> _createSampleData() {
|
||||
final desktopSalesData = [
|
||||
new OrdinalSales('2014', 5),
|
||||
new OrdinalSales('2015', 25),
|
||||
new OrdinalSales('2016', 100),
|
||||
new OrdinalSales('2017', 75),
|
||||
];
|
||||
|
||||
final tableSalesData = [
|
||||
new OrdinalSales('2014', 25),
|
||||
new OrdinalSales('2015', 50),
|
||||
new OrdinalSales('2016', 10),
|
||||
new OrdinalSales('2017', 20),
|
||||
];
|
||||
|
||||
final mobileSalesData = [
|
||||
new OrdinalSales('2014', 10),
|
||||
new OrdinalSales('2015', 15),
|
||||
new OrdinalSales('2016', 50),
|
||||
new OrdinalSales('2017', 45),
|
||||
];
|
||||
|
||||
return [
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Desktop',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: desktopSalesData,
|
||||
),
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Tablet',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: tableSalesData,
|
||||
),
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Mobile',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: mobileSalesData,
|
||||
),
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
/// Sample ordinal data type.
|
||||
class OrdinalSales {
|
||||
final String year;
|
||||
final int sales;
|
||||
|
||||
OrdinalSales(this.year, this.sales);
|
||||
}
|
||||
178
web/charts/example/lib/bar_chart/stacked_fill_color.dart
Normal file
178
web/charts/example/lib/bar_chart/stacked_fill_color.dart
Normal file
@@ -0,0 +1,178 @@
|
||||
// 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 a stacked bar chart with three series, each rendered with
|
||||
/// different fill colors.
|
||||
class StackedFillColorBarChart extends StatelessWidget {
|
||||
final List<charts.Series> seriesList;
|
||||
final bool animate;
|
||||
|
||||
StackedFillColorBarChart(this.seriesList, {this.animate});
|
||||
|
||||
factory StackedFillColorBarChart.withSampleData() {
|
||||
return new StackedFillColorBarChart(
|
||||
_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 StackedFillColorBarChart.withRandomData() {
|
||||
return new StackedFillColorBarChart(_createRandomData());
|
||||
}
|
||||
|
||||
/// Create random data.
|
||||
static List<charts.Series<OrdinalSales, String>> _createRandomData() {
|
||||
final random = new Random();
|
||||
|
||||
final desktopSalesData = [
|
||||
new OrdinalSales('2014', random.nextInt(100)),
|
||||
new OrdinalSales('2015', random.nextInt(100)),
|
||||
new OrdinalSales('2016', random.nextInt(100)),
|
||||
new OrdinalSales('2017', random.nextInt(100)),
|
||||
];
|
||||
|
||||
final tableSalesData = [
|
||||
new OrdinalSales('2014', random.nextInt(100)),
|
||||
new OrdinalSales('2015', random.nextInt(100)),
|
||||
new OrdinalSales('2016', random.nextInt(100)),
|
||||
new OrdinalSales('2017', random.nextInt(100)),
|
||||
];
|
||||
|
||||
final mobileSalesData = [
|
||||
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 [
|
||||
// Blue bars with a lighter center color.
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Desktop',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: desktopSalesData,
|
||||
colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
|
||||
fillColorFn: (_, __) =>
|
||||
charts.MaterialPalette.blue.shadeDefault.lighter,
|
||||
),
|
||||
// Solid red bars. Fill color will default to the series color if no
|
||||
// fillColorFn is configured.
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Tablet',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: tableSalesData,
|
||||
colorFn: (_, __) => charts.MaterialPalette.red.shadeDefault,
|
||||
),
|
||||
// Hollow green bars.
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Mobile',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: mobileSalesData,
|
||||
colorFn: (_, __) => charts.MaterialPalette.green.shadeDefault,
|
||||
fillColorFn: (_, __) => charts.MaterialPalette.transparent,
|
||||
),
|
||||
];
|
||||
}
|
||||
// EXCLUDE_FROM_GALLERY_DOCS_END
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return new charts.BarChart(
|
||||
seriesList,
|
||||
animate: animate,
|
||||
// Configure a stroke width to enable borders on the bars.
|
||||
defaultRenderer: new charts.BarRendererConfig(
|
||||
groupingType: charts.BarGroupingType.stacked, strokeWidthPx: 2.0),
|
||||
);
|
||||
}
|
||||
|
||||
/// Create series list with multiple series
|
||||
static List<charts.Series<OrdinalSales, String>> _createSampleData() {
|
||||
final desktopSalesData = [
|
||||
new OrdinalSales('2014', 5),
|
||||
new OrdinalSales('2015', 25),
|
||||
new OrdinalSales('2016', 100),
|
||||
new OrdinalSales('2017', 75),
|
||||
];
|
||||
|
||||
final tableSalesData = [
|
||||
new OrdinalSales('2014', 25),
|
||||
new OrdinalSales('2015', 50),
|
||||
new OrdinalSales('2016', 10),
|
||||
new OrdinalSales('2017', 20),
|
||||
];
|
||||
|
||||
final mobileSalesData = [
|
||||
new OrdinalSales('2014', 10),
|
||||
new OrdinalSales('2015', 50),
|
||||
new OrdinalSales('2016', 50),
|
||||
new OrdinalSales('2017', 45),
|
||||
];
|
||||
|
||||
return [
|
||||
// Blue bars with a lighter center color.
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Desktop',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: desktopSalesData,
|
||||
colorFn: (_, __) => charts.MaterialPalette.blue.shadeDefault,
|
||||
fillColorFn: (_, __) =>
|
||||
charts.MaterialPalette.blue.shadeDefault.lighter,
|
||||
),
|
||||
// Solid red bars. Fill color will default to the series color if no
|
||||
// fillColorFn is configured.
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Tablet',
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: tableSalesData,
|
||||
colorFn: (_, __) => charts.MaterialPalette.red.shadeDefault,
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
),
|
||||
// Hollow green bars.
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Mobile',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: mobileSalesData,
|
||||
colorFn: (_, __) => charts.MaterialPalette.green.shadeDefault,
|
||||
fillColorFn: (_, __) => charts.MaterialPalette.transparent,
|
||||
),
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
/// Sample ordinal data type.
|
||||
class OrdinalSales {
|
||||
final String year;
|
||||
final int sales;
|
||||
|
||||
OrdinalSales(this.year, this.sales);
|
||||
}
|
||||
157
web/charts/example/lib/bar_chart/stacked_horizontal.dart
Normal file
157
web/charts/example/lib/bar_chart/stacked_horizontal.dart
Normal file
@@ -0,0 +1,157 @@
|
||||
// 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;
|
||||
|
||||
class StackedHorizontalBarChart extends StatelessWidget {
|
||||
final List<charts.Series> seriesList;
|
||||
final bool animate;
|
||||
|
||||
StackedHorizontalBarChart(this.seriesList, {this.animate});
|
||||
|
||||
/// Creates a stacked [BarChart] with sample data and no transition.
|
||||
factory StackedHorizontalBarChart.withSampleData() {
|
||||
return new StackedHorizontalBarChart(
|
||||
_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 StackedHorizontalBarChart.withRandomData() {
|
||||
return new StackedHorizontalBarChart(_createRandomData());
|
||||
}
|
||||
|
||||
/// Create random data.
|
||||
static List<charts.Series<OrdinalSales, String>> _createRandomData() {
|
||||
final random = new Random();
|
||||
|
||||
final desktopSalesData = [
|
||||
new OrdinalSales('2014', random.nextInt(100)),
|
||||
new OrdinalSales('2015', random.nextInt(100)),
|
||||
new OrdinalSales('2016', random.nextInt(100)),
|
||||
new OrdinalSales('2017', random.nextInt(100)),
|
||||
];
|
||||
|
||||
final tableSalesData = [
|
||||
new OrdinalSales('2014', random.nextInt(100)),
|
||||
new OrdinalSales('2015', random.nextInt(100)),
|
||||
new OrdinalSales('2016', random.nextInt(100)),
|
||||
new OrdinalSales('2017', random.nextInt(100)),
|
||||
];
|
||||
|
||||
final mobileSalesData = [
|
||||
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: 'Desktop',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: desktopSalesData,
|
||||
),
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Tablet',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: tableSalesData,
|
||||
),
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Mobile',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: mobileSalesData,
|
||||
),
|
||||
];
|
||||
}
|
||||
// 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.stacked,
|
||||
vertical: false,
|
||||
);
|
||||
}
|
||||
|
||||
/// Create series list with multiple series
|
||||
static List<charts.Series<OrdinalSales, String>> _createSampleData() {
|
||||
final desktopSalesData = [
|
||||
new OrdinalSales('2014', 5),
|
||||
new OrdinalSales('2015', 25),
|
||||
new OrdinalSales('2016', 100),
|
||||
new OrdinalSales('2017', 75),
|
||||
];
|
||||
|
||||
final tableSalesData = [
|
||||
new OrdinalSales('2014', 25),
|
||||
new OrdinalSales('2015', 50),
|
||||
new OrdinalSales('2016', 10),
|
||||
new OrdinalSales('2017', 20),
|
||||
];
|
||||
|
||||
final mobileSalesData = [
|
||||
new OrdinalSales('2014', 10),
|
||||
new OrdinalSales('2015', 15),
|
||||
new OrdinalSales('2016', 50),
|
||||
new OrdinalSales('2017', 45),
|
||||
];
|
||||
|
||||
return [
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Desktop',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: desktopSalesData,
|
||||
),
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Tablet',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: tableSalesData,
|
||||
),
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Mobile',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: mobileSalesData,
|
||||
),
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
/// Sample ordinal data type.
|
||||
class OrdinalSales {
|
||||
final String year;
|
||||
final int sales;
|
||||
|
||||
OrdinalSales(this.year, this.sales);
|
||||
}
|
||||
249
web/charts/example/lib/bar_chart/stacked_target_line.dart
Normal file
249
web/charts/example/lib/bar_chart/stacked_target_line.dart
Normal file
@@ -0,0 +1,249 @@
|
||||
// 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;
|
||||
|
||||
class StackedBarTargetLineChart extends StatelessWidget {
|
||||
final List<charts.Series> seriesList;
|
||||
final bool animate;
|
||||
|
||||
StackedBarTargetLineChart(this.seriesList, {this.animate});
|
||||
|
||||
/// Creates a stacked [BarChart] with sample data and no transition.
|
||||
factory StackedBarTargetLineChart.withSampleData() {
|
||||
return new StackedBarTargetLineChart(
|
||||
_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 StackedBarTargetLineChart.withRandomData() {
|
||||
return new StackedBarTargetLineChart(_createRandomData());
|
||||
}
|
||||
|
||||
/// Create random data.
|
||||
static List<charts.Series<OrdinalSales, String>> _createRandomData() {
|
||||
final random = new Random();
|
||||
|
||||
final desktopSalesData = [
|
||||
new OrdinalSales('2014', random.nextInt(100)),
|
||||
new OrdinalSales('2015', random.nextInt(100)),
|
||||
new OrdinalSales('2016', random.nextInt(100)),
|
||||
new OrdinalSales('2017', random.nextInt(100)),
|
||||
];
|
||||
|
||||
final tableSalesData = [
|
||||
new OrdinalSales('2014', random.nextInt(100)),
|
||||
new OrdinalSales('2015', random.nextInt(100)),
|
||||
new OrdinalSales('2016', random.nextInt(100)),
|
||||
new OrdinalSales('2017', random.nextInt(100)),
|
||||
];
|
||||
|
||||
final mobileSalesData = [
|
||||
new OrdinalSales('2014', random.nextInt(100)),
|
||||
new OrdinalSales('2015', random.nextInt(100)),
|
||||
new OrdinalSales('2016', random.nextInt(100)),
|
||||
new OrdinalSales('2017', random.nextInt(100)),
|
||||
];
|
||||
|
||||
final desktopTargetLineData = [
|
||||
new OrdinalSales('2014', random.nextInt(100)),
|
||||
new OrdinalSales('2015', random.nextInt(100)),
|
||||
new OrdinalSales('2016', random.nextInt(100)),
|
||||
new OrdinalSales('2017', random.nextInt(100)),
|
||||
];
|
||||
|
||||
final tableTargetLineData = [
|
||||
new OrdinalSales('2014', random.nextInt(100)),
|
||||
new OrdinalSales('2015', random.nextInt(100)),
|
||||
new OrdinalSales('2016', random.nextInt(100)),
|
||||
new OrdinalSales('2017', random.nextInt(100)),
|
||||
];
|
||||
|
||||
final mobileTargetLineData = [
|
||||
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: 'Desktop',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: desktopSalesData,
|
||||
),
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Tablet',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: tableSalesData,
|
||||
),
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Mobile',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: mobileSalesData,
|
||||
),
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Desktop Target Line',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: desktopTargetLineData,
|
||||
)
|
||||
// Configure our custom bar target renderer for this series.
|
||||
..setAttribute(charts.rendererIdKey, 'customTargetLine'),
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Tablet Target Line',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: tableTargetLineData,
|
||||
)
|
||||
// Configure our custom bar target renderer for this series.
|
||||
..setAttribute(charts.rendererIdKey, 'customTargetLine'),
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Mobile Target Line',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: mobileTargetLineData,
|
||||
)
|
||||
// Configure our custom bar target renderer for this series.
|
||||
..setAttribute(charts.rendererIdKey, 'customTargetLine'),
|
||||
];
|
||||
}
|
||||
// EXCLUDE_FROM_GALLERY_DOCS_END
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return new charts.BarChart(seriesList,
|
||||
animate: animate,
|
||||
barGroupingType: charts.BarGroupingType.stacked,
|
||||
customSeriesRenderers: [
|
||||
new charts.BarTargetLineRendererConfig<String>(
|
||||
// ID used to link series to this renderer.
|
||||
customRendererId: 'customTargetLine',
|
||||
groupingType: charts.BarGroupingType.stacked)
|
||||
]);
|
||||
}
|
||||
|
||||
/// Create series list with multiple series
|
||||
static List<charts.Series<OrdinalSales, String>> _createSampleData() {
|
||||
final desktopSalesData = [
|
||||
new OrdinalSales('2014', 5),
|
||||
new OrdinalSales('2015', 25),
|
||||
new OrdinalSales('2016', 100),
|
||||
new OrdinalSales('2017', 75),
|
||||
];
|
||||
|
||||
final tableSalesData = [
|
||||
new OrdinalSales('2014', 25),
|
||||
new OrdinalSales('2015', 50),
|
||||
new OrdinalSales('2016', 10),
|
||||
new OrdinalSales('2017', 20),
|
||||
];
|
||||
|
||||
final mobileSalesData = [
|
||||
new OrdinalSales('2014', 10),
|
||||
new OrdinalSales('2015', 15),
|
||||
new OrdinalSales('2016', 50),
|
||||
new OrdinalSales('2017', 45),
|
||||
];
|
||||
|
||||
final desktopTargetLineData = [
|
||||
new OrdinalSales('2014', 4),
|
||||
new OrdinalSales('2015', 20),
|
||||
new OrdinalSales('2016', 80),
|
||||
new OrdinalSales('2017', 65),
|
||||
];
|
||||
|
||||
final tableTargetLineData = [
|
||||
new OrdinalSales('2014', 30),
|
||||
new OrdinalSales('2015', 55),
|
||||
new OrdinalSales('2016', 15),
|
||||
new OrdinalSales('2017', 25),
|
||||
];
|
||||
|
||||
final mobileTargetLineData = [
|
||||
new OrdinalSales('2014', 10),
|
||||
new OrdinalSales('2015', 5),
|
||||
new OrdinalSales('2016', 45),
|
||||
new OrdinalSales('2017', 35),
|
||||
];
|
||||
|
||||
return [
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Desktop',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: desktopSalesData,
|
||||
),
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Tablet',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: tableSalesData,
|
||||
),
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Mobile',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: mobileSalesData,
|
||||
),
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Desktop Target Line',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: desktopTargetLineData,
|
||||
)
|
||||
// Configure our custom bar target renderer for this series.
|
||||
..setAttribute(charts.rendererIdKey, 'customTargetLine'),
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Tablet Target Line',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: tableTargetLineData,
|
||||
)
|
||||
// Configure our custom bar target renderer for this series.
|
||||
..setAttribute(charts.rendererIdKey, 'customTargetLine'),
|
||||
new charts.Series<OrdinalSales, String>(
|
||||
id: 'Mobile Target Line',
|
||||
domainFn: (OrdinalSales sales, _) => sales.year,
|
||||
measureFn: (OrdinalSales sales, _) => sales.sales,
|
||||
data: mobileTargetLineData,
|
||||
)
|
||||
// Configure our custom bar target renderer for this series.
|
||||
..setAttribute(charts.rendererIdKey, 'customTargetLine'),
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
/// Sample ordinal data type.
|
||||
class OrdinalSales {
|
||||
final String year;
|
||||
final int sales;
|
||||
|
||||
OrdinalSales(this.year, this.sales);
|
||||
}
|
||||
Reference in New Issue
Block a user