Types of series

As of today you have the choice between 4 different types of series: line, zone, contour and scatter. Herein we are describing their salient features.

Defining a new serie

Defining a new serie of any type is pretty much as described in the previous paragraph. By default the type is line but you can pass a parameter in g.newSerie() to create another serie type.

var options = {};

var s = g.newSerie( "s1", options, "line" ); // line serie
var s = g.newSerie( "s2", options, "zone" ); // zone serie
var s = g.newSerie( "s3", options, "contour" ); // contour serie
var s = g.newSerie( "s4", options, "scatter" ); // scatter serie

Features example

As an example, we show an example of each serie with the associated code. A more detailed description of each type of series can be found later in this documentation.

// Generate line data
var dataLine = [];
for( var i = -5; i < 5 ; i += 0.01 ) {
  dataLine.push( i );
  dataLine.push( Math.sin( i ) * 4 );
}
// End generate line data


// Generate contour data
var contourFunction = function( x, y, obj ) {
  var val = ( Math.cos( x ) + Math.cos( y ) );
  obj.minZ = Math.min( val, obj.minZ );
  obj.maxZ = Math.max( val, obj.maxZ );
  return val;
} 

var contourData = {
  noise: 0,
  minZ: Number.POSITIVE_INFINITY,
  maxZ: Number.NEGATIVE_INFINITY,
  z: [],
  minX: -5,
  maxX: 5,
  minY: -5,
  maxY: 5
};

var i = 0, j;
for( var x = obj.minX; x < obj.maxX; x += 0.05 ) {
  j = 0;
  obj.z[ i ] = [];
  for( var y = obj.minY; y < obj.maxY ; y += 0.05 ) {
    obj.z[ i ][ j ] = contourFunction( x, y, obj );
    j++;
  }
  i++;
}

var dataContour = generateContourLines( obj );
// End generate contour data

// Generate some zone data
var dataZone = [ ];

var dataZone = [];
for( var i = -5; i < 5 ; i += 0.2 ) {
  dataZone.push( i );
  dataZone.push( Math.sin( i ) * 4 - ( ( 2 + Math.random() ) * 2 ) );
  dataZone.push( Math.sin( i ) * 4 + ( ( 2 + Math.random() ) * 2 ) );
}
// End generate some zone data 


// Generate some scatter data
var dataScatter = [ ];
for( var i = -5; i < 5 ; i += 0.2 ) {
  dataScatter.push( i );
  dataScatter.push( Math.sin( i ) * 4 * ( Math.random() + 2 ) / 2 );
}

// End generate some scatter data

var g = new Graph("graph-1");

var s1 = g.newSerie("s1", {}, "line")
  .autoAxis()
  .setData( dataLine )
  .setLineColor('red')
  .setLineWidth(2);

var s2 = g.newSerie("s2", {}, "contour")
  .autoAxis()
  .setData( dataContour )
  .setLineColor('rgba(0, 60, 0, 0.2');

var s3 = g.newSerie("s3", {}, "zone")
  .autoAxis()
  .setData( dataZone )
  .setFillColor( "rgba( 100, 100, 0, 0.2 )")
  .setLineColor( 'rgba(100, 100, 0, 0.5)');

var s4 = g.newSerie("s4", {}, "scatter")
  .autoAxis()
  .setData( dataScatter )
  .setDataStyle( { 
    shape: 'circle', 
    stroke: 'rgba( 0, 0, 100, 0.7 )', 
    fill: 'rgba( 0, 0, 100, 0.5)', 
    cx: 0, 
    cy: 0, 
    r: 3
  });
  
g.redraw();
g.drawSeries();