ChemDoodleTutorial

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 // 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); ?>    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 = ''; var spectrum = ChemDoodle.readJCAMP(spectrumJcampFile); spectrum.xUnit = "PPM"; spectrum.yUnit = " "; spectrum.integrationSensitivity = 0; perspectiveNMR.loadSpectrum(spectrum);

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