Getting started with the API  

To 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)