-
-
Notifications
You must be signed in to change notification settings - Fork 1.8k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #120 from imaNNeoFighT/feature/scatter-chart
Feature/scatter chart
- Loading branch information
Showing
23 changed files
with
1,212 additions
and
29 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
195 changes: 195 additions & 0 deletions
195
example/lib/scatter_chart/samples/scatter_chart_sample1.dart
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,195 @@ | ||
| import 'dart:math'; | ||
|
|
||
| import 'package:fl_chart/fl_chart.dart'; | ||
| import 'package:flutter/material.dart'; | ||
|
|
||
| class ScatterChartSample1 extends StatefulWidget { | ||
| @override | ||
| State<StatefulWidget> createState() => _ScatterChartSample1State(); | ||
| } | ||
|
|
||
| class _ScatterChartSample1State extends State { | ||
|
|
||
| final maxX = 50.0; | ||
| final maxY = 50.0; | ||
| final radius = 8.0; | ||
|
|
||
| Color blue1 = const Color(0xFF0D47A1); | ||
| Color blue2 = const Color(0xFF42A5F5).withOpacity(0.8); | ||
|
|
||
| bool showFlutter = true; | ||
|
|
||
| @override | ||
| Widget build(BuildContext context) { | ||
| return GestureDetector( | ||
| onTap: () { | ||
| setState(() { | ||
| showFlutter = !showFlutter; | ||
| }); | ||
| }, | ||
| child: AspectRatio( | ||
| aspectRatio: 1, | ||
| child: Card( | ||
| color: const Color(0xffffffff), | ||
| elevation: 6, | ||
| child: ScatterChart( | ||
| ScatterChartData( | ||
| scatterSpots: showFlutter ? flutterLogoData() : randomData(), | ||
| minX: 0, | ||
| maxX: maxX, | ||
| minY: 0, | ||
| maxY: maxY, | ||
| borderData: FlBorderData( | ||
| show: false, | ||
| ), | ||
| gridData: const FlGridData( | ||
| show: false, | ||
| ), | ||
| titlesData: const FlTitlesData( | ||
| show: false, | ||
| ), | ||
| scatterTouchData: const ScatterTouchData( | ||
| enabled: false, | ||
| ) | ||
| ), | ||
| swapAnimationDuration: Duration(milliseconds: 600), | ||
| ), | ||
| ), | ||
| ), | ||
| ); | ||
| } | ||
|
|
||
| List<ScatterSpot> flutterLogoData() { | ||
| return [ | ||
| /// section 1 | ||
| ScatterSpot(20, 14.5, color: blue1, radius: radius), | ||
| ScatterSpot(22, 16.5, color: blue1, radius: radius), | ||
| ScatterSpot(24, 18.5, color: blue1, radius: radius), | ||
|
|
||
| ScatterSpot(22, 12.5, color: blue1, radius: radius), | ||
| ScatterSpot(24, 14.5, color: blue1, radius: radius), | ||
| ScatterSpot(26, 16.5, color: blue1, radius: radius), | ||
|
|
||
| ScatterSpot(24, 10.5, color: blue1, radius: radius), | ||
| ScatterSpot(26, 12.5, color: blue1, radius: radius), | ||
| ScatterSpot(28, 14.5, color: blue1, radius: radius), | ||
|
|
||
| ScatterSpot(26, 8.5, color: blue1, radius: radius), | ||
| ScatterSpot(28, 10.5, color: blue1, radius: radius), | ||
| ScatterSpot(30, 12.5, color: blue1, radius: radius), | ||
|
|
||
| ScatterSpot(28, 6.5, color: blue1, radius: radius), | ||
| ScatterSpot(30, 8.5, color: blue1, radius: radius), | ||
| ScatterSpot(32, 10.5, color: blue1, radius: radius), | ||
|
|
||
| ScatterSpot(30, 4.5, color: blue1, radius: radius), | ||
| ScatterSpot(32, 6.5, color: blue1, radius: radius), | ||
| ScatterSpot(34, 8.5, color: blue1, radius: radius), | ||
|
|
||
| ScatterSpot(34, 4.5, color: blue1, radius: radius), | ||
| ScatterSpot(36, 6.5, color: blue1, radius: radius), | ||
|
|
||
| ScatterSpot(38, 4.5, color: blue1, radius: radius), | ||
|
|
||
| /// section 2 | ||
| ScatterSpot(20, 14.5, color: blue2, radius: radius), | ||
| ScatterSpot(22, 12.5, color: blue2, radius: radius), | ||
| ScatterSpot(24, 10.5, color: blue2, radius: radius), | ||
|
|
||
| ScatterSpot(22, 16.5, color: blue2, radius: radius), | ||
| ScatterSpot(24, 14.5, color: blue2, radius: radius), | ||
| ScatterSpot(26, 12.5, color: blue2, radius: radius), | ||
|
|
||
| ScatterSpot(24, 18.5, color: blue2, radius: radius), | ||
| ScatterSpot(26, 16.5, color: blue2, radius: radius), | ||
| ScatterSpot(28, 14.5, color: blue2, radius: radius), | ||
|
|
||
| ScatterSpot(26, 20.5, color: blue2, radius: radius), | ||
| ScatterSpot(28, 18.5, color: blue2, radius: radius), | ||
| ScatterSpot(30, 16.5, color: blue2, radius: radius), | ||
|
|
||
| ScatterSpot(28, 22.5, color: blue2, radius: radius), | ||
| ScatterSpot(30, 20.5, color: blue2, radius: radius), | ||
| ScatterSpot(32, 18.5, color: blue2, radius: radius), | ||
|
|
||
| ScatterSpot(30, 24.5, color: blue2, radius: radius), | ||
| ScatterSpot(32, 22.5, color: blue2, radius: radius), | ||
| ScatterSpot(34, 20.5, color: blue2, radius: radius), | ||
|
|
||
| ScatterSpot(34, 24.5, color: blue2, radius: radius), | ||
| ScatterSpot(36, 22.5, color: blue2, radius: radius), | ||
|
|
||
| ScatterSpot(38, 24.5, color: blue2, radius: radius), | ||
|
|
||
| /// section 3 | ||
| ScatterSpot(10, 25, color: blue2, radius: radius), | ||
| ScatterSpot(12, 23, color: blue2, radius: radius), | ||
| ScatterSpot(14, 21, color: blue2, radius: radius), | ||
|
|
||
| ScatterSpot(12, 27, color: blue2, radius: radius), | ||
| ScatterSpot(14, 25, color: blue2, radius: radius), | ||
| ScatterSpot(16, 23, color: blue2, radius: radius), | ||
|
|
||
| ScatterSpot(14, 29, color: blue2, radius: radius), | ||
| ScatterSpot(16, 27, color: blue2, radius: radius), | ||
| ScatterSpot(18, 25, color: blue2, radius: radius), | ||
|
|
||
| ScatterSpot(16, 31, color: blue2, radius: radius), | ||
| ScatterSpot(18, 29, color: blue2, radius: radius), | ||
| ScatterSpot(20, 27, color: blue2, radius: radius), | ||
|
|
||
| ScatterSpot(18, 33, color: blue2, radius: radius), | ||
| ScatterSpot(20, 31, color: blue2, radius: radius), | ||
| ScatterSpot(22, 29, color: blue2, radius: radius), | ||
|
|
||
| ScatterSpot(20, 35, color: blue2, radius: radius), | ||
| ScatterSpot(22, 33, color: blue2, radius: radius), | ||
| ScatterSpot(24, 31, color: blue2, radius: radius), | ||
|
|
||
| ScatterSpot(22, 37, color: blue2, radius: radius), | ||
| ScatterSpot(24, 35, color: blue2, radius: radius), | ||
| ScatterSpot(26, 33, color: blue2, radius: radius), | ||
|
|
||
| ScatterSpot(24, 39, color: blue2, radius: radius), | ||
| ScatterSpot(26, 37, color: blue2, radius: radius), | ||
| ScatterSpot(28, 35, color: blue2, radius: radius), | ||
|
|
||
| ScatterSpot(26, 41, color: blue2, radius: radius), | ||
| ScatterSpot(28, 39, color: blue2, radius: radius), | ||
| ScatterSpot(30, 37, color: blue2, radius: radius), | ||
|
|
||
| ScatterSpot(28, 43, color: blue2, radius: radius), | ||
| ScatterSpot(30, 41, color: blue2, radius: radius), | ||
| ScatterSpot(32, 39, color: blue2, radius: radius), | ||
|
|
||
| ScatterSpot(30, 45, color: blue2, radius: radius), | ||
| ScatterSpot(32, 43, color: blue2, radius: radius), | ||
| ScatterSpot(34, 41, color: blue2, radius: radius), | ||
|
|
||
| ScatterSpot(34, 45, color: blue2, radius: radius), | ||
| ScatterSpot(36, 43, color: blue2, radius: radius), | ||
|
|
||
| ScatterSpot(38, 45, color: blue2, radius: radius), | ||
| ]; | ||
| } | ||
|
|
||
| List<ScatterSpot> randomData() { | ||
| const blue1Count = 21; | ||
| const blue2Count = 57; | ||
| return List.generate(blue1Count + blue2Count, (i) { | ||
| Color color; | ||
| if (i < blue1Count) { | ||
| color = blue1; | ||
| } else { | ||
| color = blue2; | ||
| } | ||
|
|
||
| return ScatterSpot( | ||
| (Random().nextDouble() * (maxX - 8)) + 4, | ||
| (Random().nextDouble() * (maxY - 8)) + 4, | ||
| color: color, | ||
| radius: (Random().nextDouble() * 16) + 4, | ||
| ); | ||
| }); | ||
| } | ||
| } |
86 changes: 86 additions & 0 deletions
86
example/lib/scatter_chart/samples/scatter_chart_sample2.dart
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,86 @@ | ||
| import 'package:fl_chart/fl_chart.dart'; | ||
| import 'package:flutter/material.dart'; | ||
|
|
||
| class ScatterChartSample2 extends StatefulWidget { | ||
| @override | ||
| State<StatefulWidget> createState() => _ScatterChartSample2State(); | ||
| } | ||
|
|
||
| class _ScatterChartSample2State extends State { | ||
| int touchedIndex; | ||
|
|
||
| Color greyColor = Colors.grey; | ||
|
|
||
| List<int> selectedSpots = []; | ||
|
|
||
| int lastPanStartOnIndex = -1; | ||
|
|
||
| @override | ||
| Widget build(BuildContext context) { | ||
| return AspectRatio( | ||
| aspectRatio: 1, | ||
| child: Card( | ||
| color: Color(0xff222222), | ||
| child: ScatterChart( | ||
| ScatterChartData( | ||
| scatterSpots: [ | ||
| ScatterSpot(4, 4, color: selectedSpots.contains(0) ? Colors.green : greyColor,), | ||
| ScatterSpot(2, 5, color: selectedSpots.contains(1) ? Colors.yellow : greyColor, radius: 12,), | ||
| ScatterSpot(4, 5, color: selectedSpots.contains(2) ? Colors.purpleAccent : greyColor, radius: 8,), | ||
| ScatterSpot(8, 6, color: selectedSpots.contains(3) ? Colors.orange : greyColor, radius: 20,), | ||
| ScatterSpot(5, 7, color: selectedSpots.contains(4) ? Colors.brown : greyColor, radius: 14,), | ||
| ScatterSpot(7, 2, color: selectedSpots.contains(5) ? Colors.lightGreenAccent : greyColor, radius: 18,), | ||
| ScatterSpot(3, 2, color: selectedSpots.contains(6) ? Colors.red : greyColor, radius: 36,), | ||
| ScatterSpot(2, 8, color: selectedSpots.contains(7) ? Colors.tealAccent : greyColor, radius: 22,), | ||
| ], | ||
| minX: 0, | ||
| maxX: 10, | ||
| minY: 0, | ||
| maxY: 10, | ||
| borderData: FlBorderData( | ||
| show: false, | ||
| ), | ||
| gridData: FlGridData( | ||
| show: true, | ||
| drawHorizontalGrid: true, | ||
| checkToShowHorizontalGrid: (value) => true, | ||
| getDrawingHorizontalGridLine: (value) => FlLine(color: Colors.white.withOpacity(0.1)), | ||
| drawVerticalGrid: true, | ||
| checkToShowVerticalGrid: (value) => true, | ||
| getDrawingVerticalGridLine: (value) => FlLine(color: Colors.white.withOpacity(0.1)), | ||
| ), | ||
| titlesData: const FlTitlesData( | ||
| show: false, | ||
| ), | ||
| showingTooltipIndicators: selectedSpots, | ||
| scatterTouchData: ScatterTouchData( | ||
| enabled: true, | ||
| handleBuiltInTouches: false, | ||
| touchTooltipData: const ScatterTouchTooltipData( | ||
| tooltipBgColor: Colors.black, | ||
| ), | ||
| touchCallback: (ScatterTouchResponse touchResponse) { | ||
| if (touchResponse.touchInput is FlPanStart) { | ||
| lastPanStartOnIndex = touchResponse.touchedSpotIndex; | ||
| } else if (touchResponse.touchInput is FlPanEnd) { | ||
| final FlPanEnd flPanEnd = touchResponse.touchInput; | ||
|
|
||
| if (flPanEnd.velocity.pixelsPerSecond <= const Offset(4, 4)) { | ||
| // Tap happened | ||
| setState(() { | ||
| if (selectedSpots.contains(lastPanStartOnIndex)) { | ||
| selectedSpots.remove(lastPanStartOnIndex); | ||
| } else { | ||
| selectedSpots.add(lastPanStartOnIndex); | ||
| } | ||
| }); | ||
| } | ||
| } | ||
| } | ||
| ) | ||
| ), | ||
| ), | ||
| ), | ||
| ); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| import 'package:example/scatter_chart/samples/scatter_chart_sample1.dart'; | ||
| import 'package:example/scatter_chart/samples/scatter_chart_sample2.dart'; | ||
| import 'package:flutter/material.dart'; | ||
|
|
||
| class ScatterChartPage extends StatelessWidget { | ||
| final Color barColor = Colors.white; | ||
| final Color barBackgroundColor = const Color(0xff72d8bf); | ||
| final double width = 22; | ||
|
|
||
| @override | ||
| Widget build(BuildContext context) { | ||
| return Scaffold( | ||
| backgroundColor: Color(0xffffffff), | ||
| body: ListView( | ||
| children: <Widget>[ | ||
| Padding( | ||
| padding: const EdgeInsets.symmetric( | ||
| vertical: 18.0, | ||
| horizontal: 22, | ||
| ), | ||
| child: Text( | ||
| 'Scatter Charts', | ||
| style: TextStyle( | ||
| color: Colors.black, | ||
| fontSize: 24, | ||
| fontWeight: FontWeight.bold, | ||
| ), | ||
| ), | ||
| ), | ||
| const SizedBox( | ||
| height: 9, | ||
| ), | ||
| Padding( | ||
| padding: const EdgeInsets.only(left: 18.0, right: 18.0, bottom: 18.0), | ||
| child: ScatterChartSample1(), | ||
| ), | ||
| Padding( | ||
| padding: const EdgeInsets.only(left: 18.0, right: 18.0, bottom: 18.0), | ||
| child: ScatterChartSample2(), | ||
| ) | ||
| ], | ||
| ), | ||
| ); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.