LineChart tutorial

In this tutorial I'll show you how the pygtkChart's LineChart widget can be used to display data and mathematical functions.

I asume that you have some basic experience with PyGTK.

Step 1 - the window

Ok, this part is simple, let's create a window for the line chart:

#!/usr/bin/env python

import gtk
import pygtk

window = gtk.Window()
window.connect("destroy", gtk.main_quit)
window.resize(500, 300)

window.show_all()
gtk.main()

The code above will just show a blank window.
---
step1.py

Step 2 - adding the line chart

Now modify your code to import pygtkChart and add the line chart:

#!/usr/bin/env python

import gtk
import pygtk
import  pygtk_chart
from pygtk_chart import line_chart

window = gtk.Window()
window.connect("destroy", gtk.main_quit)
window.resize(500, 300)

chart = line_chart.LineChart()

window.add(chart)
window.show_all()
gtk.main()

Due to a bug this code won't work because there's no data to show. So let's create a graph with some data and display it.
---
step2.py

Step 3 - adding a graph to the chart

Let's add a graph that shows some data:

...
chart = line_chart.LineChart()

data = [(0,1), (1, -0.5), (1.5, 2), (2, 2.1), (4, 0.21)]
graph_a = line_chart.Graph("test a", "Test", data)
chart.add_graph(graph_a)

window.add(chart)
...

The data is just a list of random (x, y) pairs. The first argument to the constructor of 'Graph' is a unique identifier for the graph, the second is the title and the third is the data to display.

You should now get a window similar to this:

---
step3.py

Step 4 - adding a graph for a mathematical function

Now we want to add the graph for the sine function in the range from zero to 2π.
First we have to import the sine function and pi from the math module:

...
from pygtk_chart import line_chart
from math import sin, pi

window = gtk.Window()
...

After that we can create a graph from sin and add it to the chart:

...
chart.add_graph(graph_a)

graph_sin = line_chart.graph_new_from_function(sin, 0, 2 * pi, "sine", 50)
chart.add_graph(graph_sin)

window.add(chart)
...

As you can see, the first parameter of graph_new_from_function is the function to use, the second is the minimum x value, the third the maximum x value. The fourth parameter is the identifier for the new graph.
The fifth (optional) paramter sets the number of samples to start with. In this case, sin is evaluated at 50 points. After that the function will be evaluated at additional points to smoothen the graph.

You should now see something like this:

---
step4.py

Step 5 - styling graphs

Ok, we added the sine graph, but it looks strange, because the datapoints are shown. We can fix that by setting the graph's type:

...
graph_sin = line_chart.graph_new_from_function(sin, 0, 2 * pi, "sine", 50)
graph_sin.set_type(line_chart.GRAPH_LINES)
chart.add_graph(graph_sin)
...

We can also set the title of the graph:

...
graph_sin = line_chart.graph_new_from_function(sin, 0, 2 * pi, "sine", 50)
graph_sin.set_type(line_chart.GRAPH_LINES)
graph_sin.set_title("Sine")
chart.add_graph(graph_sin)
...

Another nice styling feature is the possibility to fill the space between a graph and a value or another graph:

...
graph_sin.set_title("Sine")
graph_sin.set_fill_to(0)
chart.add_graph(graph_sin)
...

Instead of
graph_sin.set_fill_to(0)
we could have used
graph_sin.set_fill_to(graph_a)
which would fill the space between the sine and the graph added in the beginning.

Now let's style the first graph. We want it to have square datapoints that are a bit bigger. Additionally, the graph should be dotted:

...
graph_a = line_chart.Graph("test a", "Test", data)
graph_a.set_point_style(pygtk_chart.POINT_STYLE_SQUARE)
graph_a.set_point_size(5)
graph_a.set_line_style(pygtk_chart.LINE_STYLE_DOTTED)
chart.add_graph(graph_a)
...

You should end up with the following:

---
step5.py

There's much more you could do with the chart and the graphs. See the documentation for details.