graphic library

Graphic provides a Flutter charting library for data visualization. it has a chart widget, calsses for specification, and some util classes and funtions for customization.

To use this charting library, you only need to do one thing: to create a Chart widget. This widget will evaluate and paint automatically in initial and on update.

A start example of bar chart is as below:

Chart(
  data: [
    { 'genre': 'Sports', 'sold': 275 },
    { 'genre': 'Strategy', 'sold': 115 },
    { 'genre': 'Action', 'sold': 120 },
    { 'genre': 'Shooter', 'sold': 350 },
    { 'genre': 'Other', 'sold': 150 },
  ],
  variables: {
    'genre': Variable(
      accessor: (Map map) => map['genre'] as String,
    ),
    'sold': Variable(
      accessor: (Map map) => map['sold'] as num,
    ),
  },
  elements: [IntervalElement()],
  axes: [
    Defaults.horizontalAxis,
    Defaults.verticalAxis,
  ],
)

All specifications of data visualization are set by parameters of Chart's constructor as class properties.

The main processing flow of charting and some important concepts are as below. Most concepts derive form the Grammar of Graphics. They will help to take full advantage of this library. These are brif introcuction, and details see into the Classes and Chart properties.

   variable    scale           aesthetic                  shape
      |          |                 |                        |
data --> tuples --> scaled tuples --> aesthetic attributes --> figures

Variable

Variables define the fields of Tuples. The input data of the chart is a List of any generic type. Yet they are not used directly inside the chart, instead, the data are converted to Tuples.

They are specified by Chart.variables or Chart.transforms with Variable or VariableTransform.

Algebra

The graphic algebra determins how variable values are assigned to position dimensions.

It is specified by GeomElement.position with Varset. See details of the algebra rules in Varset.

Scale

Scales convert Tuple values to to scaled values, which is easier to prosess for aesthetic Attrs.

They are specified by Variable.scale with Scale.

Coordinate

The coordinate determins how abstract positions are located on the canvas in painting. The same element may look quite different in RectCoord and PolarCoord.

It is specified by Chart.coord with Coord.

Aesthetic

Aesthetic means to make Tuples percivable. That is to give them aesthetic attributes from the scaled values.

Aesthetic attributes are specified in GeomElement with Attr. And attributes values are stored in Aes.

Shape

Shapes render Tuples with Aes attributes. Rendering means to get Figures, which carry the painting information for the rendering engine. Extending a shape subclass is the way to custom charts.

Shape is also a aesthetic attribute is self. It is defined with Shape, and generated by ShapeAttr wich is defined by GeomElement.shape. The Shape type should corresponds to GeomElement type.

Interaction

There are two kinds of interactions: Signal and Selection. Signal means a certain specification value changes to GestureSignal, ResizeSignal, or ChangeDataSignal. Selection means a tuple aesthetic attribute values change when it is selected or not.

Signals are used by properties named in "on...Signal" with SignalUpdater. Selections are specified by Chart.selections and used by Attr.onSelection with SelectionUpdater.

Guide

Guides are various components that helps to read the chart.

They include Axis specified by Chart.axes, Tooltip specified by Chart.tooltip, Crosshair specified by Chart.crosshair, and Annotations specified by Chart.annotations,

Classes

Aes: The aesthetic attribute values of a tuple.
Annotation: The specification of an annotation.
AreaElement: The specification of an area element.
AreaShape: The shape for the area element.
Attr<AV>: The specification of an aesthetic attribute.
AxisGuide<V>: The specification of an axis.
BasicAreaShape: A basic area shape.
BasicLineShape: A basic line shape.
CandlestickShape: A candle stick shape.
ChangeDataSignal<D>: The signal that may be emitted when data changes.
ChannelAttr<AV>: The specification of a channel aesthetic attribute.
Chart<D>: A widget to display the chart.
CircleShape: A circle shape.
ColorAttr: The specification of a color attribute.
ContinuousScale<V>: The specification of a continuous scale.
ContinuousScaleConv<V>: The continuous scale converter.
Coord: Specification of the coordinate.
CoordConv: The converter of a coordinate.
CrosshairGuide: The specification of a crosshair
CustomAnnotation: The specification of a custom annotation.
CustomElement: The specification of a custom element.
DashOffset: Specifies the starting position of a dash array on a path, either as a percentage or absolute value.
Defaults: Some useful default values for specifications.
DiscreteScale<V>: The specification of a discrete scale.
DiscreteScaleConv<V, SP extends DiscreteScale<V>>: The discrete scale converter.
DodgeModifier: The specification of a dodge modifier.
Figure: The base class of figures.
FigureAnnotation: The Specification of a figure annotation.
Filter: The transform to get tuples that satisfy a certain predicate.
FunctionElement<S extends FunctionShape>: The specification of a function element.
FunctionShape: The shape for the function element.
FunnelShape: A funnel or pyramid shape.
GeomElement<S extends Shape>: The specification of a geometry element.
Gesture: Information about a gesture.
GestureSignal: The signal emitted when a gesture occurs.
GradientAttr: The specification of a gradient attribute.
HeatmapShape: A heatmap shape.
IntervalElement: The specification of an interval element.
IntervalSelection: The selection to select a continuous range of data values
IntervalShape: The shape for the interval element.
JitterModifier: The specification of a jitter modifier.
Label: Specification of a label.
LabelAttr: The specification of a label attribute.
LabelStyle: The style of a Label.
LineAnnotation: The specification of a line annotation.
LinearScale: The specification of a linear scale.
LinearScaleConv: The linear scale converter.
LineElement: The specification of a line element.
LineShape: The shape for the line element.
MapTrans: The transform to map each tuple to a new tuple.
MarkAnnotation: The specification of a mark annotation.
Modifier: The specification of a collision modifier.
OrdinalScale: The specification of a ordinal scale.
OrdinalScaleConv: The ordinal scale converter.
PartitionElement<S extends PartitionShape>: The specification of a partition element.
PartitionShape: The shape for the partition element.
PathFigure: The fiure to paint a path.
Paths: Some useful path functions for rendering.
PointElement: The specification of a point element.
PointSelection: The selection to select discrete data values.
PointShape: The shape for the point element.
PolarCoord: The specification of a polar coordinate.
PolarCoordConv: The converter of a polar coordinate.
PolygonElement: The specification of a polygon element.
PolygonShape: The shape for the polygon element.
Proportion: The transform to calculate proportion of a certain field value of a tuple in all (or in a certain group) tuples.
RectCoord: The specification of a rectangle coordinate.
RectCoordConv: The converter of a rectangle coordinate.
RectShape: A rectangle or sector shape.
RegionAnnotation: The specification of a region annotation.
ResizeSignal: The signal emitted when chart size changes.
RotatedTextFigure: The figure to paint a rotated text.
Scale<V, SV extends num>: The specification of a scale.
ScaleConv<V, SV extends num>: The scale converter.
Selection: The specification of a selection.
ShadowFigure: The figure to paint the shadow of a path.
Shape: The Base class of a shape.
ShapeAttr<S extends Shape>: The specification of a shape attribute.
Signal: The base class of signals.
SizeAttr: The specification of a size attribute.
Sort: The transform to sort the tuple list.
SquareShape: A square shape.
StackModifier: The specification of a stack modifier.
StrokeStyle: The style of a stroke.
SymmetricModifier: The specification of a symmetric modifier.
TagAnnotation: The specification of a tag annotation.
TextFigure: The figure to paint text.
TickLine: The specification of a single axis tick line.
TimeScale: The specification of a time scale.
TimeScaleConv: The time scale converter.
TooltipGuide: The specification of a tooltip
Variable<D, V>: The specification of a variable.
VariableTransform: The specification of a variable transform.
Varset: To define a varset.

Enums

Dim: Dimension.
GestureType: Types of Gestures.
SignalType: Types of Signals.

Functions

getPaintPoint(Offset axis, double width, double height, Alignment align) → Offset: Calculates the real paint point for TextPainter.paint.
linearNiceNumbers(num min, num max, int n) → List<num>: Calculates nice numbers for LinearScaleConv.
linearNiceRange(num min, num max, int count) → List<num>: Calculates nice range for LinearScaleConv.
renderBasicItem(Path path, Aes aes, bool hollow, double strokeWidth, [Rect? gradientBounds]) → List<Figure>: Renders a basic element item.
renderLabel(Label label, Offset anchor, Alignment defaultAlign) → Figure: Gets the figure of a label.

Typedefs

AesGroups = List<List<Aes>>: Aes lists for groups.
AlgForm = List<AlgTerm>: The algebracal form storing the expression of a varset.
AlgTerm = List<String>: The term composing algebracal forms.
ElevationAttr = SizeAttr: The specification of a shadow elevation attribute.
GridMapper = StrokeStyle? Function(String? text, int index, int total): Gets an axis grid stroke style form an axis value text.
LabelMapper = LabelStyle? Function(String? text, int index, int total): Gets an axis label form an axis value text.
Selected = Map<String, Set<int>>: The result of selections of an element.
SelectionUpdater<V> = V Function(V initialValue): Updates an easthetic attribute value when the selection state of an element item changes.
SignalUpdater<V> = V Function(V initialValue, V preValue, Signal signal): Updates a value when a signal occurs.
TickLineMapper = TickLine? Function(String? text, int index, int total): Gets an axis tick line form an axis value text.
TooltipRenderer = List<Figure> Function(Offset anchor, Map<int, Tuple> selectedTuples): Gets the figures of a tooltip.
Tuple = Map<String, dynamic>: The tuple to store the original values of a datum.

graphic library

Variable

Algebra

Scale

Coordinate

Aesthetic

Shape

Interaction

Guide

Classes

Enums

Functions

Typedefs

graphic package

graphic library