Should multiple series work with geomLine? i.e. plot multiple lines

[colin-young]

Using the code from https://docs.cristalyse.com/charts/line-charts under Multi-Series Line Chart in a new Flutter app, with geomLine I get a single line that connects all data points across all series (looks like a backward N). In the demo/test I do not see the geomPoint at all. My expectation is that for the sample I should see two lines, each connecting 2 points, and each a different color.

In my more complex use in a complete application using multiple series I also do not see multiple lines for geomLine, but I do see the points with a different color for each series with geomPoint.

Should I be expecting this scenario to work, or is it a forthcoming feature?

[rudi-q]

Hey👋 @colin-young. Thanks for reporting this.

I just fixed the bug in the latest release v1.3.1. I really hope it resolves it for you.

You can also preview the fixed version on example.cristalyse.com under Multi Label Line Chart Demo.

If the fix I just pushed still doesn't help, please let me know also I would appreciate if you share a reproducible example of your code.

This should fix both issues you mentioned, you should now see two properly colored lines that connect the right points, plus the geomPoint should work fine alongside geomLine.

Sorry about the frustration with this one - multi-series line charts are pretty fundamental, so this was definitely a priority to get sorted out.

Let me know if you run into any other issues! Happy to help 🙂

[colin-young]

Thanks! That fixed the issue. I think the problem I had with the reproduction and points was unrelated and caused by using size from the sample data as the size of the points, and running into a type conversion exception (int to double).

final data = [
  {'month': 'Jan', 'platform': 'iOS', 'users': 1200}, // this causes an error
  {'month': 'Jan', 'platform': 'Android', 'users': 800.0}, // this doesn't
  {'month': 'Feb', 'platform': 'iOS', 'users': 1350.0},
  {'month': 'Feb', 'platform': 'Android', 'users': 950.0},
];

CristalyseChart()
      .data(data)
      .mapping(x: 'month', y: 'users', color: 'platform', size: 'users')
      .geomLine(strokeWidth: 3.0)
      .geomPoint()
      .scaleXOrdinal()
      .scaleYContinuous(min: 500, max: 1400)
      .theme(ChartTheme.defaultTheme())
      .build(),
);

No worries on the frustration. I wanted to make sure it was supposed to be working before spending too much time trying to solve it, and having discovered that the min on scale is ignored figured it was worth checking. On that topic, I have a fix for it, but due to my employment agreement all my OSS contributions need to go through a review, which can take a couple weeks. Since the fix is all of 2 lines of code (I'm pretty sure), I figure that's something somebody else might take care of faster than I can turn it around. If not, I'm happy to create tests, verify that's all that's needed for the fix and put together a PR.

On another note, it took all of 10 minutes to replace an old integration of community_charts_flutter with a working Cristalyse implementation, and way, way less code.