spectrum-plot2 v0.1.0
What is it for?
DEMO & DEMO with markers
Displaying line charts like that
Instanciate
To create an instance of SpectrumPlot2, we need:
- a parent div (its ID as a String or directly the DOM object)
- a desired width and height
var sp = new SpectrumPlot2.SpectrumPlot2( "chartDiv", 400, 300 );
Feed with some data
Each spectrum has:
- a name, to show as a label
- an
Array
of numbers, the data itself - a color, to apply to the line (must have css format)
// we create an array of size 100
var series = new Array(100);
// filling the data array with random values
for(var i=0; i<seriesSize; i++){
series[i] = Math.random();
}
// giving the data
var seriesIndex = sp.addSpectrum(
"Intensities", // name
series, // the data
"#FF0000" // the color
)
Note that wothout setting teh labels along the x
axis, the series will not display properly. If labels do not matter, we can use automatic mode:
// using no argument, a list of incremental index is created
sp.setLabels();
If labels matter, we have to define an array that contains all the labels. It's important to know that it is the label array that defines the length of the displayed data. If shorter than the spectrum's data, then the spectrum plot will be cut.
// in this example, only the 8 first point of the spectrum(s) will be displayed
sp.setLabels([
'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h'
]);
Draw
When having several spectrum, it is usually more optimal to be sure all the spectrum are added/updated before we can re-draw. This is why SpectrumPlot2 needs an explicit call:
sp.draw();
Updating a spectrum
Case 1
each updated spectrum keep its previous length: we can just update the array, since it's a reference, and call .draw()
.
Check the examples/index.html.
Case 2
the spectrums' length change over time, or anyway it's just easier to send a brand new Array (read: new reference):
var sp = new SpectrumPlot2.SpectrumPlot2( "chartDiv", 400, 300 );
var seriesSize = Math.round( Math.random() * 100 );
var redSeries = new Array(seriesSize);
var greenSeries = new Array(seriesSize);
var blueSeries = new Array(seriesSize);
var alphaSeries = new Array(seriesSize);
generateFakeData();
var redIndex = sp.addSpectrum(
"Red",
redSeries,
"rgba(250, 80, 80, 0.8)"
)
var greenIndex = sp.addSpectrum(
"Green",
greenSeries,
"rgba(80, 250, 80, 0.8)"
)
var blueIndex = sp.addSpectrum(
"Blue",
blueSeries,
"rgba(80, 80, 250, 0.8)"
)
var alphaIndex = sp.addSpectrum(
"Alpha",
blueSeries,
"rgba(120, 120, 120, 0.8)"
)
sp.setLabels();
sp.draw();
function generateFakeData(){
for(var i=0; i<seriesSize; i++){
redSeries[i] = Math.random() * 10;
greenSeries[i] = Math.random() * 10 + 20;
blueSeries[i] = Math.random() * 10 + 40;
alphaSeries[i] = Math.random() * 10 + 60;
}
}
addEventListener('mousemove', moveMouse, false);
function moveMouse(evt){
seriesSize = Math.round( Math.random() * 100 );
// create new reference
redSeries = new Array(seriesSize);
greenSeries = new Array(seriesSize);
blueSeries = new Array(seriesSize);
alphaSeries = new Array(seriesSize);
generateFakeData();
// update arrays as new reference
sp.updateSpectrum( redIndex, redSeries);
sp.updateSpectrum( greenIndex, greenSeries);
sp.updateSpectrum( blueIndex, blueSeries);
sp.updateSpectrum( alphaIndex, alphaSeries);
sp.setLabels();
// redraw the chart
sp.draw();
}
Here, we:
- have spectrum of a random length
- Keep track of the index of each spectrum by keeping the value returned by
.addSpectrum()
- When the mouse is moving, we create new arrays, again of a random length
- we update each spectrum with a new array (using its index)
- reacreate auto labels
- re-draw
This piece of code is taken from examples/newArrays.html. Obviously, this is not optimal way to deal with this case since the length of each spectrum remains the same all along.
Add marker from pointer position
Line in this example, SpectrumPlot2 allows to have 2 vertical lines for:
- showing the current pointer position, moves with the pointer
- showing the last clicked position
To enable this feature:
var sp = new SpectrumPlot2.SpectrumPlot2( "chartDiv", 400, 300 );
// enabling the vertical bars
sp.enableMarkers();
...
Get the data
Retriveing the last clik data is possible using .getMarkerData()
. It will return an Array
where each element has a curve's label
, a x
value and a y
value. There are as many elements as there are curves on the plot.
Color
The default color for these markers are black and blue but they can be changed:
var sp = new SpectrumPlot2.SpectrumPlot2( "chartDiv", 400, 300 );
sp.enableMarkers();
sp.setMarkerColor("hover", "#F00");
sp.setMarkerColor("click", "#990");
Events
We can add two kinds of callbacks:
"click"
, called whenever the plot is clicked"hover"
, called whenever the plot is hovered by the pointer
Both are defined with the method .on()
, like follows:
var sp = new SpectrumPlot2.SpectrumPlot2( "chartDiv", 400, 300 );
// adding a callbacks for clicking on the plot
sp.on("click", function(data){
console.log( data );
})
// adding a callbacks for hovering the plot
sp.on("hover", function(data){
console.log( data );
})
in Both case, the data
object is an Array
that contains as many element as there are curves displayed on the plot. Each element contains the label
of the curve, the x
position and the y
value.
Note: even though this feature is close to the vertical marker, markers don't need to be anabled for the callbacks to work.
License
MIT
3 years ago