jsGraph - Scientific data displayed in your browser
jsGraph is a javascript library that can be used to renders scientific data in your browser in the form of graphs and charts. Its primary purpose is to display line plots, scatter plots, contour plots or zone plots, but a powerful shape drawing tool and API is available to annotate the data on the graph.
jsGraph works in most modern browsers (Chrome, Firefox, Safari, IE >= v10). It uses the SVG technology to render the graphs, so that the file can then be exported and readily used for scientific publications.
Documentation
The documentation is available in /docs/build or directly hosted on ReadTheDocs.
>> Documentation <<
Demonstration
Code used to create this example:
const data = [[-1, -0.95, -0.8999999999999999, -0.8499999999999999, -0.7999999999999998, -0.7499999999999998, -0.6999999999999997, -0.6499999999999997, -0.5999999999999996, -0.5499999999999996, -0.4999999999999996, -0.4499999999999996, -0.39999999999999963, -0.34999999999999964, -0.29999999999999966, -0.24999999999999967, -0.19999999999999968, -0.1499999999999997, -0.09999999999999969, -0.049999999999999684, 3.191891195797325e-16, 0.05000000000000032, 0.10000000000000032, 0.15000000000000033, 0.20000000000000034, 0.25000000000000033, 0.3000000000000003, 0.3500000000000003, 0.4000000000000003, 0.4500000000000003, 0.5000000000000003, 0.5500000000000004, 0.6000000000000004, 0.6500000000000005, 0.7000000000000005, 0.7500000000000006, 0.8000000000000006, 0.8500000000000006, 0.9000000000000007, 0.9500000000000007, 1.0000000000000007, 1.0500000000000007, 1.1000000000000008, 1.1500000000000008, 1.2000000000000008, 1.2500000000000009, 1.300000000000001, 1.350000000000001, 1.40000000000000, 1.450000000000001], [-20.499747544838275, -20.499659532985874, -20.499540838115898, -20.49938076340126, -20.499164882847428, -20.4988737412163, -20.498481100712695, -20.497951576424207, -20.497237447419362, -20.49627435611903, -20.494975508366757, -20.493223851506187, -20.490861525550883, -20.48767563678195, -20.483379071684652, -20.477584622168607, -20.469770090226536, -20.45923122725008, -20.44501826687575, -20.425850331676905, -20.4, -20.365137630064282, -20.318121411753218, -20.25471422548477, -20.16920179137358, -20.053877696141516, -19.89834888820463, -19.68859905188818, -19.405725451695528, -19.024235410553235, -18.509748899999998, -17.81590019886833, -16.88015939675398, -15.618197174567083, -13.916285014032407, -11.621045940111184, -8.52563212933044, -4.351083704794043, 1.2788112346498295, 8.87142097487483, 19.11099441051224, 32.920325817120975, 51.543917424350724, 76.66013443300987, 110.53245992908506, 156.21348084543214, 217.8199882640481, 300.90398420341603, 412.9530301645426, 564.065029038078]];;
const wave1 = Graph.newWaveform().setData(data[1], data[0]);
const wave2 = wave1.duplicate().math((x, y) => x * y);
var g = new Graph("graph-example-1", {});
g.resize(400, 300);
var jV = g
.newSerie("jV", {
lineColor: 'red',
lineWidth: 2,
markers: true,
markerStyles: {
unselected: {
default: {
shape: 'rect',
strokeWidth: 1,
x: -2,
y: -2,
width: 4,
height: 4,
stroke: 'rgb( 200, 0, 0 )',
fill: 'white'
}
},
modifiers: (x, y, index, domShape, style) => index % 5 == 0 ? style : false
}
})
.autoAxis()
.setWaveform(wave1)
var pV = g
.newSerie("pV")
.setXAxis(g.getXAxis())
.setYAxis(g.getRightAxis())
.setWaveform(wave2);
g
.getXAxis()
.setUnit("V")
.setUnitWrapper("(", ")")
.setLabel("Voltage")
.secondaryGridOff();
g
.getLeftAxis()
.setUnit("mA cm^-2")
.setUnitWrapper("(", ")")
.setLabel("Current density")
.secondaryGridOff()
.forceMin(-25)
.forceMax(60);
g
.getRightAxis()
.setUnit("mW cm^-2")
.setUnitWrapper("(", ")")
.setLabel("Power density")
.gridsOff();
g.getBottomAxis().setAxisDataSpacing(0, 0.3);
g.getRightAxis().adaptTo(g.getLeftAxis(), 0, 0, "min");
g
.getLeftAxis()
.setAxisColor('red')
.setPrimaryTicksColor('red')
.setSecondaryTicksColor('rgba( 150, 10, 10, 0.9 )')
.setTicksLabelColor('#880000')
.setLabelColor('red');
g.autoScaleAxes();
g.draw();
Installing
npm install node-jsgraph
Usage
You can use AMD, CommonJS or Browser Global definition thanks to the UMD loader. Just use
define(["path/to/jsgraph.min.js"], function(Graph) {
});
or
const Graph = require('jsGraph');
or, if you include the distribution directly, use the Graph
variable exported at the window
level.
How to contribute
- Contributions to jsGraph are greatly encouraged. You are welcome to develop your own features and we'll do our best to integrate them through your pull requests.
- jsGraph is in a continuously developing state. Although it's quite stable, some bugs do still appear here and there. If you encounter some of them, please report them in the issue section of the github so that we can fix them ASAP.
- If you have great ideas, if you know features that other softwares do better than jsGraph, just let us know ! We're always trying to expand our range of functionnalities.
License
MIT