Git Product home page Git Product logo

charted's Introduction

Visualization toolkit for Dart

Charted provides

  • A selection API similar to D3.js
  • Visualization utilities ported from D3.js
  • An easy-to-use API to create charts including an SVG implementation based on the Selection API.
  • An interactive demo

Screenshot of Charted interactive demo

Screenshot of Charted interactive demo

Get started with the interactive demo

Get started with Charted by trying out the interactive demo provided with the package. Follow these instructions and get it running locally on your machine (Git and the Dart SDK has to be installed first):

git clone [email protected]:google/charted.git
cd charted
pub get
pub serve examples

charted's People

Contributors

alan-knight avatar alexeieleusis avatar azenla avatar b3rn475 avatar bkonyi avatar borisnaguet avatar bridgerock avatar goderbauer avatar harryterkelsen avatar jacob314 avatar kelegorm avatar kevmoo avatar lrhn avatar mbullington avatar michaelrfairhurst avatar midoringo8823 avatar psunkari avatar rmacnak-google avatar scorpiion avatar sigmundch avatar sksizer avatar srawlins avatar tvolkert avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

charted's Issues

Flag to disable logging

I don't want to pay the price for the libraries logging in my application but I sometimes want to see it to help debug.

Hovercard has wrong label with pie chart

Hovercard has wrong label with pie chart

Pie slice: Dart - 43.53%
Hovercard shows: Idle 0.0

Pie slice: GCNewSpace 38.57%
Hovercard shows: LoadWait 7.88%

Both Idle and LoadWait are part of the pie chart but the hovercard mouse over seems confused.

Several language violations from dartanalyzer

$ dartanalyzer --version
dartanalyzer version 1.20.1$ dartanalyzer lib/charts/charts.dart
Analyzing [lib/charts/charts.dart]...
[error] Could not infer type parameter E, dynamic must be of type String. (/Users/srawlins/code/dart-charted/lib/charts/data_transformers/aggregation_transformer.dart, line 96, col 47)
[error] Could not infer type parameter E, dynamic must be of type String. (/Users/srawlins/code/dart-charted/lib/charts/data_transformers/aggregation_transformer.dart, line 183, col 20)
[error] Could not infer type parameter E, num must be of type int. (/Users/srawlins/code/dart-charted/lib/locale/format/number_format.dart, line 229, col 65)
[hint] 'dart.pkg.collection.equality' is deprecated (/Users/srawlins/code/dart-charted/lib/charts/charts.dart, line 28, col 1)
[hint] Field does not override an inherited getter or setter (/Users/srawlins/code/dart-charted/lib/charts/src/chart_config_impl.dart, line 28, col 8)
[hint] Field does not override an inherited getter or setter (/Users/srawlins/code/dart-charted/lib/charts/src/chart_events_impl.dart, line 13, col 19)
[hint] Field does not override an inherited getter or setter (/Users/srawlins/code/dart-charted/lib/charts/themes/quantum_theme.dart, line 140, col 14)
3 errors and 4 hints found.

More compact legend

In Google Chart's the legend can quite small with arrows that page to between items if they can't fit in the designated area.

rendering performance for 30,000+ points

One year of hourly data for 4 variables is about 35,000 data points. When I try to render this amount of data with a LineChartRenderer, it takes 2 minutes for the data to show up. It's definitely not fast enough. I was hoping to display an order of magnitude more data. Is there anything that can be improved on "charted" side or is it the browser rendering that is slow? For example I noticed no rendering difference if I remove the elements from the (which seemed surprising). Any thoughts?

Thanks

Pub version is bugged

The pub version is not working the following error is throw :
Exception: Uncaught Error: Invalid argument (value): Not a valid class token: "bar-rdr-bar "ο»Ώ

The version on github work great !
Please update the version on pub :)
Thanks

`ChartData` creates its own `rows` object

8eecd1a has broken the examples/charts/demo_interactive.dart example. Clicking the "Add row" or "Remove last row" buttons no longer shows any action. This is because of this patch in the commit mentioned above:

diff --git a/lib/charts/src/chart_data_impl.dart b/lib/charts/src/chart_data_impl.dart
index dff6f5c..2dc6ed0 100644
--- a/lib/charts/src/chart_data_impl.dart
+++ b/lib/charts/src/chart_data_impl.dart
@@ -9,16 +9,18 @@
 part of charted.charts;

 class DefaultChartDataImpl extends ChangeNotifier implements ChartData {
-  Iterable<ChartColumnSpec> _columns;
-  Iterable<Iterable> _rows;
+  List<ChartColumnSpec> _columns;
+  List<List> _rows;

   bool _hasObservableRows = false;
   SubscriptionsDisposer _disposer = new SubscriptionsDisposer();

   DefaultChartDataImpl(
       Iterable<ChartColumnSpec> columns, Iterable<Iterable> rows) {
-    this.columns = columns;
-    this.rows = rows;
+    this.columns = new List<ChartColumnSpec>.from(columns);
+    var rowsList = new List.from(rows);
+    this.rows = new List<List>.generate(
+        rowsList.length, (i) => new List.from(rowsList[i]));
   }

   set columns(Iterable<ChartColumnSpec> value) {

The problem is that the rows object which is passed to the DefaultChartDataImpl constructor is no longer stored in this.rows. Instead, a new List object is generated which is then stored in this.rows.

In my opinion it would be great if the original behaviour could be restored as with the current state we can no longer do this:

ChartData data = new ChartData(columns, rows);

// Do other stuff

// New rows have been received. Let's add them.
rows.add(...);
// Doesn't work since `ChartData` has created its own `rows` object internally :(.

// We can use this workaround but is not that elegant.
data.rows.add(...);

Also, this doesn't work anymore and always returns false now since the new rows object is created without any regard whether the original rows object was an instance of ObservableList or not.

@MirrorsUsed?

The library is currently very heavy to use for dart2js projects because of missing mirror annotations here and in the smoke dependency. For a simple prototype I got ~3MiB minified JS with over 60MiB memory consumption on page load.

Pie chart colors are unstable

The pie chart colors change based on which column has the highest value. This makes the pie chart unstable and unreadable when the values are changing.

Chart extend beyond the edge

If the data in a CartesianArea as a domain that is bigger w.r.t. the domain specified in the Dimension Axis Scale domain the SVG elements extend beyond the graph area.

image

Display of line chart with stable y-axis value looks weird

I have a line chart that has the data being updated regularly. Each time the data is replaced, it has a new row.

Each row looks like:

[timestamp, value]

In this case, each value is the same: 1474832

The attached image shows that:

  1. The y-axis is clipped (see #142)
  2. The line isn't shown at all. I'm guessing this is because the top of the graph is 1474832 and the dots are being clipped?
  3. There is lots of empty space above it, breaking the appearance of the page.

line-graph-y-axis

In comparison, I've attached an image from the same program where the y-axis value does change. The only issue I have with it is #142.

line-graph-y-axis-working

Stacked bar chart throws exception when drawing

Let me know if you need a reproducible.

NoSuchMethodError: method not found: '[]'
Receiver: null
Arguments: [0]
Stack Trace:
#0 Object.noSuchMethod (dart:core-patch/object_patch.dart:45)
#1 Scale.scaleExtent (package:charted/scale/scale.dart:37:23)
#2 LinearScale._linearTickRange (package:charted/scale/linear_scale.dart:158:29)
#3 LinearScale._linearNice (package:charted/scale/linear_scale.dart:149:44)
#4 LinearScale.nice (package:charted/scale/linear_scale.dart:138:26)
#5 _ChartAxis.draw (package:charted/charts/src/chart_axis_impl.dart:82:16)
#6 _ChartArea.draw. (package:charted/charts/src/chart_area_impl.dart:347:25)
#7 _SelectionImpl.each.. (package:charted/selection/selection_impl.dart:136:26)
#8 IterableMixinWorkaround.forEach (dart:_internal/iterable.dart:757)
#9 List.forEach (dart:core-patch/array.dart:119)
#10 _SelectionImpl.each. (package:charted/selection/selection_impl.dart:135:25)
#11 List.forEach (dart:core-patch/growable_array.dart:228)
#12 _SelectionImpl.each (package:charted/selection/selection_impl.dart:133:19)
#13 _ChartArea.draw (package:charted/charts/src/chart_area_impl.dart:342:17)
#14 TagProfileChart.draw (package:observatory/src/elements/isolate_view.dart:91:20)
#15 IsolateViewElement._drawTagProfileChart (package:observatory/src/elements/isolate_view.dart:128:27)
#16 IsolateViewElement.onPoll. (package:observatory/src/elements/isolate_view.dart:111:27)
#17 _RootZone.runUnary (dart:async/zone.dart:1088)
#18 _Future._propagateToListeners.handleValueCallback (dart:async/future_impl.dart:488)
#19 _Future._propagateToListeners (dart:async/future_impl.dart:571)
#20 _Future._completeWithValue (dart:async/future_impl.dart:331)
#21 _Future._asyncComplete. (dart:async/future_impl.dart:393)
#22 _asyncRunCallbackLoop (dart:async/schedule_microtask.dart:23)
#23 _asyncRunCallback (dart:async/schedule_microtask.dart:32)
#24 _handleMutation (dart:html:38342)

Chart host DOM size ignored

Using the following host:

  <div id="counterPieChart" style="height: 100px"></div>

The chart is rendered as 400x300.

Overriding minimumSize works but I would prefer the charts filled the host element's size.

I can't show more than 6 lines in one chart

I want to show in one chart more than 6 lines. How I can to do it? I have tried this:

var measures = [];
for (int i = 1; i < data.columns.length && i < 7; i++) {
  measures.add(i);
}

var series = new ChartSeries("one", measures, new LineChartRenderer()),

then config, area, draw...

As you can see I have destriction to 6 measure numbers in measures list. But when I try to add one more I get some error:

Exception: Uncaught Error: RangeError: index (7) must be in the range [0..7)
Stack Trace: 
#0      List.[] (dart:core-patch/growable_array.dart:136)
#1      List.elementAt (dart:core-patch/growable_array.dart:308)
#2      CartesianRendererBase.extent (package:charted/charts/cartesian_renderers/cartesian_base_renderer.dart:91:25)
#3      _CartesianArea._initAxes.<anonymous closure>.<anonymous closure> (package:charted/charts/src/cartesian_area_impl.dart:385:63)
#4      MappedListIterable.elementAt (dart:_internal/iterable.dart:413)
#5      ListIterable.toList (dart:_internal/iterable.dart:219)
#6      _CartesianArea._initAxes.<anonymous closure> (package:charted/charts/src/cartesian_area_impl.dart:385:71)

I have tried to create 7 different Line Chart Renderers but it cause same error. I have delving in sourses but can't find restrictions for line count.

Is it possible to show more than 6 lines and how to get it? Thanks.

Provide null as valid value

If on a row there are null value it causes exception with attribute ('MMMMM' on string end).

But it's really common practice to have some lines of data not in full range.

Publish w/ peanut

pub global activate peanut
Rename examples -> example, follow convention
peanut -d example
Now you have a gh-pages branch w/ the built output – ready to push to github.

Windows Install - Hop exception on "pub get" command

Hello,

I tried to install and run your project on my 64-bit Windows OS so I did the following things :

On "pub get" command, I got the response :
"Because charted depends on hop >=0.20.0 which requires SDK version >=0.4.5+1.r21094 <2.0.0, version solving failed."

I did not find how to solve the issue and anything mentioning this error in your doc.

Thanks for your help !

Domain is null when the input data represents a horizontal line

In chart_area_impl: when the "highest" value is zero, domain is null and an exception is thrown in renderers.

Proposal: set domain to something like [highest - 0.5, highest + 0.5] if highest == 0 (or if highest == lowest in the future when lowest is also taken into account).

Improve README to make it easier for new users

Hi,

I had a nice talk with Ferhat Buyukkokten after the "Ads and Dart" talk at the Dart Summit the other day. Before this conversation I must admit that I had missed this great package, and I think many others have as well. I think improving the README with a small "Getting started" guide and a screenshot would go a long way.

I'll submit a pull request soon for a first version.

Not compatible with dart version 2.4.0

The current Dart SDK version is 2.4.0.

Because charted depends on hop >=0.20.0 which requires SDK version

=0.4.5+1.r21094 <2.0.0, version solving failed.

Runtime type errors from Range.integers in pie_layout.dart

Hi there,

I've hit a type error when running the examples (and my own code...):

Exception: type 'List<num>' is not a subtype of type 'List<int>' of 'index' where
  List is from dart:core
  num is from dart:core
  List is from dart:core
  int is from dart:core
PieLayout.layout | @ | package:charted/layout/src/pie_layout.dart:53
-- | -- | --
PieChartRenderer.layout | @ | package:charted/charts/layout_renderers/pie_chart_renderer.dart:108
DefaultLayoutAreaImpl.draw | @ | package:charted/charts/src/layout_area_impl.dart:250
drawSimplePieChart | @ | demo_pie_charts.dart:25
main | @ | demo_pie_charts.dart:50

The offending line is:

List<int> index = new Range.integers(values.length).toList();

Which appears to relate to the inferred bound on Range.integers being List<num>.

This isn't insurmountable because it only occurs in Dartium, and this works as expected when using dartdevc in regular ol' Chrome instead --- it's just slightly frustrating given my workflow.

I encountered this issue using charted 0.5.0 and dart 1.24.3.

Thanks for the release of charted!

build on drone is failing

I see the build on drone is failing. You may want to switch over to travis - it's pretty heavily used by dart projects.

Example crashes Chrome and Safari with Dart 1.17.1

$ pub --version
Pub 1.17.1

$ pub serve --trace --verbosity=all examples
FINE: Pub 1.17.1
FINE: Loading asset environment...
FINE: Initializing barback...
FINE: Serving packages on localhost:0.
MSG : Loading source assets...
FINE: Providing sources for charted|lib.
FINE: Loading source assets finished (0.279s).
FINE: Provided sources.
FINE: Loading transformers...
FINE: Transformer dependencies:
FINE: Loading transformers finished (0.043s).
FINE: Initializing barback finished (0.356s).
FINE: Loading asset environment finished (0.544s).
FINE: Providing sources for charted|examples.
FINE: Bound "examples" to localhost:8080.
MSG : Serving charted examples on http://localhost:8080
MSG : Build completed successfully
MSG : [examples] GET β†’ (cached) charted|examples/index.html
MSG : [examples] GET charts/demo_charts.css β†’ (cached) charted|examples/charts/demo_charts.css
MSG : [examples] GET packages/charted/charts/themes/quantum_theme.css β†’ (cached) charted|lib/charts/themes/quantum_theme.css
FINE: Instance of 'BarbackServer' GET favicon.ico
| Not Found
ERR : [examples] GET favicon.ico β†’ Could not find asset charted|examples/favicon.ico.

--- click on Interactive Demo

MSG : [examples] GET charts/demo_interactive.html β†’ (cached) charted|examples/charts/demo_interactive.html
MSG : [examples] GET charts/demo_charts.css β†’ (cached) charted|examples/charts/demo_charts.css
MSG : [examples] GET charts/packages/charted/charts/themes/quantum_theme.css β†’ (cached) charted|lib/charts/themes/quantum_theme.css
MSG : [examples] GET charts/demo_interactive.dart β†’ (cached) charted|examples/charts/demo_interactive.dart
MSG : [examples] GET charts/packages/browser/dart.js β†’ (cached) browser|lib/dart.js
MSG : [examples] GET packages/charted/charts/themes/quantum_theme.css β†’ (cached) charted|lib/charts/themes/quantum_theme.css
MSG : [Info from Dart2JS]:
| Compiling charted|examples/charts/demo_interactive.dart...
MSG : [Info from Dart2JS]:
| Took 0:00:11.955602 to compile charted|examples/charts/demo_interactive.dart.
FINE: [Fine from Dart2JS on charted|examples/charts/demo_interactive.dart]:
| Took 12.0s (0.1s awaiting secondary inputs).
MSG : Build completed successfully
MSG : [examples] GET charts/demo_interactive.dart.js β†’ (cached) charted|examples/charts/demo_interactive.dart.js

-- rendered correctly - switch to "line chart"

  • no reaction - browser needs to be killed
  • Google Chrome Helper at 100% cpu

With Safari same output - but renders "Line chart" and then dies.

  • Safari Web Content (Not Responding) - 100% CPU

Tried to analyze, but did not manage to find any issue.
Same reaction when debugging - the issue is somewhere in the async part.

As it worked in Dart 1.16, looked into changes, but did not see any potential causes.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.