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

Procedure

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>
<script type="text/javascript" src="./install/ChemDoodleWeb.js">
</script>
<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.plots_color="#666699";
        perspectiveNMR.specs.plots_showGrid=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;
        perspectiveNMR.loadSpectrum(spectrum);
</script>
<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.