chart_engine 1.0.11

  • Readme
  • Changelog
  • Example
  • Installing
  • 81

chart_engine #

pub package CI GitHub Tag New Commits Last Commits Pull Requests Code size License Live Example

Chart generator with interchangeable chart engines, like ChartJS and ApexCharts.

Engines #

NOTE: You don't need to read any specific documentation of any engine to use chart_engine, since any Chart configuration needed to generate your Chart will be automatically handled by this package (see the example).

Install #

dependencies:
  chart_engine: ^1.0.10

Usage #

A simple example using ApexCharts (ChartsJS is commented):

import 'dart:html';

//import 'package:chart_engine/chart_engine_chartjs.dart';
import 'package:chart_engine/chart_engine_apexcharts.dart';

void main() async {

  var series = ChartSeries(
      ['Jan','Feb','Mar'],
      {
        'A': [10,20,5] ,
        'B': [15,25,55] ,
        'C': [100,130,140]
      }
  ) ;

  series.title = 'Chart Example' ;
  series.xTitle = 'Months' ;
  series.yTitle = 'Count' ;
  series.options.fillLines = true ;
  series.options.straightLines = true ;

  //var charEngine = ChartEngineChartJS() ;
  var charEngine = ChartEngineApexCharts() ;
  await charEngine.load() ;
  charEngine.renderLineChart( querySelector('#output') , series ) ;


}

Live Example #

You can see here a live example

If your prefer you can experiment with the example from the source code.

Example from Sources #

Get the source

  $> git clone https://github.com/Colossus-Services/chart_engine.git

...and see the Web Example (just follow the README file for instructions).

Loading Engines JavaScript Libraries #

This Dart package already bundles the JavaScript libraries of each supported engine. When an implementation of ChartEngine is instantiated, the corresponding JavaScript library is automatically loaded and no extra code is needed in your Dart files or HTML files.

The loading processes is made by the package amdjs.dart. It loads the JavaScript libraries using AMD framework when an AMD implementation is present and detected, or injecting a tag <script src='lib-x.js'></script> as fallback.

ChartJS and Moment #

You don't need to load Moment JS library to use Time Series Charts when using ChartJS engine. We implement a fallback Date adapter, using Dart code interoperability, based in Dart DateTime and DateFormat implementations. ;-P

Features and bugs #

Please file feature requests and bugs at the issue tracker.

Colossus.Services #

This is an open-source project from Colossus.Services: the gateway for smooth solutions.

Author #

Graciliano M. Passos: gmpassos@GitHub.

License #

Apache License - Version 2.0

1.0.11 #

  • ColorPalette.asHTML(...).
  • dartfmt.

1.0.10 #

  • Fix ChartEngine.VERSION
  • Fix unused import.
  • dartfmt

1.0.9 #

  • Added support to stepped lines.
  • Added central text into Gauge charts.
  • Added renderAsync methods (auto load and auto refresh chart onLoad event).
  • New color generator: ColorGeneratorFromBasicPalette.
  • Optimize ChartData handling of time values.
  • Added tests.
  • Added badges to README.md
  • swiss_knife: ^2.5.2

1.0.8 #

  • Added support to Scatter Timed Charts.
  • Fix Timed series values sent to JS: convert DateTime to millisecondsSinceEpoch.
  • ChartsJS: better Tooltip for Scatter Charts.
  • ApexCharts: Fix X axis title position issue, for timed series.

1.0.7 #

  • Added support to Scatter Charts.
  • ChartData: xAxisScale and yAxisScale
  • ChartSeriesPair for Scatter charts.
  • swiss_knife: ^2.5.0

1.0.6 #

  • Fix version reference.

1.0.5 #

  • Fix Dart JS interoperability issues in build release (Dart2JS).

1.0.4 #

  • Added support for Time Series Charts (Line charts with DateTime X axis).
  • ChartTimeSeries to declare Time Series data.
  • Added ChartJS date adapter fallback, in case of moment not present.

1.0.3 #

  • Added support to Gauge Charts.
  • Added support to disabled colors at ColorGenerator.
  • Fix ChartJS build in release mode, since AMDJS is in mimic mode.
  • Change SDK requirement from 2.8+ to 2.7+.
  • amdjs: ^1.0.3

1.0.2 #

  • Add support to Bar Charts and Horizontal Bar Charts.
  • Add examples with Bar Charts.

1.0.1 #

  • Fix library name and exports.
  • Fix typos.
  • dartfmt

1.0.0 #

  • Only supporting Line Charts for now.
  • Initial version, created by Stagehand

example/main.dart

import 'dart:html';

import 'package:chart_engine/chart_engine_all.dart';

void main() async {
  await createLineChart();
  await createTimeSeriesChart();

  await createBarChart();

  await createScatterChart();
  await createScatterTimedChart();

  await createGaugeChart();

  querySelector('#chart-version').text = '${ChartEngine.VERSION}';
}

Future createLineChart() async {
  var series = ChartSeries([
    'Jan',
    'Feb',
    'Mar'
  ], {
    'A': [10, 20, 5],
    'B': [15, 25, 55],
    'C': [100, 130, 140]
  });

  series.title = 'Line Chart Example';
  series.xTitle = 'Months';
  series.yTitle = 'Count';
  series.options.straightLines = true;

  // Render the same ChartSeries using 2 engines:

  var charEngine1 = ChartEngineApexCharts();
  var charEngine2 = ChartEngineChartJS();

  await charEngine1.load();
  await charEngine2.load();

  charEngine1.renderLineChart(
      querySelector('#apexcharts-line1-output'), series);
  charEngine2.renderLineChart(querySelector('#chartjs-line1-output'), series);

  series.options.fillLines = true;

  charEngine1.renderLineChart(
      querySelector('#apexcharts-line2-output'), series);
  charEngine2.renderLineChart(querySelector('#chartjs-line2-output'), series);
}

Future createTimeSeriesChart() async {
  // Declare using pair of x(DateTime) and y(value) entries.
  var series = ChartTimeSeries({
    'A': [
      [DateTime(2020, 03, 30), 10],
      [DateTime(2020, 03, 31), 20],
      [DateTime(2020, 04, 01), 5],
      [DateTime(2020, 04, 02), -10],
      [DateTime(2020, 04, 03), 1]
    ],
    'B': [
      [DateTime(2020, 03, 30), 15],
      [DateTime(2020, 03, 31), 25],
      [DateTime(2020, 04, 01), 55],
      [DateTime(2020, 04, 02), 30],
      [DateTime(2020, 04, 03), -10]
    ],
    'C': [
      [100, DateTime(2020, 03, 30)],
      [DateTime(2020, 03, 31), 130],
      [DateTime(2020, 04, 01), 140],
      [DateTime(2020, 04, 02), -20],
      [DateTime(2020, 04, 03), -55]
    ],
  });

  series.title = 'Time Series Chart Example';
  series.xTitle = 'Months';
  series.yTitle = 'Count';

  // Render the same ChartSeries using 2 engines:

  var charEngine1 = ChartEngineApexCharts();
  var charEngine2 = ChartEngineChartJS();

  // Simultaneous load engines:
  await Future.wait([charEngine1.load(), charEngine2.load()]);

  charEngine1.renderTimeSeriesChart(
      querySelector('#apexcharts-time_series-output'), series);
  charEngine2.renderTimeSeriesChart(
      querySelector('#chartjs-time_series-output'), series);
}

Future createBarChart() async {
  var series = ChartSeries([
    'Jan',
    'Feb',
    'Mar'
  ], {
    'A': [10, 20, 5],
    'B': [15, 25, 55],
    'C': [100, 130, 140],
  });

  series.xTitle = 'Months';
  series.yTitle = 'Count';

  // Render the same ChartSeries using 2 engines:

  var charEngine1 = ChartEngineApexCharts();
  var charEngine2 = ChartEngineChartJS();

  // Simultaneous load engines:
  await Future.wait([charEngine1.load(), charEngine2.load()]);

  series.title = 'Bar Chart Example';
  charEngine1.renderBarChart(querySelector('#apexcharts-bar-output'), series);
  charEngine2.renderBarChart(querySelector('#chartjs-bar-output'), series);

  series.title = 'Horizontal Bar Chart Example';
  charEngine1.renderHorizontalBarChart(
      querySelector('#apexcharts-horizontal-bar-output'), series);
  charEngine2.renderHorizontalBarChart(
      querySelector('#chartjs-horizontal-bar-output'), series);
}

Future createScatterChart() async {
  // Declare using pair of x(height:cm) and y(weight: kg) entries.
  var series = ChartSeriesPair({
    'A': [
      [167.08, 61.25],
      [171.75, 66.77],
      [174.96, 75.11],
      [175.79, 88.40],
      [173.48, 78.86]
    ],
    'B': [
      [175.77, 50.87],
      [174.98, 72.38],
      [166.27, 52.59],
      [172.75, 66.85],
      [184.17, 90.71]
    ],
    'C': [
      [180.59, 98.12],
      [165.89, 58.20],
      [166.42, 50.33],
      [181.33, 78.01],
      [181.66, 101.91]
    ],
  });

  series.title = 'Scatter Chart Example';
  series.xTitle = 'Height';
  series.yTitle = 'Weight';

  // Swap X and Y values, including xTitle and yTitle.
  var series2 = series.swapXY();

  // Render the same ChartSeries using 2 engines:

  var charEngine1 = ChartEngineApexCharts();
  var charEngine2 = ChartEngineChartJS();

  // Simultaneous load engines:
  await Future.wait([charEngine1.load(), charEngine2.load()]);

  charEngine1.renderScatterChart(
      querySelector('#apexcharts-scatter-output'), series2);
  charEngine2.renderScatterChart(
      querySelector('#chartjs-scatter-output'), series2);
}

Future createScatterTimedChart() async {
  // Declare using pair of x(DateTime) and y(value) entries.
  var series = ChartTimeSeries({
    'A': [
      [DateTime(2020, 03, 30), 10],
      [DateTime(2020, 03, 31), 20],
      [DateTime(2020, 04, 01, 10), 5],
      [DateTime(2020, 04, 02, 3), -10],
      [DateTime(2020, 04, 03, 11), 1]
    ],
    'B': [
      [DateTime(2020, 03, 30, 2), 15],
      [DateTime(2020, 03, 31, 3), 25],
      [DateTime(2020, 04, 01, 12), 55],
      [DateTime(2020, 04, 02, 14), 30],
      [DateTime(2020, 04, 03, 2), -10]
    ],
    'C': [
      [100, DateTime(2020, 03, 30, 5)],
      [DateTime(2020, 03, 31, 4), 130],
      [DateTime(2020, 04, 01, 20), 140],
      [DateTime(2020, 04, 02, 23), -20],
      [DateTime(2020, 04, 03, 18), -55]
    ],
  });

  series.title = 'Scatter Timed Chart Example';
  series.xTitle = 'Months';
  series.yTitle = 'Count';

  // Render the same ChartSeries using 2 engines:

  var charEngine1 = ChartEngineApexCharts();
  var charEngine2 = ChartEngineChartJS();

  // Simultaneous load engines:
  await Future.wait([charEngine1.load(), charEngine2.load()]);

  charEngine1.renderScatterTimedChart(
      querySelector('#apexcharts-scatter_timed-output'), series);
  charEngine2.renderScatterTimedChart(
      querySelector('#chartjs-scatter_timed-output'), series);
}

Future createGaugeChart() async {
  // Using Set: 1 value per category.
  // For Gauge needs to be in range of 0% to 100%.
  var set = ChartSet({
    'A': 60,
    'B': 75,
    'C': 50,
  });

  set.title = 'Gauge Chart Example';

  var charEngine1 = ChartEngineApexCharts();
  var charEngine2 = ChartEngineChartJS();

  // Simultaneous load engines:
  await Future.wait([charEngine1.load(), charEngine2.load()]);

  charEngine1.renderGaugeChart(querySelector('#apexcharts-gauge-output'), set);
  charEngine2.renderGaugeChart(querySelector('#chartjs-gauge-output'), set);
}

Use this package as a library

1. Depend on it

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


dependencies:
  chart_engine: ^1.0.11

2. Install it

You can install packages from the command line:

with pub:


$ pub get

with Flutter:


$ flutter pub get

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

3. Import it

Now in your Dart code, you can use:


import 'package:chart_engine/chart_engine.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
61
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
81
Learn more about scoring.

We analyzed this package on Jul 9, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.4
  • pana: 0.13.14

Analysis suggestions

Package not compatible with runtime flutter-native on android

Because:

  • package:chart_engine/chart_engine.dart that imports:
  • package:chart_engine/src/chart_engine_base.dart that imports:
  • dart:html

Package not compatible with runtime flutter-native on ios

Because:

  • package:chart_engine/chart_engine.dart that imports:
  • package:chart_engine/src/chart_engine_base.dart that imports:
  • dart:html

Package not compatible with runtime flutter-native on linux

Because:

  • package:chart_engine/chart_engine.dart that imports:
  • package:chart_engine/src/chart_engine_base.dart that imports:
  • dart:html

Package not compatible with runtime flutter-native on macos

Because:

  • package:chart_engine/chart_engine.dart that imports:
  • package:chart_engine/src/chart_engine_base.dart that imports:
  • dart:html

Package not compatible with runtime flutter-native on windows

Because:

  • package:chart_engine/chart_engine.dart that imports:
  • package:chart_engine/src/chart_engine_base.dart that imports:
  • dart:html

Package not compatible with runtime native

Because:

  • package:chart_engine/chart_engine.dart that imports:
  • package:chart_engine/src/chart_engine_base.dart that imports:
  • dart:html

Package not compatible with runtime native-aot

Because:

  • package:chart_engine/chart_engine.dart that imports:
  • package:chart_engine/src/chart_engine_base.dart that imports:
  • dart:html

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.7.0 <3.0.0
amdjs ^1.0.3 1.0.3
dom_tools ^1.3.1 1.3.2
intl ^0.16.1 0.16.1
swiss_knife ^2.5.2 2.5.3
Transitive dependencies
args 1.6.0
charcode 1.1.3
collection 1.14.13 1.15.0-nnbd
enum_to_string 1.0.9
html_unescape 1.0.1+3
json_object_mapper 1.0.0
markdown 2.1.5
path 1.7.0
resource_portable 2.1.7
typed_data 1.2.0 1.3.0-nnbd
Dev dependencies
build_runner ^1.10.0
build_web_compilers ^2.11.0
pedantic ^1.9.0
test ^1.14.6