jsGraph

Basic

Display a scatter plot using graph.newSerie(name, options, 'scatter'). Setting the data remains the same

To specify how the scattered points have to look like, use serie.setDataStyle( general, modificators ). The parameter general defines what all shapes look like. The parameter modificator (array) allows you to override the shapes for the points at the non-null indices of the array.

Source code

var graphinstance = new Graph( domGraph );

var modificators = [];
modificators[ 20 ] = {
  shape: 'circle',
  r: 12,
  fill: 'rgba(0, 100, 255, 0.3)',
  stroke: 'rgb(0, 150, 255)'
};

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: 'rgb(255, 100, 0)'
    },
    modificators
  );
var shape = graphinstance.newShape( 'line', {
  strokeColor: 'black',
  strokeWidth: 1,
  pos: {
    x: series[ 0 ][ 40 ],
    y: series[ 0 ][ 41 ]
  },
  pos2: {
    x: 2000,
    y: "20px"
  }
} );
shape.draw();
shape.redraw();

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