title: How to show line chart from data json using flutter
body: <p>i will display linechart from the database using datajson with flutter. but the reference that I can use is hardcode data. Please help</p>
  
  <pre><code>import 'dart:async';
  import 'dart:convert';
  import 'package:flutter/material.dart';
  import 'package:http/http.dart' as http;
  import 'package:charts_flutter/flutter.dart' as charts;
  
  int dataTotal = 0;
  
  class GrafikSpbj extends StatefulWidget {
    final List&lt;charts.Series&gt; seriesList;
    final bool animate;
  
  
    GrafikSpbj(this.seriesList, {this.animate});
  
    /// Creates a [LineChart] with sample data and no transition.
    factory GrafikSpbj.withSampleData() {
      return new GrafikSpbj(
        _createSampleData(),
        // Disable animations for image tests.
        animate: false,
      );
    }
  
    @override
    _GrafikSpbjState createState() =&gt; _GrafikSpbjState();
  
    /// Create one series with sample hard coded data.
    static List&lt;charts.Series&lt;LinearSales, int&gt;&gt; _createSampleData() {
  
      print(dataTotal);
  
      final desktopSalesData = [
        new LinearSales(0, 10),
        new LinearSales(1, 50),
        new LinearSales(2, 70),
        new LinearSales(3, 100),
      ];
  
      final tableSalesData = [
        new LinearSales(0, 20),
        new LinearSales(1, 40),
        new LinearSales(2, 80),
        new LinearSales(3, 100),
      ];
  
      return [
        new charts.Series&lt;LinearSales, int&gt;(
          id: 'Desktop',
          colorFn: (_, __) =&gt; charts.MaterialPalette.blue.shadeDefault,
          domainFn: (LinearSales sales, _) =&gt; sales.year,
          measureFn: (LinearSales sales, _) =&gt; sales.sales,
          data: desktopSalesData,
        ),
        new charts.Series&lt;LinearSales, int&gt;(
          id: 'Tablet',
          colorFn: (_, __) =&gt; charts.MaterialPalette.red.shadeDefault,
          domainFn: (LinearSales sales, _) =&gt; sales.year,
          measureFn: (LinearSales sales, _) =&gt; sales.sales,
          data: tableSalesData,
        ),
      ];
    }
  }
  
  class _GrafikSpbjState extends State&lt;GrafikSpbj&gt; {
  
    List data;
    Timer timer;
    int jumlahData = 0;
  
    Future&lt;List&gt; _getData() async {
      final response = await http.get("xxxxxxxxxxxxx");
  
      setState(() {
        data = json.decode(response.body);
        jumlahData =data.length;
        print(data[0]['id_spbj']);
        print(data[0]['minggu_ke']);
        print(data[0]['hasil']);
        print(data[0]['target_grafik']);
      });
  
      return json.decode(response.body);
    }
  
    // makeRequest() async {
    //   var response = await http.get(
    //     'xxxxxxxxxxxxxxxxxxxxxxx',
    //     headers: {'Accept': 'application/json'},
    //   );
  
    //   setState(() {
    //     data = json.decode(response.body);
    //     jumlahData =data.length;
    //   });
    // }
  
    @override
    void initState() {
      _getData();
      dataTotal = jumlahData;
      super.initState();
    }
  
    @override
    void dispose() {
      super.dispose();
    }
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: new Text("Input Pelanggan hal 2"),
        ),
        body: Column(
          children: &lt;Widget&gt;[
            SizedBox(
              width: 600.0,
              height: 250.0,
              child: new charts.NumericComboChart(widget.seriesList,
                animate: widget.animate,
                defaultRenderer: new charts.LineRendererConfig(),
                customSeriesRenderers: [
                  new charts.PointRendererConfig(customRendererId: 'customPoint')
                ]),
            ),
            new Text("data"),
            new Text("data"),
            new Text("data")
          ],
        ),
      );
    }
  }
  
  /// Sample linear data type.
  class LinearSales {
    final int year;
    final int sales;
  
    LinearSales(this.year, this.sales);
  }
  </code></pre>
  
  <p><strong>values</strong></p>
  
  <pre><code>[{"id_spbj":"1","minggu_ke":"1","hasil":"13.4353337","target_grafik":"25.00"},{"id_spbj":"1","minggu_ke":"2","hasil":"28.2629147","target_grafik":"25.00"},{"id_spbj":"1","minggu_ke":"3","hasil":"85.3285762","target_grafik":"25.00"},{"id_spbj":"2","minggu_ke":"1","hasil":"32.0184122","target_grafik":"25.00"},{"id_spbj":"2","minggu_ke":"2","hasil":"53.5296934","target_grafik":"25.00"}]
  </code></pre>