jsGraph

Various series

Don't just display standard series ! Customize your line color, thickness and profile using setLineColor, setLineWidth and setLineStyle.

Use scatter series if your data represent individual events. This way you can customize any point ! Use setDataStyle to customize the shape of your data points

If you want do represent minimas / maximas, use the zone serie ! It takes one more additional term in the data: serie.setData( [ x1, min1, max1, x2, min2, max2, ... ]). Use setFillColor and setLineColor to change how the zone should look like.

Source code

var graphinstance = new Graph( domGraph );
var serie = graphinstance.newSerie( "serieTest", {}, 'scatter' )
  .setLabel( "My serie" )
  .autoAxis()
  .setData( series[ 0 ] )
  .setStyle( {
    shape: 'circle',
    r: 2,
    fill: 'rgba(255, 0, 0, 0.3)',
    stroke: 'rgba(255, 100, 0, 0.6)'
  } );

var serie = graphinstance.newSerie( "serieTest2", {}, 'line' )
  .setLabel( "My serie" )
  .autoAxis()
  .setData( seriedata )
  .setLineColor( 'olive' )
  .setLineWidth( 2 )
  .setLineStyle( 3 );

var serie = graphinstance.newSerie( "serieTest3", {}, 'zone' )
  .setLabel( "My serie" )
  .autoAxis()
  .setData( seriedata2 )
  .setFillColor( 'rgba(200, 100, 100, 0.2)' )
  .setLineColor( 'rgba(200, 100, 100, 0.4)' );

graphinstance.redraw();
graphinstance.drawSeries();