Display markers
Set any style of markers you want through the serie.setMarkers
method. It takes an array of objects as an argument. Every object must have the property type
which defines which shape should be used.
Use the property points
to specify which points should bear this shape. Use the value "all
" for all markers. Use [ number, number ]
to specify individual points or use [ [ from, to ], [ from, to ] ]
to specify ranges. Points and ranges can be mixed together.
Use the property zoom
to magnify the marker. Use fill
, strokeColor
, strokeWidth
to change the style of the marker.
Source code
var graphinstance = new Graph( domGraph, {
wheel: {
type: 'plugin',
plugin: 'zoom',
options: {
direction: 'y'
}
},
plugins: {
'zoom': {}
}
} );
var series = [
[],
[],
[]
];
for ( var i = 0; i < Math.PI * 2; i += 0.1 ) {
series[ 0 ].push( i );
series[ 1 ].push( i );
series[ 2 ].push( i );
series[ 0 ].push( Math.sin( i ) );
series[ 1 ].push( Math.cos( i ) );
series[ 2 ].push( Math.sin( i ) * Math.cos( i ) );
}
graphinstance.newSerie( "sin" )
.setLabel( "f(x) = sin(x)" )
.autoAxis()
.setData( series[ 0 ] )
.setLineColor( '#bd1a1a' )
.showMarkers()
.setMarkers(
[ {
type: 1,
points: [ 'all' ],
fill: true
},
{
type: 4,
points: [
[ 32, 36 ], 55
],
fill: 'transparent',
strokeWidth: 4,
zoom: 1,
fillColor: 'green',
strokeColor: 'orange'
},
{
type: 3,
points: [ 10, 22, 42, [ 57, 59 ] ],
fill: 'transparent',
strokeWidth: 4,
zoom: 1,
strokeColor: 'green'
}
]
);
graphinstance.newSerie( "cos" )
.setLabel( "f(x) = cos(x)" )
.autoAxis()
.setData( series[ 1 ] )
.setLineColor( '#e0a1de' )
.showMarkers()
.setMarkers(
[ {
type: 1,
points: [ 3, 5, 19, 50 ],
fill: true
},
{
type: 4,
points: [ 5, 12, 53, 22 ],
fill: 'transparent',
strokeWidth: 1,
zoom: 3,
strokeColor: 'blue',
},
{
type: 3,
points: [ 18, 32, 29 ],
fill: 'transparent',
strokeWidth: 1,
zoom: 3,
strokeColor: 'olive'
}
] );
graphinstance.redraw();
graphinstance.drawSeries();