google / chartjs.dart Goto Github PK
View Code? Open in Web Editor NEWARCHIVED/UNMAINTAINED Dart API for Chart.js
Home Page: https://pub.dev/packages/chartjs
License: Other
ARCHIVED/UNMAINTAINED Dart API for Chart.js
Home Page: https://pub.dev/packages/chartjs
License: Other
I tried to use chartjs.dart with AngularDart. I added chartjs.dart as a dependency and put the chart.js in the header of my index.html. Then I wrapped your example in a component:
import 'package:angular2/angular2.dart';
import 'dart:html';
import 'dart:math' as math;
import 'package:chartjs/chartjs.dart';
@Component(
selector: 'statistics',
template: '''<h1>Statistics</h1>
<div class="wrapper">
<canvas id="quackChart" height="450" width="600"></canvas>
</div>''',
styleUrls: const ['statistics_component.css'])
class StatisticsComponent {
void ngOnInit() => renderChart();
void renderChart() {
var rnd = new math.Random();
var months = <String>["January", "February", "March", "April", "May", "June"];
var data = new LinearChartData(labels: months, datasets: <ChartDataSets>[
new ChartDataSets(
label: "My First dataset",
backgroundColor: "rgba(220,220,220,0.2)",
data: months.map((_) => rnd.nextInt(100)).toList()),
new ChartDataSets(
label: "My Second dataset",
backgroundColor: "rgba(151,187,205,0.2)",
data: months.map((_) => rnd.nextInt(100)).toList())
]);
var config = new ChartConfiguration(
type: 'line', data: data, options: new ChartOptions(responsive: true));
new Chart(querySelector('#quackChart') as CanvasElement, config);
}
}
Unfortunately the chart doesn't render. There are no errors in the console. Is there a known issue with using chartjs.dart and Angular2 together?
I am trying to use chartjs.dart in my project. However, getting the error: TypeError: Cannot read property 'Chart' of undefined. Would greatly appreciate any thoughts on how to resolve this. The example does work when I download it and run it. Just not in my project.
My dart version is: Dart VM version: 2.1.1-dev.3.2 (Thu Jan 24 11:50:07 2019 +0100) on "macos_x64" and my pubspec.yaml is:
name: my_proj
version: 0.0.1
environment:
sdk: '>=2.0.0 <3.0.0'
dependencies:
angular: ^5.2.0
angular_components: ^0.11.0
angular_forms: ^2.1.1
angular_router: ^2.0.0-alpha+21
#quiver: ^0.28.0
js: ^0.6.0
bootstrap_sass: any
intl: ^0.15.7
chartjs: ^0.5.0
analyzer: ^0.34.0
pam_shared_libs:
path: ../pam_shared_libs
dev_dependencies:
angular_test: ^2.0.0
build_runner: ^1.2.3
build_test: ^0.10.4
build_web_compilers: ^1.1.0
#intl_translation: ^0.17.2
#test: ^0.12.30
js: ^0.6.1+1
sass_builder: ^2.1.2
#angular_analyzer_plugin: ^0.0.17+5
analyzer:
strong-mode: true
transformers:
sass_builder
angular:
entry_points:
- web/main.dart
test/pub_serve:
$include: test/**_test.dart
i fix this problem
external num get cornerRadius; external set cornerRadius(num v);
at 370 line
num cornerRadius,
at 399 line
There are two attributes for positioning legend:
Solution: just add to the begging of class ChartLegendOptions:
external String /*'start'|'center'|'end'*/ get align;
external set align(String /*'start'|'center'|'end'*/ v);
and
String align,
to the top of the external factory ChartLegendOptions at the bottom of the class.
When I try to use the example code (or any other code to create charts) in angular 5 (Dartlang 2 stable) I always get this error:
EXCEPTION: TypeError: Cannot read property 'Chart' of undefined
I'm debugging the code, everything seems correct except the last line.
I tried renaming the import (as prefix) and the problem persisted. ¿Any Idea?
These are my dependencies:
dependencies:
angular: ^5.0.0
angular_forms: ^2.0.0
angular_router: ^2.0.0-alpha+19
bootstrap_sass: any
json_serializable: ^1.2.1
chartjs: ^0.5.0
dev_dependencies:
angular_test: ^2.0.0
build_runner: ^0.10.0
build_test: ^0.10.2
build_web_compilers: ^0.4.0
test: ^1.0.0
sass_builder: ^2.0.0
And this is the code:
void ngOnInit() {
new Future.delayed(const Duration(seconds: 2), () => createChart());
}
void createChart() {
var rnd = new math.Random();
var months = <String>[
'January',
'February',
'March',
'April',
'May',
'June'
];
var data = new LinearChartData(labels: months, datasets: <ChartDataSets>[
new ChartDataSets(
label: 'My First dataset',
backgroundColor: 'rgba(220,220,220,0.2)',
data: months.map((_) => rnd.nextInt(100)).toList()),
new ChartDataSets(
label: 'My Second dataset',
backgroundColor: 'rgba(151,187,205,0.2)',
data: months.map((_) => rnd.nextInt(100)).toList())
]);
var config = new ChartConfiguration(
type: 'line', data: data, options: new ChartOptions(responsive: true));
CanvasElement canvas = querySelector('#canvas');
new Chart(canvas, config);
}
Cheers
After the port to 2.0.0, now seeing this issue with the code below:
Abstract classes can't be created with a 'new' expression.
var config = new ChartConfiguration( type: 'line', data: data, options: new ChartOptions( responsive: true, scales: new ChartScales(type: 'linear', yAxes: [new ChartYAxe(type: 'linear', ticks: new TickOptions(min: 3000, max: 110000))])));
It seems the issue is similar to this issue:
#26 (this fixed "ChartYAxe")
and / or
#22
I was using chartjs successfully in my AngularDart project up until this morning when I started upgrading to the 2.0.0 official public release (I was using the 2.0.65 dev release).
The compiler now complains about code like this
ChartXAxe xAxe = new ChartXAxe();
with an error of:
error: Abstract classes can't be created with a 'new' expression.
Am I using the library wrong when I try to instantiate things like ChartXAxe when building up my chart in the component .dart class?
If I run webdev serve then ChartTooltipOptions callbacks work perfectly.
Inside new ChartOptions()
//snip tooltips: new ChartTooltipOptions( callbacks: new ChartTooltipCallback(label: (item, data) { String ele = item.xLabel; Set names = new Set(); nameList.forEach((a) { names.add(a); } }); return names.toList(); }, title: (_) { return "Title"; })) //snip
Once I webdev build and run on a live site then the chart hangs with an error:
Chart.bundle.js:13069 Uncaught TypeError: callbacks.title.apply is not a function at ChartElement.getTitle (Chart.bundle.js:13069) at ChartElement.update (Chart.bundle.js:13196) at ChartElement.handleEvent (Chart.bundle.js:13531) at Chart.eventHandler (Chart.bundle.js:8952) at listener (Chart.bundle.js:8886) at HTMLCanvasElement.proxies
I've also replaces my Chart.bundle.js with the CDN Chart.js from the example. Same result - works when being served locally, doesn't work once compiled.
I've also removed the title callback and then I get the same error with the label callback: callbacks.label.apply is not a function
Any plan to upgrade this package to support NNBD?
Hi, can you add a timer to show how you can update the chart dynamically?
import 'dart:async';
import 'dart:html';
import 'dart:math' as math;
import 'package:chartjs/chartjs.dart';
void main() {
var rnd = new math.Random();
var months = <String>["January", "February", "March", "April", "May", "June"];
final LinearChartData data = new LinearChartData(labels: months, datasets: <ChartDataSets>[
new ChartDataSets(
label: "My First dataset",
backgroundColor: "rgba(220,220,220,0.2)",
data: months.map((_) => rnd.nextInt(100)).toList()),
new ChartDataSets(
label: "My Second dataset",
backgroundColor: "rgba(151,187,205,0.2)",
data: months.map((_) => rnd.nextInt(100)).toList())
]);
final ChartConfiguration config = new ChartConfiguration(
type: 'line', data: data, options: new ChartOptions(responsive: true));
final Chart chart = new Chart(querySelector('#canvas') as CanvasElement, config);
new Timer.periodic(new Duration(milliseconds: 500),(_) {
data.datasets.first.data[1] = rnd.nextInt(100);
data.datasets.first.data[2] = rnd.nextInt(100);
chart.update();
});
}
对于初学Flutter者,看到这些代码一团迷雾,请问应该如何在fullter项目中使用此代码库?
I am facing a problem using the github repository instead of the pub package (v0.3.2). I believe that the same problem exists for version 0.4.0+1.
It looks like the external factory constructors are not getting generated or just missing.
Example is ChartXAxe
class which was:
@anonymous
@JS()
abstract class ChartXAxe implements CommonAxe {
external num get categoryPercentage;
external set categoryPercentage(num v);
external num get barPercentage;
external set barPercentage(num v);
external TimeScale get time;
external set time(TimeScale v);
external factory ChartXAxe(
{num categoryPercentage,
num barPercentage,
TimeScale time,
String /*'category'|'linear'|'logarithmic'|'time'|'radialLinear'|String*/ type,
bool display,
String id,
bool stacked,
String position,
TickOptions ticks,
GridLineOptions gridLines,
num barThickness,
ScaleTitleOptions scaleLabel});
}
and changed in dd29e3a (link to line) to:
@anonymous
@JS()
abstract class ChartXAxe implements CommonAxe {
external num get categoryPercentage;
external set categoryPercentage(num v);
external num get barPercentage;
external set barPercentage(num v);
external TimeScale get time;
external set time(TimeScale v);
}
The same applies for other classes as well, for example LinearTickOptions
, ChartYAxe
, ChartLegendLabelOptions
, ChartLegendOptions
.
I can take those constructors and move them to the latest code, carefully add any new options that were added and push another PR, unless they can be auto generated them somehow.
I have looked at Chartjs examples in Javascript and tried to implement the dart version of it with the following result.
var xAx = charts.ChartXAxe(
display: true,
barThickness: 2,
type: 'time',
time: charts.TimeScale(
parser: "HH:mm:ss",
unit: 'hour',
unitStepSize: 1,
//round: 'hour', // this will round the data.
tooltipFormat: "HH:mm:ss",
displayFormats: charts.TimeDisplayFormat(hour: 'HH:mm:ss'),
),
);
putting this xAxis configuration inside of my ChartConfiguration;
var config = charts.ChartConfiguration(
type: 'line',
data: data,
options: charts.ChartOptions(
responsive: true,
scales:
charts.ChartScales<charts.TickOptions>(xAxes: [xAx], yAxes: [yAx]),
),
);
This, however, crashes without any error messages.
Thanks for this great library. I've used it to good effect for a number of charts. However, I'm having a bit of difficulty with a "time"-based xAxis.
I can create a bar chart with a "time" x-axis, and it runs fine in Chromium and I see all the bars without issue. But when compiled and run in Chrome, the graph renders but the x axis is blank and no bars are shown.
Is this a known bug or could there be something I'm doing wrong?
//dateLabels is a List of DateTime objects
//dateCounts is a List of integers
List xAxes = [];
List yAxes = [];
ChartXAxe xAxe = new ChartXAxe();
TimeDisplayFormat tdf = new TimeDisplayFormat();
tdf.day = 'MMM DD';
TimeScale ts = new TimeScale();
ts.displayFormats = tdf;
ts.tooltipFormat = "MMM DD";
ts.unit = "day";
ts.round = "day";
xAxe.type = "time";
xAxe.display = true;
xAxe.time = ts;
xAxe.barPercentage= .2;
ChartYAxe yAxe = new ChartYAxe();
yAxe.display = true;
xAxes.add(xAxe);
yAxes.add(yAxe);
List <ChartDataSets> chartDatasets = [
new ChartDataSets(
label: "MRP tasks",
data: dateCounts,
backgroundColor: "rgba(220,20,20,0.5)"
)
];
var data = new LinearChartData(datasets: chartDatasets, labels: dateLabels);
ChartScales chartScales = new ChartScales(xAxes: xAxes, yAxes: yAxes);
ChartOptions chartOptions = new ChartOptions(responsive: true, scales: chartScales);
var config = new ChartConfiguration(
type: chartType,
data: data,
options: chartOptions,
);
Chart chart = new Chart(canvasEl, config);
When using chartjs with Dart 2.8.1, I get the an error requesting the use of the 'external' keyword for the fake constructors on lines 28 and 85 of chartjs.dart
Error compiling dartdevc module:chartjs|lib/chartjs.ddc.js
packages/chartjs/chartjs.dart:28:3: Error: JS interop classes do not support non-external constructors.
Try annotating with external.
Chart.fakeConstructor$();
Try annotating with external.
PluginServiceStatic.fakeConstructor$();
(line 85)
Unable to render chart in UI ,throwing the below error..
EXCEPTION: NullError: invalid member on null: 'length'
STACKTRACE:
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js 9853:20 acquireContext
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js 3795:27 construct
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js 6340:8 new Chart
package:chart/app_component.dart 27:3 showChart
please find the poject in attachment.
missing the layout field in the ChartOptions
class
is there any way to use this library in flutter?
thanks a lot
kind regards
Hi,
this package need to be updated in order to work with chart-js 3.6.2.
Now I use this package with chart-js 2.9.3
Lot of functions and features now aren't usable.
Let me know if you're going to invest some time updating this package or not.
Thank you very much
Is it possible to have the spanGaps option?
spanGaps: If true, lines will be drawn between points with no or null data. If false, points with NaN data will create a break in the line.
Hi,
Can we use this in a flutter-for-web app? If so an example would be greatly appreciated.
Thanks!
I'm trying to define a custom chart legend for a line chart. The chart itself works fine; when defining it without a custom legend it renders, no problem. However, I'd like the chart to have a legend to explain different line styles (i.e, a solid and a dashed line). However, when I try this using the code below, I get the error:
EXCEPTION: NoSuchMethodError: method not found: 'call' (labelOpts.generateLabels.call is not a function)
STACKTRACE:
TypeError: labelOpts.generateLabels.call is not a function
at ChartElement.buildLabels
[...]
Is this a bug or am I doing something wrong?
final config = ChartConfiguration(
type: 'line',
data: data,
options: ChartOptions(
responsive: true,
elements: ChartElementsOptions(point: ChartPointOptions(radius: 0)),
scales: ChartScales<LinearTickOptions>(
xAxes: [ChartXAxe(display: false)],
yAxes: [
ChartYAxe(
type: 'linear',
)
],
),
legend: ChartLegendOptions(
labels: ChartLegendLabelOptions(
generateLabels: (_) => '<div>Test</div>',
)),
),
);
final c = Chart(querySelector('.chart'), config);
final htmlValidator = NodeValidatorBuilder.common();
querySelector('.chart--legend')
.appendHtml(c.generateLegend(), validator: htmlValidator);
hi,
someone has an example to create a stacked bar chart?
I see some example:
http://www.chartjs.org/samples/latest/charts/bar/stacked.html
https://github.com/chartjs/Chart.js/blob/master/samples/charts/bar/stacked.html
and the option "stacked: true" in the axes but in dart doesn't work for me.
For the moment I'm using the version ^0.4.0+1
UPDATE:
Now works with stacked: true
// define X Axe
ChartXAxe chartScaleX = new ChartXAxe(stacked: true);
// define Y Axe
ChartYAxe chartScaleY = new ChartYAxe(stacked: true);
// set chart's data
LinearChartData data = new LinearChartData(
labels: labels,
datasets: <ChartDataSets>[
new ChartDataSets(
label: "min",
backgroundColor: barColors[0],
data: data1),
new ChartDataSets(
label: "avg",
backgroundColor: barColors[1],
data: data2),
new ChartDataSets(
label: "max",
backgroundColor: barColors[3],
data: data3)
]);
How to use Chartjs label plugin in dart
var config = ChartConfiguration(
options: ChartOptions(
responsive: true,
legend: ChartLegendOptions(position: 'left'),
title: ChartTitleOptions(display: true, position: 'left'),
),
type: 'pie',
data: LinearChartData(labels: [
'Anulado',
'Andamento',
'Rescindido',
'Concluido',
'Aberto',
'Paralizado'
], datasets: <ChartDataSets>[
ChartDataSets(data: [
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
randomScalingFactor(),
], backgroundColor: [
'rgb(255, 99, 132)',
'rgb(255, 159, 64)',
'rgb(255, 205, 86)',
'rgb(75, 192, 192)',
'rgb(54, 162, 235)',
'rgb(255, 99, 180)',
], label: 'Dataset 1')
]));
Chart(canvasElement, config);
Chart.pluginService.register(Pl());
class Pl implements PluginServiceRegistrationOptions{
@override
void afterDatasetsDraw(Chart chartInstance, String easing) {
// TODO: implement afterDatasetsDraw
}
@override
void afterDatasetsUpdate(Chart chartInstance) {
// TODO: implement afterDatasetsUpdate
}
@override
void afterDraw(Chart chartInstance, String easing) {
if(chartInstance.config.options.plugin_name) {
}
// TODO: implement afterDraw
}
@override
void afterEvent(Chart chartInstance, html.Event event) {
// TODO: implement afterEvent
}
@override
void afterInit(Chart chartInstance) {
// TODO: implement afterInit
}
@override
void afterScaleUpdate(Chart chartInstance) {
// TODO: implement afterScaleUpdate
}
@override
void afterUpdate(Chart chartInstance) {
// TODO: implement afterUpdate
}
@override
void beforeDatasetsDraw(Chart chartInstance, String easing) {
// TODO: implement beforeDatasetsDraw
}
@override
void beforeDatasetsUpdate(Chart chartInstance) {
// TODO: implement beforeDatasetsUpdate
}
@override
void beforeDraw(Chart chartInstance, String easing) {
// TODO: implement beforeDraw
}
@override
void beforeEvent(Chart chartInstance, html.Event event) {
// TODO: implement beforeEvent
}
@override
void beforeInit(Chart chartInstance) {
// TODO: implement beforeInit
}
@override
void beforeRender(Chart chartInstance) {
// TODO: implement beforeRender
}
@override
void beforeUpdate(Chart chartInstance) {
// TODO: implement beforeUpdate
}
@override
void destroy(Chart chartInstance) {
// TODO: implement destroy
}
@override
void resize(Chart chartInstance, Size newChartSize) {
// TODO: implement resize
}
}
in javascript
var chart = new Chart(ctx, {
plugins: [ChartDataLabels],
options: {
// ...
}
})
https://chartjs-plugin-datalabels.netlify.com/guide/getting-started.html#integration
Hi, great work and thanks for the example!
I have a few questions on this port I cannot figure out, and I was hoping I might be able to ask here, for learning purposes.
How did you include the dependencies Chart.js uses natively?
Which Chart.js file does this correspond to?
https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js
I cannot locate this on the Chart.js github page. Is this generated somehow?
LinearInstance needs the function getBarsAtEvent for working with Bar Charts.
Please, add to the example/example.dart
any example of passing a function to ChartJS.
Hiya,
Thanks for maintaining this. I was wondering if there are any plans to move to the ChartJS 2.0 now that it's released? It fixes a ton of bugs and adds some nice new features.
Kind regards,
Mo.
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.