You are using an unsupported browser. Please upgrade your browser to a newer version to get the best experience on NP-MRD.
Upload your file here to generate the graph:
Getting started with the API
Download JSpectraViewerTo get started with the JSpectraViewer API, you can download the library by clicking the button above. Once you have downloaded the library, include the .js and the .css files in your HTML file:
<link rel="stylesheet" href="/jspectraviewer.min.css">
<script src="/jspectraviewer.min.js"></script>
For creating your first JSpectraViewer instances:
var viewer = new JSpectraViewer({ // 1D
width: $("#viewer-container").width(),
height: 400,
drag_drop_load: false,
zoom_max: 500,
axis_y_show: true,
axis_y_lock: 0.04,
axis_x_title: "ppm",
axis_y_title: "Intensity",
axis_y_gutter: 120,
axis_x_gutter: 80,
x_tick_count: 15,
cluster_navigation_id: "#cluster-navigation",
simplify_tolerance: 0.01,
min_boundaries: {x: [0, 1], y: [0, 1.19]},
highlight: {
restriction_spectrum_id: "Assignment",
element_type: "peak",
display: { fill: "rgba(238, 238, 255, 0.7)" },
visible_only: false
},
assignment_table: {
container_id: "#assignments",
edit_mode: false
},
select: {
element_type: "peak",
allow_multiselect: true,
allow_adjust: false,
allow_peak_creation: false,
show_indicators: true,
display: { fill: "rgba(208, 208, 255, 0.75)" }
},
structure: {
container_id: "#structure",
use_jsmol: true,
show_atom_numbers: true,
show_hydrogen: true,
width: 400,
height: 400
},
var sv = new JSV.SpectraViewer2D("#viewer", {
debug: false,
width: $('#viewer-container').width(),
height: "800",
zoom_min: 0.1,
cluster_navigation_id: '#cluster-navigation',
simplify_tolerance: 0.01,
highlight: {
restriction_spectrum_id: 'Assignment',
element_type: 'peak',
display: { fill: 'rgba(238, 238, 255, 0.7)' },
visible_only: false
},
});
For loading a spectrum:
viewer.add_nmrml_data(nmrml_string)