Embedding JCAMP-DX Spectra in Web Pages - Tutorial

Tools: You will need ChemDoodle web components, an Open Source (GPL) JavaScript library and a spectrum in JCAMP-DX format (example file).


The following assumes the directory "\" as the "root" for placing files and ChemDoodle Web Components v4.6.0. The directory structure can be customized; the structure shown here is only used for illustrative purposes.
1. Download and install the latest ChemDoodle web components in "\".
2. Place a JCAMP-DX in the root directory "\".
3. Place the following HTML code in a php web page (download code) and save it to "\".
// Code written by Andrew Lang Feb 23, 2012
// Code License CC0
// ChemDoodle Web Components License GPL: http://web.chemdoodle.com/installation/download
// load the sample spectrum file
$str = file_get_contents('ONSexample.jdx');
// optional - replace annoying tag added by ACD labs
$str = str_replace("$$ Begin of the data block", "", $str);
// replace unexpected EOL characters with \\n
$str = str_replace("\r\n", "\\n", $str);
$spectrum = str_replace(PHP_EOL, "\\n", $str);
<script type="text/javascript" src="./install/ChemDoodleWeb-libs.js">
<script type="text/javascript" src="./install/ChemDoodleWeb.js">
<script type="text/javascript">
var perspectiveNMR = new ChemDoodle.PerspectiveCanvas('perspectiveNMR', 750, 400);
        perspectiveNMR.specs.plots_showYAxis = true;
        perspectiveNMR.specs.plots_showIntegration = true;
        perspectiveNMR.specs.plots_showGrid = true;
        perspectiveNMR.specs.plots_flipXAxis = true;
        perspectiveNMR.specs.text_font_size = 16;
        perspectiveNMR.specs.text_font_families[0] = "Comic Sans MS";
        perspectiveNMR.specs.text_font_families[1] = "Chalkboard";
        perspectiveNMR.specs.text_font_families[2] = "Marker Felt";
        perspectiveNMR.specs.text_font_families[3] = "cursive";
        perspectiveNMR.specs.text_font_families[4] = 'Sans Serif';
        var spectrumJcampFile = '<?php echo $spectrum; ?>';
        var spectrum = ChemDoodle.readJCAMP(spectrumJcampFile);
        spectrum.xUnit = "PPM";
        spectrum.yUnit = " ";
        spectrum.integrationSensitivity = 0;
<br />
<!-- uncomment to include buttons
<button onclick="perspectiveNMR.specs.plots_showIntegration=!perspectiveNMR.specs.plots_showIntegration;perspectiveNMR.repaint();">Toggle Integration</button>
<button onclick="perspectiveNMR.dblclick();">Reset Spectrum</button>
<button onclick="perspectiveNMR.spectrum.alertMetadata();">Show Header Information</button>
Your webpage should now display the spectrum and look like this. All the display options and buttons can be customized, see the documentation for details.