Reputation: 1245

want to show a radar chart in flutter app

I want to show a radar chart in flutter app. I found this library: this But I do not know how to make this work with flutter app, and I did not found any clear example. I am also open to other purposal of library to use radar chart on my app. I have tied this:

import 'package:flutter/material.dart';
import 'package:modern_charts/modern_charts.dart' as cart;


  void main() {
  runApp(new MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {
 static var table =  cart.DataTable(
    [
        ['Categories', 'Series 1'],
        ['Monday', 1],
        ['Tuesday', 3],
        ['Wednesday', 4],
        ['Thursday', null],
        ['Friday', 3],
        ['Saturday', 5],
        ['Sunday', 4]]);

// Define user options.
static var options = {
  'series': {
    'labels': {
      'enabled': true
    }
  }
};
static Center centre = Center();

// Create and render the chart.
var chart = cart.RadarChart(centre)
..draw(table, options);


  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text('Plugin example app'),
        ),
        body: centre,
        ),
      );

  }
}

Thanks in advance.

Upvotes: 5

Answers (3)

Intkhab Ahmed

Reputation: 128

anyone looking for more customized version of radar chart, I have made a package "multi_charts" which provides Radar/Spider Chart and has lots of customization. Please check it out here Multi Charts

Upvotes: 3

cnsumner

Reputation: 533

I know this question is old, but I was also looking for a library for this and thought I'd share in case anyone else comes across this question.

I couldn't find anything out there for flutter that could do spider/radar charts, so i wrote a simple library to meet my requirements. It doesn't have many features, but it works well.

Disclaimer: I wrote this library

https://pub.dartlang.org/packages/spider_chart

Here is an example of what it looks like:

And an example of usage:

Center(
  child: Container(
    width: 300,
    height: 300,
    child: SpiderChart(
      data: [
        7,
        5,
        10,
        7,
        4,
      ],
      maxValue: 10, // the maximum value that you want to represent (essentially sets the data scale of the chart)
      colors: <Color>[
        Colors.red,
        Colors.green,
        Colors.blue,
        Colors.yellow,
        Colors.indigo,
      ],
    ),
  ),
)

Hope this helps someone!

Upvotes: 6