polymer_highcharts 0.2.1+10

  • Readme
  • Changelog
  • Installing
  • 0

Polymer Highcharts #

Use Highcharts in your polymer projects. With polymer components you can add charts to your projects easier than ever.

How does it work? #

First of all, add the dependency to your pubspec.yaml:

dependencies: 
  polymer_highcharts: any

Add this lines to the main html of your application (index.html) in the head section.

<script src="../../packages/polymer_highcharts/js/standalone-framework.js"></script>
<script src="../../packages/polymer_highcharts/js/highcharts.js"></script>
<script src="../../packages/polymer_highcharts/js/highcharts-more.js"></script>
<script src="../../packages/polymer_highcharts/js/highcharts.src.SHADOWDOMFIX.js"></script>

Then, add the imports to your html file

<link rel="import" href="../../packages/polymer/polymer.html">
<link rel="import" href="../../packages/polymer_highcharts/highcharts_polymer_component.html">
<link rel="import" href="../../packages/polymer_highcharts/highcharts_series.html">
<link rel="import" href="../../packages/polymer_highcharts/highcharts_x_axis.html">
<link rel="import" href="../../packages/polymer_highcharts/highcharts_y_axis.html">

And just use the components:

<highcharts-polymer 
      title="Title" subtitle="Monthly Average Temperature" 
      type="line" borderColor="#CCC" creditsEnabled="false"
      borderWidth="1" borderRadius="8" backgroundColor="rgba(0,0,0,0)">
  <highcharts-x-axis categories="['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic']"></highcharts-x-axis>
  <highcharts-y-axis title="Temperatura (ÂșC)"></highcharts-y-axis>
  <highcharts-series name="Ponferrada"
      type="column"
      numData="[17.0, 16.9, 19.5, 24.5, 28.2, 31.5, 35.2, 36.5, 33.3, 28.3, 23.9, 19.6]"></highcharts-series>
  <highcharts-series name="Tokyo"
      type="line"
      numData="[7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]"></highcharts-series>
  <highcharts-series name="New York"
      type="line"
      numData="[-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]"></highcharts-series>
</highcharts-polymer>

Samples #

You can find full code samples in the Polymer Highcharts Samples Site Or you can also take a look at the github site of the samples, just in case you want to clone it and see it running live.

Disclaimer #

*This is just a work in progress. This is just a piece of software to help people use Highcharts in their Dart projects, but the author is not part of the Highcharts team. * Keep in mind that if you want to use Highcharts in commercial applications, you will have to acquire a developer licence

Changelog #

0.0.1 #

  • Initial version, created by Stagehand.

0.2.1 #

  • Bugfix setting chartOptions and chartTitle
  • Added legendEnabled property
  • Configurable colors in highcharts-series
  • Require 0.2.1 version of highcharts_options
  • Multiple axis optimizations
  • Some optimizations in multiple axes and avoiding chart creation when not necessary. If the data has the same number of series and X axes, the data is updated instead of recreating again the whole chart
  • Support for Internet Explorer 10 has been improved
  • Allow dynamic series to have no series at all using highcharts-no-series element
  • Fix axesDirty returning false when we had different number of axes

0.2.1+8 #

  • Added DEBUG mode, it logs the highcharts configuration object to console, when the static variable DEBUG is set to true

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  polymer_highcharts: ^0.2.1+10

2. Install it

You can install packages from the command line:

with pub:


$ pub get

Alternatively, your editor might support pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:polymer_highcharts/highcharts_axes.dart';
import 'package:polymer_highcharts/highcharts_axis.dart';
import 'package:polymer_highcharts/highcharts_no_series.dart';
import 'package:polymer_highcharts/highcharts_polymer_component.dart';
import 'package:polymer_highcharts/highcharts_series.dart';
import 'package:polymer_highcharts/highcharts_x_axis.dart';
import 'package:polymer_highcharts/highcharts_y_axis.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
0
Health:
Code health derived from static analysis. [more]
--
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
--
Overall:
Weighted score of the above. [more]
0
Learn more about scoring.

The package version is not analyzed, because it does not support Dart 2. Until this is resolved, the package will receive a health and maintenance score of 0.

Analysis issues and suggestions

Support Dart 2 in pubspec.yaml.

The SDK constraint in pubspec.yaml doesn't allow the Dart 2.0.0 release. For information about upgrading it to be Dart 2 compatible, please see https://dart.dev/dart-2#migration.

Maintenance issues and suggestions

Make sure dartdoc successfully runs on your package's source files. (-10 points)

Dependencies were not resolved.