Live Chart

1.0.0-beta2 (API freezed)

Live Chart is a real-time charting library for GTK3 and Vala, based on Cairo.

Features

• Render many series withing a single chart
• Automatic y-axis adjustement
• Support chart area / window live resizing
• Extendable

Screenshots

API

N.B.: Classes and methods available in the source code and not documented here - even if they are public - are subject to changes in a future release

Chart

var chart = LiveChart.Chart();

As Chart object derives from Gtk.DrawingArea, don't forget to attach it to a Gtk.Container :

var window = new Gtk.Window();
window.add(chart);

Series

A Serie is basically a structure that :

• Contains its own data set
• Has a name, like Temperature in Paris
• Know how it renders on the chart, like in Bar, Line...

Create a serie

// Serie with a default Line renderer
var serie_name = "Temperature in Paris";
var paris_temperature = new LiveChart.Serie(serie_name);

// Or inject the renderer
var serie_name = "Temperature in Paris";
var paris_temperature = new LiveChart.Serie(serie_name, new LiveChart.Bar());

Then register the Serie to the Chart :

var serie_name = "Temperature in Paris";
var paris_temperature = new LiveChart.Serie(serie_name);
chart.add_serie(paris);

Adding data points

Your Serie must have been registererd to the Chart before being able to add data points to this serie.

var serie_name = "Temperature in Paris";
var paris_temperature = new LiveChart.Serie(serie_name);

chart.add_serie(paris);

chart.add_value(paris_temperature, 19.5);

Serie renderer

There's currently 5 built-in series available:

Line serie: LiveChart.Line

Line serie connect each data point with a straight segment.

SmoothLine serie: LiveChart.SmoothLine

Smooth line serie connect each data point with a bezier spline for a smoother rendering.

Bar serie: LiveChart.Bar

LineArea seris: LiveChart.LineArea

SmoothLineArea serie: LiveChart.LineArea

Serie renderer API

For all series, you can control the line or the bar color via the main_color: Gdk.RGBA property:

var smooth_line = LiveChart.SmoothLine();
smooth_line.main_color = Gdk.RGBA() {red: 0, green: 0, blue: 1, alpha: 1}; // Pure blue

For area series, you can control the area color via the area_alpha: double property (default : 0.1):

var smooth_line = LiveChart.SmoothLineArea();
smooth_line.main_color = Gdk.RGBA() {red: 0, green: 0, blue: 1, alpha: 1};
smooth_line.area_alpha = 0.5;

The area color is always the same as main_color value.

Configure a renderer

• Main color Gdk.RGBA

var serie_name = "Temperature in Paris";
var paris_temperature = new LiveChart.Serie(serie_name);

paris_temperature.set_main_color({ 0.0, 0.1, 0.8, 1.0});

Programmatic export

You can export your chart in PNG format :

var filename = "chart_export.png";
chart.to_png(filename);

Example

Example source code available here

Compile and run with :

meson build
ninja -C build
./build/examples/example

Dependencies

dependency
libcairo2-dev
libgee-0.8-dev
libgtk-3-dev