jolleekin / modern_charts Goto Github PK
View Code? Open in Web Editor NEWLicense: BSD 2-Clause "Simplified" License
License: BSD 2-Clause "Simplified" License
Hi I don't think that that line labels for series work properly when they are enabled
chart = new BarChart(container);
// First call, works.
chart.draw(dataTable, options);
// Second call, fails.
chart.draw(dataTable2, options);
It's seems to have a problem with the label position. When the value is "none" it breaks the lib
var chart = new LineChart(container);
var options = {
'legend': {
'position': 'none'
},
'series': {
'labels': {
'enabled': false
}
}
};
chart.draw(table, options);
Modern charts does not display the chart, but the legends are shown. kindly see the image attached. I've also attached the browser console logs. Thank you.
Environment
Dart Version : Dart VM version: 2.1.0 (Tue Nov 13 18:22:02 2018 +0100) on "macos_x64"
modern_charts: ^0.1.16
angular: ^5.0.0
import 'package:angular/angular.dart';
import 'package:modern_charts/modern_charts.dart';
import 'dart:html';
@Component(
selector: 'dashboard',
styleUrls: ['dashboard_component.css'],
templateUrl: 'dashboard_component.html',
directives: [coreDirectives])
class DashboardComponent implements OnInit{
@ViewChild('portfolioPie')
DivElement pieDiv;
var data = DataTable([
['BTC','1'],
['ETH', '1'],
['ICX','1']
]);
@override
void ngOnInit() {
var container = pieDiv;
var table = DataTable([
['Categories', 'Long series name', 'Series 2', 'Series 3'],
['January', 1, 3, 5],
['February', 3, 4, 6],
['March', 4, 3, 1],
['April', null, 5, 1],
['May', 3, 4, 2],
['June', 5, 10, 4],
['July', 4, 12, 8],
['August', 1, 3, 5],
['September', 3, 4, 6],
['October', 4, 3, 1],
['November', null, 5, 1],
['December', 3, 4, 2],
]);
var options = {
'animation': {
'onEnd': () {
}
},
'series': {
'labels': {'enabled': true}
},
'xAxis': {
'crosshair': {'enabled': true},
'labels': {'maxRotation': 90, 'minRotation': 0}
},
'yAxis': {'maxValue': 30, 'minInterval': 5},
'title': {'text': 'Bar Chart Demo'},
'tooltip': {'valueFormatter': (value) => '$value units'}
};
var chart = BarChart(container);
chart.draw(table, options);
}
}
<h3>Dashboard</h3>
<section>
<div class="panel">
<div class="panel-body">
<h3 class="card-title">Portfolio</h3>
<div id="portfolioPie" #portfolioPie></div>
</div>
</div>
</section>
#portfolioPie{
height:400px;
max-width: 100%;
}
Version 0.1.18 fixes important bugs, but it requires Intl version 0.16.0. Intl version 0.16.0 is not compatible with any publicly available version of Angular. Even Angular 6.0.0-alpha+1 (the latest as of this time) requires Intl < 0.16.0.
Version solving for an Angular project including modern_charts 0.1.18 results in something like the following.
Pubspec Snippet:
dependencies:
angular: ^6.0.0-alpha+1
modern_charts: ^0.1.18
intl:
pub get:
Resolving dependencies...
Because modern_charts >=0.1.18 depends on intl ^0.16.0 and angular 6.0.0-alpha+1 depends on intl >=0.13.0 <0.16.0, modern_charts >=0.1.18 is incompatible with angular 6.0.0-alpha+1.
And because no versions of angular match >6.0.0-alpha+1 <7.0.0, modern_charts >=0.1.18 is incompatible with angular ^6.0.0-alpha+1.
So, because test_project depends on both angular ^6.0.0-alpha+1 and modern_charts ^0.1.18, version solving failed.
The easiest solution appears to be making the modern_charts Intl version requirement more lenient. The Intl 0.16.0 release appears to have few changes compared with previous so hopefully they wound not impact the functionality of modern_charts.
Although the function signature lists the options
map as an optional parameter, if it is not passed, no defaults are substituted and mergeMap
errors out.
Invocation: chart.draw(chartData);
Stacktrace:
EXCEPTION: NullError: invalid member on null: 'forEach'
STACKTRACE:
package:modern_charts/src/utils.dart 156:6 mergeMap
package:modern_charts/src/base.dart 873:25 draw
Thanks for sharing the chart.
I love it so far.
but after I do many chart.update()
somehow the hover and mouse click action is not working.
You should add some screenshots on Readme to help adoption of the lib
Hi,
Can we expect a Dart 2-compatible release? I'd love to use your library, but right now it's reading as Dart 2 incompatible.
How difficult would it be to adapt the canvas code to Flutter.io ?
Is there a way to assign distinct colors to bars within the same series?
BarChart fails to draw any bars when there is only one data point and crashes when you mouseover the chart with an index out of range error.
Take the following DataTable as an example for a website visitor count chart.
DataTable table = DataTable([
['Categories', 'Visitors'],
['2019-09-07', 23],
]);
Creating a BarChart with that table
will not draw the single bar that it should and mousing over will result in an error that looks something like the following:
EXCEPTION: RangeError (index): Index out of range: index must not be negative: -1
STACKTRACE:
dart:sdk_internal _get]
package:modern_charts/packages/modern_charts/src/base.dart 1362:26 [_getEntityGroupIndex]
package:modern_charts/packages/modern_charts/src/base.dart 719:17 [_mouseMove]
package:stack_trace <fn>
package:angular/src/core/change_detection/packages/angular/src/core/zone/ng_zone.dart 144:18 <fn>
dart:sdk_internal runUnary
package:angular/src/core/change_detection/packages/angular/src/core/zone/ng_zone.dart 141:18 [_runUnary]
dart:sdk_internal listen
package:modern_charts/packages/modern_charts/src/base.dart 755:43 [_initializeTooltip]
package:modern_charts/packages/modern_charts/src/base.dart 891:5 draw
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.