graphic library

Graphic provides a Flutter charting library for data visualization. it has a chart widget, classes 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,
    ),
  },
  marks: [IntervalMark()],
  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 encodes --> elements

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 Mark.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 Encodes.

They are specified by Variable.scale with Scale.

Coordinate

The coordinate determins how abstract positions are located on the canvas in painting. The same mark 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 encodes from the scaled values.

Aesthetic encodes are specified in Mark with Encode. And encodes values are stored in Attributes.

Shape

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

Shape is also a aesthetic encode is self. It is defined with Shape, and generated by ShapeEncode wich is defined by Mark.shape. The Shape type should corresponds to Mark type.

Interaction

There are two kinds of interactions: Event and Selection. Event means a certain specification value changes to GestureEvent, ResizeEvent, or ChangeDataEvent. Selection means a tuple aesthetic encode values change when it is selected or not.

Events are used by event streams specified in Chart. Selections are specified by Chart.selections and used by Encode.updaters 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,

Animation

Marks can specify transition animation by Mark.transition on entrance or changed. Mark.entrance defines which encode attributes are zero at the begining of entrance animation.

Classes

Annotation: The specification of an annotation.
ArcElement: An arc element
ArcSegment: An arc segment like Path.arcTo.
ArcToPointSegment: An arc-to-point segment like Path.arcToPoint.
AreaMark: The specification of an area mark.
AreaShape: The shape for the area mark.
Attributes: The aesthetic attribute values of a tuple.
AxisGuide<V>: The specification of an axis.
BasicAreaShape: A basic area shape.
BasicLineShape: A basic line shape.
CandlestickShape: A candle stick shape.
ChangeDataEvent<D>: The event that may be emitted when data changes.
ChannelEncode<EV>: The specification of a channel aesthetic encode.
Chart<D>: A widget to display the chart.
CircleElement: A circle element.
CircleShape: A circle shape.
CloseSegment: A close segment like Path.close.
ColorEncode: The specification of a color encode.
ConicSegment: A conic segment like Path.conicTo.
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
CubicSegment: A cubic bezier segment like Path.cubicTo.
CustomAnnotation: The specification of a custom annotation.
CustomMark: The specification of a custom mark.
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.
ElementAnnotation: The Specification of a element annotation.
Encode<EV>: The specification of an aesthetic encode.
Event: The base class of events.
Filter: The transform to get tuples that satisfy a certain predicate.
FunctionMark<S extends FunctionShape>: The specification of a function mark.
FunctionShape: The shape for the function mark.
FunnelShape: A funnel or pyramid shape.
Gesture: Information about a gesture.
GestureEvent: The event emitted when a gesture occurs.
GradientEncode: The specification of a gradient encode.
GroupElement: A group element.
HeatmapShape: A heatmap shape.
ImageElement: An image element.
ImageStyle: The style of ImageElement.
IntervalMark: The specification of an interval mark.
IntervalSelection: The selection to select a continuous range of data values
IntervalShape: The shape for the interval mark.
JitterModifier: The specification of a jitter modifier.
Label: Specification of a label.
LabelElement: A label element.
LabelEncode: The specification of a label encode.
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: A line element.
LineMark: The specification of a line mark.
LineSegment: A line segment like Path.lineTo.
LineShape: The shape for the line mark.
MapTrans: The transform to map each tuple to a new tuple.
Mark<S extends Shape>: The specification of a geometry mark.
MarkElement<S extends ElementStyle>: The basic element to compose graphics on MarkScenes.
Modifier: The specification of a collision modifier.
MoveSegment: A move segment like Path.moveTo.
OrdinalScale: The specification of a ordinal scale.
OrdinalScaleConv: The ordinal scale converter.
OvalElement: An oval element.
PaintStyle: The style of PrimitiveElement.
PartitionMark<S extends PartitionShape>: The specification of a partition mark.
PartitionShape: The shape for the partition mark.
PathElement: An element specified by path Segments.
PointMark: The specification of a point mark.
PointSelection: The selection to select discrete data values.
PointShape: The shape for the point mark.
PolarCoord: The specification of a polar coordinate.
PolarCoordConv: The converter of a polar coordinate.
PolygonElement: A polygon element.
PolygonMark: The specification of a polygon mark.
PolygonShape: The shape for the polygon mark.
PolylineElement: A polyline element.
PrimitiveElement: The graphical primitive element of a basic shape.
Proportion: The transform to calculate proportion of a certain field value of a tuple in all (or in a certain group) tuples.
QuadraticSegment: A quadratic bezier segment like Path.quadraticBezierTo.
RectCoord: The specification of a rectangle coordinate.
RectCoordConv: The converter of a rectangle coordinate.
RectElement: A rectangle element.
RectShape: A rectangle or sector shape.
RegionAnnotation: The specification of a region annotation.
ResizeEvent: The event emitted when chart size changes.
Scale<V, SV extends num>: The specification of a scale.
ScaleConv<V, SV extends num>: The scale converter.
SectorElement: A sector element.
Segment: Path segments of PathElements.
SegmentTags: Built-in segment tags.
Selection: The specification of a selection.
Shape: The Base class of a shape.
ShapeEncode<S extends Shape>: The specification of a shape encode.
SizeEncode: The specification of a size encode.
Sort: The transform to sort the tuple list.
SplineElement: A spline element consisting of cubic bezier segments.
SquareShape: A square shape.
StackModifier: The specification of a stack modifier.
SymmetricModifier: The specification of a symmetric modifier.
TagAnnotation: The specification of a tag annotation.
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
Transition: Specifications of a transition animation.
Variable<D, V>: The specification of a variable.
VariableTransform: The specification of a variable transform.
Varset: To define a varset.

Enums

Dim: Dimension.
EventType: Types of Events.
GestureType: Types of Gestures.
MarkEntrance: Strategies for mark elements to enter in initialization.

Functions

getBlockPaintPoint(Offset axis, double width, double height, Alignment align) → Offset: Calculates the real painting offset point for BlockElement.
getPaintStyle(Attributes attributes, bool hollow, double strokeWidth, Rect? gradientBounds, List<double>? dash) → PaintStyle
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.

Typedefs

AlgForm = List<AlgTerm>: The algebracal form storing the expression of a varset.
AlgTerm = List<String>: The term composing algebracal forms.
AttributesGroups = List<List<Attributes>>: Attributes lists for groups.
ElevationEncode = SizeEncode: The specification of a shadow elevation encode.
EventUpdater<V> = V Function(V initialValue, V preValue, Event event): Updates a value when a event occurs.
GridMapper = PaintStyle? 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 mark.
SelectionUpdater<V> = V Function(V initialValue): Updates an easthetic encode value when the selection state of an mark item changes.
TickLineMapper = TickLine? Function(String? text, int index, int total): Gets an axis tick line form an axis value text.
TooltipRenderer = List<MarkElement<ElementStyle>> Function(Size size, Offset anchor, Map<int, Tuple> selectedTuples): Gets the elements 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

Animation

Classes

Enums

Functions

Typedefs

graphic package

graphic library