Line serie

The line serie is probably the one you will be using most of the time to display spectra, trends, ... Basically any data that should (but doesn't have to) be represented by a line between points.

The line serie clearly offers the best optimization at this stage and therefore it should be preferred over the scatter serie if the latter isn't expressely required by your application.

Example

var data = [ 0, 10, 1, 8, 2, 15, 3, 17, 4, 20 ];
var g = new Graph("graph-1");
var s = g.newSerie("s1", {}, "line").autoAxis().setData( data );
g.redraw();
g.drawSeries();

Setting data

There are three data types that the line serie accepts, which all share the same method setData( data ). The easiest and most general one is a one dimensional array of alternating x and y coordinates:

[ x1, y1, x2, y2, x3, y3, ... ]

If that lacks clarity, you are welcome to use a two-dimensional array

[ [ x1, y1 ], [ x2, y2 ], [ x3, y3 ], ... ]

If your data is always separated by the same interval in the x direction, then you will save half the allocated memory by using

{ x: startingX, dx: intervalX, y: [ y1, y2, y3, ... ] ]

Line serie specific API

Function
`degrade( pxPerPt, optionsZoneSerie )`
If you have a very high amount of data to display, sometime it makes sense to degrade average a couple of points and display a min/max zone on top and bottom of the latter. `degrade()` serves that purpose. The parameter `pxPerPt` defined how many pixels should be used per displayed data point. All data falling within that space will be averaged. Along with the averaging, the library keeps track of the maxima and minima it encountered and sets it in a zone serie. The parameter `optionsZoneSerie` are the options passed to the zone serie constructor. `degrade()` returns the newly created zone serie (that you can always `kill()` if you don't need it.
`XIsMonotoneous( )`
Tells that x is a constantly increasing value. It doesn't need to be equally spaces, just never decreasing. That allows another important layer of optimization to be done and saves a lot of rendering time.
`setMarkers( markersArray )`
Add markers for families of points on the serie. A marker "marks" the spot where a data point is located. See the section Setting markers for explanations and examples
`eraseMarkers( )`
Hide all markers until the serie is redrawn.
`hideMarkers( skipRedraw )`
Hide the markers for the serie. If `skipRedraw` is `true`, the serie will not be redrawn yet but the preference will be saved.
`showMarkers( skipRedraw )`
Show the markers for the serie. If `skipRedraw` is `true`, the serie will not be redrawn yet but the preference will be saved.
`markersShown( )`
Returns `true` if the markers are shown, `false` if not.
`setLineColor( color )`
Sets the color of the line. Does not redraw the serie
`setLineWidth( width )`
Sets the width (in px) of the line.
`setLineStyle( style )`
Changes the style of the line. Check all line styles here

Setting markers

For the impatient, check out the marker example.

The method setMarkers() takes a single parameter: an array of marker families. There should as many elements in the array as you want of marker types on your graph, e.g. if you just want to display one type of marker, use only one element. Those elements are object which are defined in the following way :

{
  type: (integer), // Marker type. ex: 1
  points: (array), // ex: [ "all" ], or [ 1, 2, [ 5, 12 ] ]
  fillColor: (string), // Fill color. ex: "#ff0000"
  strokeWidth: (integer), // Marker stroke width. ex: 1
  strokeColor: (string), // Marker stroke color. ex: "orange"
  zoom: (float) // Changes the marker size
}

Type: Each marker style has a certain type starting at 1. We will release a document with all marker types
Points: This is an array of the points that should have this marker. For all points, use [ "all" ]. For single points, use [ index, ... ], where index is the index of the point in the data array. For a range of markers, use [ [ from, to ], ... ] where from is the starting index and to is the ending index of the points in the data array.
fillColor: color with which the shape should be filled. If you are using crosses for instance, this will have no effect.
strokeColor: Color of the stroke.
strokeWidth: Width of the stroke. You should use an integer.
zoom: The marker has a default size corresponding to a zoom of 1. Multiply this size by increasing the zoom ratio (a zoom of 2 will make the marker twice bigger).

Example

var data = [];
for( var i = 0; i  4 ; i += 0.2, data.push( [ i, Math.sin( i ) ] ) );
var g = new Graph("graph-2");
var s = g.newSerie("s2", {}, "line")
    .autoAxis()
    .setData( data )
    .setMarkers( [
      {
        type: 3,
        strokeColor: "black",
        strokeWidth: 2,
        zoom: 2,
        points: [ 4, 8, [ 14, 19 ] ]
      },
      {
        type: 4,
        fillColor: "rgba( 200, 100, 0, 0.7 )",
        strokeColor: "red",
        strokeWidth: 1,
        zoom: 6,
        points: [ 10 ]
      }
    ] );

g.redraw();
g.drawSeries();

Line styles

On the following graph, we display the available line styles as of today with their associated number.