Suggestion: Improved Error Handling For Grouped Chart Series Data Issues (RangeError (index): Invalid value:)

[mdrideout]

This issue is both here as a suggestion, and to assist anyone who may be encountering errors or rendering issues when constructing series data for their charts, who are searching for a solution.

A commonly encountered error is:

flutter: RangeError (index): Invalid value: ...

Grouped bar charts are sensitive to the order and existence of series data. There are two main ways that errors in creating the list of tuples will result in rendering issues for stacked bar charts (and potentially other charts).

Proper Data Example

The following is data that will render a grouped / stacked bar chart with no problems.

• Notice that the data is first ordered by type, then by index
• There is an equal number of "type" items for every instance of an "index" (an equal number of every index)
  • For index: 1 there are two entries
  • For index: 2 there are two entries
• There is an equal number of "index" items for every instance of a "type"
  • For type: Data 1 there are index "0", "1", and "2"
  • For type: Data 2 there are index "0", "1", and "2"

    seriesData = [
      {"type": "Data 1", "index": "0", "value": 120},
      {"type": "Data 1", "index": "1", "value": 132},
      {"type": "Data 1", "index": "2", "value": 101},
      {"type": "Data 2", "index": "0", "value": 220},
      {"type": "Data 2", "index": "1", "value": 182},
      {"type": "Data 2", "index": "2", "value": 191},
    ];

Data Ordering Errors

Data must be ordered correctly or rendering errors will occur.

Improper Order Example:

    seriesData = [
      {"type": "Data 1", "index": "0", "value": 120},
      {"type": "Data 2", "index": "2", "value": 191},
      {"type": "Data 1", "index": "1", "value": 132},
      {"type": "Data 2", "index": "0", "value": 220},
      {"type": "Data 2", "index": "1", "value": 182},
      {"type": "Data 1", "index": "2", "value": 101},
    ];

Improper Order Rendering Impact: improperly placed blocks on the chart. Gaps and overlaps are more prevalent with more "types".

Data Missing Errors

There must be an equal number of "type" data points for every index.

Data missing example 1

• index: 2 is missing an entry for type: Data 1: This will result in a error if the Flutter client has proper exception handling. Otherwise, no error may be displayed.
  • `RangeError (index): Invalid value: Not in inclusive range 0..1: 2
  • The chart will simply not render
• This may be common with many data sets. This requires the client to "fill in" missing data where it is not provided.

    seriesData = [
      {"type": "Data 1", "index": "0", "value": 120},
      {"type": "Data 1", "index": "1", "value": 132},
      {"type": "Data 2", "index": "0", "value": 220},
      {"type": "Data 2", "index": "1", "value": 182},
      {"type": "Data 2", "index": "2", "value": 191},
    ];

Data Missing Example 2

• There are an equal number of entries for all indexes in this example, but they do not all have matching type values.
• It is important that there are type values for every index
  • This results in the following error: RangeError (index): Invalid value: Only valid value is 0: 1

    seriesData = [
      {"type": "Data 1", "index": "0", "value": 120},
      {"type": "Data 1", "index": "1", "value": 132},
      {"type": "Data 3", "index": "2", "value": 101},
      {"type": "Data 2", "index": "0", "value": 220},
      {"type": "Data 2", "index": "1", "value": 182},
      {"type": "Data 2", "index": "2", "value": 191},
    ];

[hanai]

I'm facing the same problem, when using StackModifier, if the data is in a different order there are gaps in the graph.