c3,lejard-h

c3's Introduction

A generated Dart API for C3.js using pkg/js and dart_js_facade_gen.

Example

import "dart:html";
import "package:c3/c3.dart" as c3;

main() async {
  await c3.load();

  final container = document.querySelector("#chart");

  final data = new c3.Data()
    ..columns = [
      ['data1', 30, 200, 100, 400, 150, 250],
      ['data2', 50, 20, 10, 40, 15, 25]
    ];

  final configuration = new c3.ChartConfiguration()
    ..bindto = container
    ..data = data;

  final chart = c3.generate(configuration);
}

c3's People

Contributors

Stargazers

Watchers

c3's Issues

Uncaught TypeError: o.tooltip_contents.call is not a function

I can't format or modify Tooltipe HTML because of this issue.

I am having this problem, I am using the c3js library to draw charts, when I am developing my AngularDart app with "webdev serve" (DDC) everything is ok, but when I compile for production with webdev build (dart2js) the application crashes with excepprion " Uncaught TypeError: o.tooltip_contents.call is not a function "

    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js" charset="utf-8"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.6.12/c3.min.js"></script>

c3.Data initChart() {
    var data = c3.Data();
    data.columns = [
      ['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-06'], //datas
      ['Valor', 30, 200, 100, 400, 150, 250], //valor
      ['Custo Previsto', 130, 340, 200, 500, 250, 350], //custoPrevisto
    ];
    data.x = 'x';    
    data.xFormat = '%Y-%m-%d'; // 'xFormat' can be used as custom format of 'x'
    var config = c3.ChartConfiguration();
    config.data = data;
    config.bindto = containerChartEconomicidade;
    config.axis = c3.Axis(
        x: c3.XAxisConfiguration(show: true, type: 'timeseries', tick: c3.XTickConfiguration(format: '%Y-%m-%d')));
    config.legend = c3.LegendOptions(
        show: true, position: "right", inset: {"anchor": 'bottom-right', "x": "5", "y": "5", "step": "5"});
    var tooltipOptions = c3.TooltipOptions();


    ///***************** Where does the problem possibly occur? ************************/

    tooltipOptions.contents = (dynamic d, String defaultTitleFormat,
      String defaultValueFormat, dynamic color) {
      String text;    
      var bgcolor = '#eee';

      for (var i = 0; i < d.length; i++) {
        var name = d[i]?.name; 
        var value = d[i]?.value;
        var titleIn = d[i]?.x;
        var title = "";

        if (titleIn != null) {
          //"EEE MMM dd yyyy HH:mm:ss 'GMT-0300' '(Horário Padrão de Brasília)'"
          var format = DateFormat("EEE MMM dd yyyy HH:mm:ss");
          var parsedDate = format.parse(titleIn.toString().substring(0,24));
          var format2 = DateFormat("dd/MM/yyyy");
          title = format2.format(parsedDate);
        }
        bgcolor = color(d[i]?.id);
        value = formatCurrency.format(value);

        if (text == null) {
          text = "<table class='c3-tooltip'><tr><th colspan='2'>$title</th></tr>";
        }
        text += "<tr class='c3-tooltip-name'>";
        text += "<td class='name'><span style='background-color:$bgcolor;'></span>$name</td>";
        text += "<td class='value'>$value</td>";
        text += "</tr>";
      }
      return text + "</table>";
    };
    config.tooltip = tooltipOptions;
    chartEconomicidade = c3.generate(config);
    return data;
  }

https://pub.dev/packages/c3

name: siscec2browser
description: A web app that uses AngularDart Components

environment:
  sdk: '>=2.4.0 <3.0.0'

dependencies:
  angular: ^5.3.0
  angular_components: ^0.13.0
  angular_router: ^2.0.0-alpha+19
  http: ^0.12.0
  stream_transform: ^0.0.19
  sass_builder: ^2.1.3
  firebase: ^5.0.4
  firebase_dart_ui: ^0.1.1
  js: ^0.6.1+1
  money: ^0.2.1
  decimal: ^0.3.4
  ng_bootstrap: any
  ng_fontawesome: ^5.7.2+2
  #modern_charts: ^0.1.17
  chartjs: ^0.5.1
  c3: ^0.1.0
  essential_components: 0.1.19