thekeenant / fcharts

:bar_chart: Create beautiful, responsive, animated charts using a simple and intuitive API.
https://pub.dartlang.org/packages/fcharts
MIT License
326 stars 46 forks source link

Did x axis and y axis sort? #39

Open ChloeSu opened 4 years ago

ChloeSu commented 4 years ago

Hi I create a line chart but I could not let the x axis and y axis sort same time.

image

if I sort the data for y axis, the graph will show ... image

my line chart code...

LineChart(
            chartPadding: new EdgeInsets.fromLTRB(50, 35, 50, 35),
            lines: [
              new Line<FuelListDetailList, String, double>(
                data: consumption,
                xFn: (list) => list.record_date,
                yFn: (list) => list.liters_per_km,
                xAxis: xAxis,
                yAxis: new ChartAxis(
                  tickLabelerStyle: new TextStyle(
                      color: Colors.blue, fontWeight: FontWeight.bold),
                  paint: const PaintOptions.stroke(color: Colors.blue),
                ),
                marker: const MarkerOptions(
                  paint: const PaintOptions.fill(color: Colors.blue),
                ),
                stroke: const PaintOptions.stroke(color: Colors.blue),
                legend: new LegendItem(
                  paint: const PaintOptions.fill(color: Colors.blue),
                  text: ")",
                ),
              ),

              // price line
              new Line<FuelListDetailList, String, double>(
                data: price,
                xFn: (list) => list.record_date,
                yFn: (list) => list.total_price,
                xAxis: xAxis,
                yAxis: new ChartAxis(
                  opposite: true,
                  paint: const PaintOptions.stroke(color: Colors.green),
                  tickLabelerStyle: new TextStyle(
                      color: Colors.green, fontWeight: FontWeight.bold),
                ),
                marker: const MarkerOptions(
                  paint: const PaintOptions.fill(color: Colors.green),
                  shape: MarkerShapes.square,
                ),
                stroke: const PaintOptions.stroke(color: Colors.green),
                legend: new LegendItem(
                  paint: const PaintOptions.fill(color: Colors.green),
                  text: 'price',
                ),
              ),
            ],
          ),

or can I fixed the y axis value like this...? image

ChloeSu commented 4 years ago

oh... sorry I noticed the closed issue after I posted this.

I found I can set tickGenerator: IntervalTickGenerator.byN(num) and span from issue https://github.com/thekeenant/fcharts/issues/21

and could not sort at the same time from issue https://github.com/thekeenant/fcharts/issues/32