Colossus-Services / chart_engine

Chart generator with interchangeable chart engines, like ChartJS and ApexCharts.
Apache License 2.0
22 stars 1 forks source link
apexcharts chartjs dart

chart_engine

pub package Null Safety Dart 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).

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