juliansteenbakker / community_charts Goto Github PK
View Code? Open in Web Editor NEWThis project is a fork of google/charts.
License: Apache License 2.0
This project is a fork of google/charts.
License: Apache License 2.0
Is it possible to hide the label when the value is 0?
for example:
static List<charts.Series<LinearSales, int>> _createSampleData() {
final data = [
new LinearSales(0, 100),
new LinearSales(1, 0),
new LinearSales(2, 75),
new LinearSales(3, 0),
new LinearSales(4, 0),
new LinearSales(5, 0),
// others zero value
];
return [
new charts.Series<LinearSales, int>(
id: 'Sales',
domainFn: (LinearSales sales, _) => sales.year,
measureFn: (LinearSales sales, _) => sales.sales,
data: data,
// Set a label accessor to control the text of the arc label.
labelAccessorFn: (LinearSales row, _) => '${row.year}: ${row.sales}',
)
];
}
Current result:
or when i set the showLeaderLines:false
, its only hide the line.
what i expect is, i can conditionally hide and show label.
maybe something like:
defaultRenderer:
charts.ArcRendererConfig(arcWidth: 120, arcRendererDecorators: [
charts.ArcLabelDecorator(
showLeaderLines: (value !=0 ),
outsideLabelStyleSpec: (if value==0 => hide)
),
])
expected results :
TIA
When I create 2 Area Charts from the same data set, one which uses the default y extent, and a second which uses a computed extent I supplied, the first y axis tick mark in the second chart is unlabeled (see pic).
The second problem I noted is that the area shading sometimes spills over the x axis my a few pixels.
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:community_charts_flutter/community_charts_flutter.dart';
void main() {
runApp(const MaterialApp(
title: 'Area Test',
home: TestPage(),
debugShowCheckedModeBanner: false,
));
}
/// Shows 2 area charts (one with default y extent, other computed y extent)
class TestPage extends StatelessWidget {
const TestPage({super.key});
@override
Widget build(BuildContext context) {
var windowSize = MediaQuery.of(context).size;
return Scaffold(
appBar: AppBar(title: const Center(child:Text('Two Charts'))),
body: Center(child:Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
ElevationChart(data, windowSize),
ElevationChart(data, windowSize, computeYViewport: true),
]))
);
}
}
/// Draws area chart of elevation vs distance traveled.
class ElevationChart extends StatelessWidget {
late final Series<Point, double> dataSeries;
late final Size windowSize;
late final NumericExtents? yViewport;
ElevationChart(List<Point> track, this.windowSize, {super.key,
bool computeYViewport = false}) {
yViewport = computeYViewport ? _computeYViewport(track) : null;
dataSeries = Series<Point, double>(
id: "test_chart",
data: track,
colorFn: (_, __) => MaterialPalette.blue.shadeDefault,
domainFn: (Point point, _) => point.x,
measureFn: (Point point, _) => point.y,
);
}
@override
Widget build(BuildContext context) {
var width = 0.8 * windowSize.width;
var height = 0.4 * windowSize.height;
var domainTickSpec = const BasicNumericTickProviderSpec(
desiredMinTickCount: 8, dataIsInWholeNumbers: false);
var measureTicSpec = const BasicNumericTickProviderSpec(zeroBound: false,
desiredMinTickCount: 8);
return SizedBox(width: width, height: height,
child: LineChart([dataSeries],
defaultRenderer:
LineRendererConfig(includeArea: true),
animate: false,
domainAxis: NumericAxisSpec(showAxisLine: true,
tickProviderSpec: domainTickSpec),
primaryMeasureAxis: yViewport != null ? NumericAxisSpec(showAxisLine: true,
tickProviderSpec: measureTicSpec, viewport: yViewport) :
NumericAxisSpec(showAxisLine: true, tickProviderSpec: measureTicSpec),
));
}
/// Computes y viewport with extra space around data at upper bound.
///
/// Lower bound is set to be multiple of 100. Upper bound is set to
/// a multiple of 800 higher.
NumericExtents _computeYViewport(List<Point> track) {
var minElevation = track[0].y;
var maxElevation = track[0].y;
for (var point in track) {
minElevation = min(minElevation, point.y);
maxElevation = max(maxElevation, point.y);
}
var lowerBound = (minElevation.round() / 100) * 100.0;
var upperBound = lowerBound + 800.0;
while (upperBound <= maxElevation) {
upperBound = upperBound + 800.0;
}
return NumericExtents(lowerBound, upperBound);
}
}
class Point {
double x;
double y;
Point(this.x, this.y);
}
var data = <Point>[Point(0.0, 1423.0),
Point(0.25, 1439.0),
Point(0.5, 1465.0),
Point(0.75, 1490.0),
Point(1.0, 1520.0),
Point(1.25, 1565.0),
Point(1.5, 1585.0),
Point(2.0, 1591.0)];
Hello there,
when using the font weight parameter in TextStyleSpec it appears to do nothing. Regarding to the original issue on google/charts#351 this appeared to be fixed in the fork from @darkstarx - any possibility to merge the fix into that repository?
When setting the InitialSelection behavior on a TimeSeriesChart with stacked bars, the y-value point is not offset with the other bar's y-value. For example, the red point's y-value is correct at $52, but the blue point's y-value should be offset by the $52, instead the blue point is set at $95 as if the bars are not stacked. Once I select this point in the chart, my selectionModel's changedListener corrects the y-value points.
Julian - First, thanks so much for taking this library on. Grateful for your efforts as it appears many else are as well!
This was likely introduced by the migration tool as I had several like instances with similar cases. Following null safety migration, our app is crashing when invoking a PieChart with the following error:
======== Exception caught by rendering library =====================================================
The following _TypeError was thrown during performLayout():
type 'List<ArcRendererElement<dynamic>>' is not a subtype of type 'List<ArcRendererElement<Object>>?' in type cast
The relevant error-causing widget was:
PieChart<dynamic> PieChart:file:///C:/Users/Rick/AndroidStudioProjects/pbapp/lib/common/macro-donutchart.dart:43:19
When the exception was thrown, this was the stack:
#0 TypedRegistry.getAttr (package:community_charts_common/src/common/typed_registry.dart:20:27)
#1 MutableSeries.getAttr (package:community_charts_common/src/chart/common/processed_series.dart:213:48)
#2 ArcRenderer.update.<anonymous closure> (package:community_charts_common/src/chart/pie/arc_renderer.dart:164:18)
#3 List.forEach (dart:core-patch/growable_array.dart:416:8)
#4 ArcRenderer.update (package:community_charts_common/src/chart/pie/arc_renderer.dart:156:16)
#5 BaseChart.onPostLayout.<anonymous closure> (package:community_charts_common/src/chart/common/base_chart.dart:626:37)
#6 _LinkedHashMapMixin.forEach (dart:collection-patch/compact_hash.dart:625:13)
#7 BaseChart.onPostLayout (package:community_charts_common/src/chart/common/base_chart.dart:625:10)
[91 more...]
The following RenderObject was being processed when the exception was fired: ChartContainerRenderObject<dynamic>#f0cd4 NEEDS-LAYOUT NEEDS-PAINT
... parentData: <none> (can use size)
... constraints: BoxConstraints(w=232.5, h=190.0)
... semantic boundary
... size: MISSING
... painter: ChartContainerCustomPaint#b6c7e()
RenderObject: ChartContainerRenderObject<dynamic>#f0cd4 NEEDS-LAYOUT NEEDS-PAINT
parentData: <none> (can use size)
constraints: BoxConstraints(w=232.5, h=190.0)
semantic boundary
size: MISSING
painter: ChartContainerCustomPaint#b6c7e()
====================================================================================================
It's followed by asserts which I believe are due to it failing the render. e.g.:
======== Exception caught by rendering library =====================================================
The following assertion was thrown during performLayout():
RenderBox was not laid out: ChartContainerRenderObject<dynamic>#f0cd4 NEEDS-PAINT
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1965 pos 12: 'hasSize'
Either the assertion indicates an error in the framework itself, or we should provide substantially more information in this error message to help you determine and fix the underlying cause.
In either case, please report this assertion by filing a bug on GitHub:
https://github.com/flutter/flutter/issues/new?template=2_bug.yml
The relevant error-causing widget was:
PieChart<dynamic> PieChart:file:///C:/Users/Rick/AndroidStudioProjects/pbapp/lib/common/macro-donutchart.dart:43:19
When the exception was thrown, this was the stack:
#2 RenderBox.size (package:flutter/src/rendering/box.dart:1965:12)
#3 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:104:65)
#4 RenderObject.layout (package:flutter/src/rendering/object.dart:2493:7)
#5 RenderBox.layout (package:flutter/src/rendering/box.dart:2382:11)
#6 RenderProxyBoxMixin.performLayout (package:flutter/src/rendering/proxy_box.dart:104:21)
#7 RenderObject.layout (package:flutter/src/rendering/object.dart:2493:7)
#8 RenderBox.layout (package:flutter/src/rendering/box.dart:2382:11)
#9 MultiChildLayoutDelegate.layoutChild (package:flutter/src/rendering/custom_layout.dart:173:12)
[80 more...]
(elided 2 frames from class _AssertionError)
The following RenderObject was being processed when the exception was fired: RenderPointerListener#7d528 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
... parentData: <none> (can use size)
... constraints: BoxConstraints(w=232.5, h=190.0)
... size: MISSING
... behavior: deferToChild
... listeners: down, panZoomStart
child: ChartContainerRenderObject<dynamic>#f0cd4 NEEDS-PAINT
parentData: <none> (can use size)
constraints: BoxConstraints(w=232.5, h=190.0)
semantic boundary
size: MISSING
painter: ChartContainerCustomPaint#b6c7e()
RenderObject: RenderPointerListener#7d528 NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
parentData: <none> (can use size)
constraints: BoxConstraints(w=232.5, h=190.0)
size: MISSING
behavior: deferToChild
listeners: down, panZoomStart
child: ChartContainerRenderObject<dynamic>#f0cd4 NEEDS-PAINT
parentData: <none> (can use size)
constraints: BoxConstraints(w=232.5, h=190.0)
semantic boundary
size: MISSING
painter: ChartContainerCustomPaint#b6c7e()
====================================================================================================
Here's our code invoking the PieChart:
class MacroDonutChart extends StatelessWidget {
final List<MacroCounts> data;
final List<charts.Color> palette;
final bool animate;
final Function(charts.SelectionModel model) selectCallback;
final int selectedIndex;
MacroDonutChart({required this.data, required this.palette, required this.animate, required this.selectCallback, required this.selectedIndex});
List<charts.Series<MacroCounts, String>> _createSeries(BuildContext context) {
return [
charts.Series<MacroCounts, String>(
id: "MacroDonut",
data: data,
domainFn: (MacroCounts macCount, _) => macCount.name,
measureFn: (MacroCounts macCount, _) => macCount.total,
labelAccessorFn: (MacroCounts macCount, _) => '${macCount.name}',
colorFn: (_, index){
if(selectedIndex == -1 || index == selectedIndex){
return palette[index!];
} else {
return charts.ColorUtil.fromDartColor(Theme.of(context).disabledColor);
}
//return palette[index];
},
),
];
}
@override
Widget build(BuildContext context) {
return charts.PieChart(
_createSeries(context),
animate: animate,
selectionModels: [
charts.SelectionModelConfig(
type: charts.SelectionModelType.info,
changedListener: (charts.SelectionModel model) {
selectCallback(model);
},
)
],
defaultRenderer: charts.ArcRendererConfig(
arcWidth: 22,
strokeWidthPx: 1,
),
);
}
}
Flutter doctor:
[√] Flutter (Channel stable, 3.13.3, on Microsoft Windows [Version 10.0.19045.3448], locale en-US)
• Flutter version 3.13.3 on channel stable at C:\Users\Rick\flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 2524052335 (2 weeks ago), 2023-09-06 14:32:31 -0700
• Engine revision b8d35810e9
• Dart version 3.1.1
• DevTools version 2.25.0
Many thanks for looking into this.
Rick
when i set includePoint to be true in Line Chart, point/plot not show.
However, there is an indication of a change in paint at the top of the chart, a point appears like a target line symbol and the symbol is not at the correct coordinate point. this happened in the new version recently. safe on older versions.
when include point false:
when include point true:
Q:question and W:why
Q: How do i avoid auto zoom resize?
W: Cause actually it does resize to min and max value of the lines in the visible area, it makes really complicated to read stuff while panning on really high or low peaks.
Q: Zoom via scroll wheel on chrome seems not to work, any suggestions?
W: i can be missing stuff cause i do not use flutter from long.
Q:I cannot find docs about this project, can you guys point me somewhere to find them?
W:Cause i am a flutter newbie docs is helpful.
In any case thanks for the time spent reading my questions, hope this project gets lot of love.
While you changed the link for community_charts_common, community_charts_flutter still links to the outdated google repo.
This might be the reason why there are still almost no open issues here ;-)
chore: intl ^0.19.0
chore: intl ^0.18.0
After add the community_charts_flutter
to my project, I cant analyze the apk size.
run this command:
flutter build apk --target-platform=android-arm --analyze-size --verbose
and got this error:
../../third_party/dart/runtime/vm/app_snapshot.cc: 7704: error: Request to create artificial node for object with
cid 60
[ +5 ms] [ +1 ms] version=3.4.1 (stable) (Tue May 21 15:46:25 2024 +0000) on "macos_arm"
[ ] [ ] pid=66872, thread=-1, isolate_group=isolate(0x7fc805810600), isolate=isolate(0x7fc80580ee00)
[ ] [ ] os=macos, arch=arm, comp=no, sim=no
[ ] [ ] isolate_instructions=0, vm_instructions=0
[ ] [ ] fp=305a67a40, sp=305a67a20, pc=100d68c6b
[ +89 ms] [ +24 ms] pc 0x0000000100d68c6b fp 0x0000000305a67a40 Dart_DumpNativeStackTrace+0x4b
[ ] [ +5 ms] pc 0x0000000100895b81 fp 0x0000000305a67b20 dart::Assert::Fail(char const*, ...) const+0x91
[ ] [ +1 ms] pc 0x00000001008eef1f fp 0x0000000305a67be0 dart::Serializer::CreateArtificialNodeIfNeeded(dart::ObjectPtr)+0x8af
[ ] [ ] pc 0x0000000100912a54 fp 0x0000000305a681a0 dart::Serializer::Serialize(dart::SerializationRoots*)+0x50d4
[ ] [ +2 ms] pc 0x0000000100929545 fp 0x0000000305a68410
dart::FullSnapshotWriter::WriteFullSnapshot(dart::GrowableArray<dart::LoadingUnitSerializationData*>*)+0x5b5
[ ] [ +2 ms] pc 0x0000000100d6534c fp 0x0000000305a68810 dart::CreateAppAOTSnapshot(void ()(void, unsigned char const*,
long), void*, bool, bool, void*, dart::GrowableArray<dart::LoadingUnitSerializationData*>, dart::LoadingUnitSerializationData, unsigned
int)+0xb5c
[ ] [ ] pc 0x0000000100d66c91 fp 0x0000000305a688f0 Dart_CreateAppAOTSnapshotAsElf+0x191
[ ] [ ] pc 0x000000010088e9dd fp 0x0000000305a68e00 dart::bin::main(int, char**)+0x1e4d
[ ] [ +5 ms] pc 0x00000002010ee310 fp 0x0000000305a690a0 Unknown symbol
[ ] [ ] -- End of DumpStackTrace
how to reporoduce:
community_charts_flutter
to your flutter project . in my case I use 1.0.4
versionflutter build apk --target-platform=android-arm --analyze-size
i try to remove the package from my pubspec.yaml
file,
flutter clean
and then flutter pub get
flutter build apk --target-platform=android-arm --analyze-size
flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.22.1, on macOS 13.0.1 22A400 darwin-arm64, locale en-ID)
[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
[!] Xcode - develop for iOS and macOS (Xcode 14.1)
! Flutter recommends a minimum Xcode version of 15.
Download the latest version or update via the Mac App Store.
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.3)
[✓] VS Code (version 1.90.0)
[✓] Connected device (4 available)
[✓] Network resources
! Doctor found issues in 1 category.
Would love to know a way I could hide the outsideLabelStyleSpec and **insideLabelStyleSpec **. Even after setting both to null, the label appears randomly in the bars some inside and some outside. thanks
i found this similar on selection model, but how to show tooltip on the right position item chart.
thank you
Hello;
I am trying to show series labels(not legends, just categories) as String and line points values. Is there any way on Line Chart?
I am currently managing labels in TimeSeriesChart as using extended DateTimeFactory class but still its not string... and still not managing line points labels/values. I need to show point values on chart.
Can you override the colors specified and add more colors since you defined your color palette which is not exhaustive and one cannot add their color (based on brand)? or framework colors from the Flutter framework
First of all I want to take the opportunity to thank you and the other guys working on that repo that you took it from the original and try to maintain it! I use this library for quite some time now and just like how extensive it is.
I realized I cannot build the current v1.0.2 example released on pub.dev because of an issue in src/behaviors/legend/legend_layout.dart
Try https://zapp.run/pub/community_charts_flutter yourself and you'll get a comprehensive error message.
Thank you
I love this library. And now, I want to show line chart vertically. How can I do that?
Thanks for your advices
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.