henrygaogh/d_chart

d_chart

D'Chart is the development of an existing package chart, namely community_charts_flutter.
The purpose of this pakage is simple way to use chart from community_charts_flutter.

Usage

• Wrap Chart with Widget Size like SizedBox, Container, Aspecration etc to set root size for chart
• Example

AspectRation(
    aspectRatio: 16/9,
    child: DChartTime(),
),

SizedBox(
    width: 240,
    height: 200,
    child: DChartTime(),
),

Table of Content

1. Bar
   • Image
   • Example
2. Line
   • Image
   • Example
   • Tutorial
     • Line Chart From Data Collection
3. Pie
   • Image
   • Example
4. Donut
   • Image
   • Example
5. Gauge
   • Image
   • Example
6. Bar Custom
   • Image
   • Example
   • Tutorial
     • Bar Chart Custom
7. Time
   • Image
   • Example
   • Tutorial
     • Intro Time Chart
     • Domain
     • Measure
     • Title & Subtitle
     • Legend
     • DRenderLine
     • DRenderTargetLine
     • DRenderBar
     • Issue Symbol Renderer When Change Render Type
     • Color
     • Action Listener
8. Scatter
   • Image
   • Example
   • Tutorial
     • Intro Scatter Chart
9. Single Bar
   • Image
   • Example
   • Tutorial
     • [Intro Single Bar] Soon
10. Other
11. Universal Tutorial

• All Chart

Bar

Bar Image

Bar Example

DChartBar(
    data: [
        {
            'id': 'Bar',
            'data': [
                {'domain': '2020', 'measure': 3},
                {'domain': '2021', 'measure': 4},
                {'domain': '2022', 'measure': 6},
                {'domain': '2023', 'measure': 0.3},
            ],
        },
    ],
    domainLabelPaddingToAxisLine: 16,
    axisLineTick: 2,
    axisLinePointTick: 2,
    axisLinePointWidth: 10,
    axisLineColor: Colors.green,
    measureLabelPaddingToAxisLine: 16,
    barColor: (barData, index, id) => Colors.green,
    showBarValue: true,
),

Line

Line Image

Line Example

DChartLine(
    data: [
        {
            'id': 'Line',
            'data': [
                {'domain': 0, 'measure': 4.1},
                {'domain': 2, 'measure': 4},
                {'domain': 3, 'measure': 6},
                {'domain': 4, 'measure': 1},
            ],
        },
    ],
    lineColor: (lineData, index, id) => Colors.amber,
),

Pie

Pie Image

Pie Example

DChartPie(
    data: [
        {'domain': 'Flutter', 'measure': 28},
        {'domain': 'React Native', 'measure': 27},
        {'domain': 'Ionic', 'measure': 20},
        {'domain': 'Cordova', 'measure': 15},
    ],
    fillColor: (pieData, index) => Colors.purple,
),

Donut

Donut Image

Donut Example

DChartPie(
    data: [
        {'domain': 'Flutter', 'measure': 28},
        {'domain': 'React Native', 'measure': 27},
        {'domain': 'Ionic', 'measure': 20},
        {'domain': 'Cordova', 'measure': 15},
    ],
    fillColor: (pieData, index) => Colors.purple,
    donutWidth: 30,
    labelColor: Colors.white,
),

Gauge

Gauge Image

Gauge Example

DChartGauge(
    data: [
        {'domain': 'Off', 'measure': 30},
        {'domain': 'Warm', 'measure': 30},
        {'domain': 'Hot', 'measure': 30},
    ],
    fillColor: (pieData, index) {
        switch (pieData['domain']) {
            case 'Off':
            return Colors.green;
            case 'Warm':
            return Colors.orange;
            default:
            return Colors.red;
        }
    },
    showLabelLine: false,
    pieLabel: (pieData, index) {
        return "${pieData['domain']}";
    },
    labelPosition: PieLabelPosition.inside,
    labelPadding: 0,
    labelColor: Colors.white,
),

Bar Custom

this is not depend on community_charts_flutter

Bar Custom Image

Bar Custom Example

// example 1
AspectRatio(
    aspectRatio: 16 / 9,
    child: DChartBarCustom(
        showDomainLine: true,
        showMeasureLine: true,
        showDomainLabel: true,
        showMeasureLabel: true,
        spaceBetweenItem: 8,
        listData: [
            DChartBarDataCustom(
                value: 13,
                label: 'Jan',
                color: Colors.blue,
            ),
            DChartBarDataCustom(value: 20, label: 'Feb'),
            DChartBarDataCustom(value: 30, label: 'Mar'),
            DChartBarDataCustom(value: 40, label: 'Apr'),
            DChartBarDataCustom(value: 25, label: 'Mei'),
        ],
    ),
),

// example 2
List ranking = [
    {'class': 'A', 'total': 23},
    {'class': 'B', 'total': 14},
    {'class': 'C', 'total': 8},
    {'class': 'D', 'total': 7},
    {'class': 'E', 'total': 21},
];
DChartBarCustom(
    loadingDuration: const Duration(milliseconds: 1500),
    showLoading: true,
    valueAlign: Alignment.topCenter,
    showDomainLine: true,
    showDomainLabel: true,
    showMeasureLine: true,
    showMeasureLabel: true,
    spaceDomainLabeltoChart: 10,
    spaceMeasureLabeltoChart: 5,
    spaceDomainLinetoChart: 15,
    spaceMeasureLinetoChart: 20,
    spaceBetweenItem: 16,
    radiusBar: const BorderRadius.only(
        topLeft: Radius.circular(8),
        topRight: Radius.circular(8),
    ),
    measureLabelStyle: const TextStyle(
        fontWeight: FontWeight.bold,
        fontSize: 16,
        color: Colors.purple,
    ),
    domainLabelStyle: const TextStyle(
        fontWeight: FontWeight.bold,
        fontSize: 16,
        color: Colors.purple,
    ),
    measureLineStyle:
        const BorderSide(color: Colors.amber, width: 2),
    domainLineStyle: const BorderSide(color: Colors.red, width: 2),
    max: 25,
    listData: List.generate(ranking.length, (index) {
        Color currentColor =
            Color((Random().nextDouble() * 0xFFFFFF).toInt());
        return DChartBarDataCustom(
            onTap: () {
                print(
                '${ranking[index]['class']} => ${ranking[index]['total']}',
                );
            },
            elevation: 8,
            value: ranking[index]['total'].toDouble(),
            label: ranking[index]['class'],
            color: currentColor.withOpacity(1),
            splashColor: Colors.blue,
            showValue: ranking[index]['class'] == 'C' ? false : true,
            valueStyle: ranking[index]['class'] == 'A'
                ? const TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: 16,
                    color: Colors.black,
                    )
                : const TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: 16,
                    color: Colors.white,
                    ),
            labelCustom: ranking[index]['class'] == 'B'
                ? Transform.rotate(
                    angle: 5.5,
                    child: const Text('Bagus'),
                    )
                : null,
            valueCustom: ranking[index]['total'] > 20
                ? Align(
                    alignment: Alignment.center,
                    child: Column(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                        Container(
                            padding: const EdgeInsets.all(4),
                            decoration: BoxDecoration(
                            border: Border.all(width: 2),
                            shape: BoxShape.circle,
                            ),
                            child: Text(
                            '${ranking[index]['total']}',
                            style: const TextStyle(
                                fontSize: 11,
                                color: Colors.red,
                                fontWeight: FontWeight.w900,
                            ),
                            ),
                        ),
                        const Text(
                            '😄',
                            style: TextStyle(fontSize: 20),
                        ),
                        ],
                    ),
                    )
                : null,
            valueTooltip: '${ranking[index]['total']} Student',
        );
    }),
),

Time

Chart for Time Series, it can be group and custom render chart view
Render type:

1. DRenderLine
2. DRenderBar
3. DRenderTargetLine
4. DRenderPoint

Time Image

Time Example

DChartTime(
    chartRender: DRenderLine(),
    measureLabel: (value) => '${value}k',
    domainLabel: (dateTime) {
        // [DateFormat] from intl package
        return DateFormat('d MMM yy').format(dateTime!);
    },
    groupData: [
        DChartTimeGroup(
            id: 'Keyboard',
            color: Colors.blue,
            data: [
                DChartTimeData(time: DateTime(2023, 2, 1), value: 29),
                DChartTimeData(time: DateTime(2023, 2, 2), value: 73),
                DChartTimeData(time: DateTime(2023, 2, 4), value: 23),
                DChartTimeData(time: DateTime(2023, 2, 8), value: 56),
                DChartTimeData(time: DateTime(2023, 2, 9), value: 32),
                DChartTimeData(time: DateTime(2023, 2, 10), value: 21),
                DChartTimeData(time: DateTime(2023, 2, 12), value: 76),
                DChartTimeData(time: DateTime(2023, 2, 18), value: 91),
                DChartTimeData(time: DateTime(2023, 2, 20), value: 17),
            ],
        ),
    ],
),

Scatter

Chart for Scatter Plot/Point Series, it can be group.

Scatter Image

Scatter Example

final group1 = [
    DChartScatterData(
        domain: 1,
        measure: 23,
        size: 10,
        startPlot: DPlot(2, 10),
        type: SymbolType.rect,
    ),
    DChartScatterData(
        domain: 2,
        measure: 12,
        type: SymbolType.circle,
    ),
    DChartScatterData(domain: 3, measure: 19),
];
final group2 = [
    DChartScatterData(
        domain: 1,
        measure: 15,
        type: SymbolType.triangle,
    ),
    DChartScatterData(
        domain: 3, measure: 25, type: SymbolType.triangle, size: 15),
    DChartScatterData(domain: 5, measure: 7),
];

DChartScatter(
    trackType: TrackType.rectangle,
    borderWidth: (group, data, index) => 2,
    borderColor: (random, group, data) => Colors.red.withOpacity(0.8),
    groupData: [
        DChartScatterGroup(
            id: 'id',
            data: group1,
            color: Colors.amber,
        ),
        DChartScatterGroup(
            id: 'id2',
            data: group2,
            color: Colors.purple,
        ),
    ],
),

Single Bar

This chart is devoted to making a comparison bar and progress bar display.

Single Bar Image

Single Bar Example

DChartSingleBar(
    forgroundColor: Colors.green,
    value: 30,
    max: 80,
),

Other

Support me for more feature & packages Donate

Check my app : Visit

Check My Tutorial & Course : Watch