Create a new serie

The main thing you will want to do after creating a graph is displaying something on it. For that you must call the newSerie method which will return a serie instance. The serie and the graph are automatically linked but you will still need to assign some axis to it.

var graph = new Graph( dom );
var serie = g.newSerie(); // Creates a new serie

Again, this is not sufficient yet. For starters, let us assign some axis to this serie

// Example: autoAxis
serie.autoAxis();

// Example: manual assignation
serie
  .setXAxis( graph.getBottomAxis() )
  .setYAxis( graph.getRightAxis( 1 ) );

In the first example, automatic axes will be assigned to the serie. If you're planning to work only with a bottom and a left axis, that's perfect for you. If you're looking at a multiple axis graph, you probably want to specify which axis should the serie use, hence the second example (in which we assign the first bottom axis and the second right axis)

Now we can set assign some data to the series. Let's use a standard data type here. Fore more information about data types, consult the Data types chapter.

var data = [];
for( var i = 0; i < 2; i += 0.1 ) {
        data.push( [ i, i * i ]); // [x, y]
}

serie.setData( data );

Almost done ! Now we must tell the axis to autoscale so that the serie can be displayed.

g.autoscaleAxes();

Note that the first g.render() will do the same thing so that no autoscaleAxes() must be called if the data was assigned to the serie before the first g.render method is called.

And we're there ! The only thing left is to tell the graph to actually paint the series on the canvas. Nothing's easiers !

g.drawSeries();

That's the very basics of displaying series. Let's put all of that together using some function chaining for convenience.

var g = new Graph( someDom );
var s = g.newSerie()
        .autoAxis()
        .setData( someData );

g.autoscaleAxes();
g.drawSeries();

Multiple series

If you want to display multiple series on a graph, there's nothing easier. The only thing that we recommand is that you give a unique name to the series. You don't have to as we don't stricly rely on it, but if you don't, you might lose some features. For instance when the mouse moves over the graph, jsGraph sends a object back with the information about the closest data and interpolated y value for each serie, in a single hashmap indexed by the serie name. If you have clashes in the naming of the series this will result in the loss of this information.

To name a serie, use the following code:

var g = new Graph( someDom );
var s1 = g.newSerie( "myFirstSerie" );
var s2 = g.newSerie( "mySecondSerie" );
// Further use of s1 and s2

A nice example of two series displayed on two axis can be found here