.. DO NOT EDIT.
.. THIS FILE WAS AUTOMATICALLY GENERATED BY SPHINX-GALLERY.
.. TO MAKE CHANGES, EDIT THE SOURCE PYTHON FILE:
.. "gallery/ms_bokeh/plot_spectrum_dia_ms_bokeh.py"
.. LINE NUMBERS ARE GIVEN BELOW.

.. only:: html

    .. note::
        :class: sphx-glr-download-link-note

        :ref:`Go to the end <sphx_glr_download_gallery_ms_bokeh_plot_spectrum_dia_ms_bokeh.py>`
        to download the full example code. or to run this example in your browser via Binder

.. rst-class:: sphx-glr-example-title

.. _sphx_glr_gallery_ms_bokeh_plot_spectrum_dia_ms_bokeh.py:


Spectrum of Extracted DIA Data ms_bokeh
=======================================

This example shows a spectrum from extracted data. No binning is applied.

.. GENERATED FROM PYTHON SOURCE LINES 7-30


.. bokeh-plot::
    :source-position: none
    
    from bokeh.plotting import show
    
    import pandas as pd
    import requests
    from io import StringIO
    
    pd.options.plotting.backend = "ms_bokeh"
    
    # download the file for example plotting
    url = "https://github.com/OpenMS/pyopenms_viz/releases/download/v0.1.5/ionMobilityTestFeatureDf.tsv"
    response = requests.get(url)
    response.raise_for_status()  # Check for any HTTP errors
    df = pd.read_csv(StringIO(response.text), sep="\t")
    
    df.plot(
        kind="spectrum",
        x="mz",
        y="int",
        custom_annotation="Annotation",
        annotate_mz=True,
        bin_method="none",
        annotate_top_n_peaks=5,
        aggregate_duplicates=True,
    )
    


.. raw:: html

    <div class="output_subarea output_html rendered_html output_result">
    <div style="display: table;"><div style="display: table-row;"><div style="display: table-cell;"><b title="bokeh.plotting._figure.figure">figure</b>(</div><div style="display: table-cell;">id&nbsp;=&nbsp;'p1597', <span id="p1657" style="cursor: pointer;">&hellip;)</span></div></div><div class="p1656" style="display: none;"><div style="display: table-cell;"></div><div style="display: table-cell;">above&nbsp;=&nbsp;[],</div></div><div class="p1656" style="display: none;"><div style="display: table-cell;"></div><div style="display: table-cell;">align&nbsp;=&nbsp;'auto',</div></div><div class="p1656" style="display: none;"><div style="display: table-cell;"></div><div style="display: table-cell;">aspect_ratio&nbsp;=&nbsp;None,</div></div><div class="p1656" style="display: none;"><div style="display: table-cell;"></div><div style="display: table-cell;">aspect_scale&nbsp;=&nbsp;1,</div></div><div class="p1656" style="display: none;"><div style="display: table-cell;"></div><div style="display: table-cell;">attribution&nbsp;=&nbsp;[],</div></div><div class="p1656" style="display: none;"><div style="display: table-cell;"></div><div style="display: table-cell;">background_fill_alpha&nbsp;=&nbsp;1.0,</div></div><div class="p1656" style="display: none;"><div style="display: table-cell;"></div><div style="display: table-cell;">background_fill_color&nbsp;=&nbsp;'#ffffff',</div></div><div class="p1656" style="display: none;"><div style="display: table-cell;"></div><div style="display: table-cell;">below&nbsp;=&nbsp;[LinearAxis(id='p1609', ...)],</div></div><div class="p1656" style="display: none;"><div style="display: table-cell;"></div><div style="display: table-cell;">border_fill_alpha&nbsp;=&nbsp;1.0,</div></div><div class="p1656" style="display: none;"><div style="display: table-cell;"></div><div style="display: table-cell;">border_fill_color&nbsp;=&nbsp;'#ffffff',</div></div><div class="p1656" style="display: none;"><div style="display: table-cell;"></div><div style="display: table-cell;">center&nbsp;=&nbsp;[Grid(id='p1613', ...), Grid(id='p1618', ...), Label(id='p1645', ...), Label(id='p1646', ...), Label(id='p1647', ...), Label(id='p1648', ...), Label(id='p1649', ...), Span(id='p1650', ...)],</div></div><div class="p1656" style="display: none;"><div style="display: table-cell;"></div><div style="display: table-cell;">context_menu&nbsp;=&nbsp;None,</div></div><div class="p1656" style="display: none;"><div style="display: table-cell;"></div><div style="display: table-cell;">css_classes&nbsp;=&nbsp;[],</div></div><div class="p1656" style="display: none;"><div style="display: table-cell;"></div><div style="display: table-cell;">css_variables&nbsp;=&nbsp;{},</div></div><div class="p1656" style="display: none;"><div style="display: table-cell;"></div><div style="display: table-cell;">disabled&nbsp;=&nbsp;False,</div></div><div class="p1656" style="display: none;"><div style="display: table-cell;"></div><div style="display: table-cell;">elements&nbsp;=&nbsp;[],</div></div><div class="p1656" style="display: none;"><div style="display: table-cell;"></div><div style="display: table-cell;">extra_x_ranges&nbsp;=&nbsp;{},</div></div><div class="p1656" style="display: none;"><div style="display: table-cell;"></div><div style="display: table-cell;">extra_x_scales&nbsp;=&nbsp;{},</div></div><div class="p1656" style="display: none;"><div style="display: table-cell;"></div><div style="display: table-cell;">extra_y_ranges&nbsp;=&nbsp;{},</div></div><div class="p1656" style="display: none;"><div style="display: table-cell;"></div><div style="display: table-cell;">extra_y_scales&nbsp;=&nbsp;{},</div></div><div class="p1656" style="display: none;"><div style="display: table-cell;"></div><div style="display: table-cell;">flow_mode&nbsp;=&nbsp;'block',</div></div><div class="p1656" style="display: none;"><div style="display: table-cell;"></div><div style="display: table-cell;">frame_align&nbsp;=&nbsp;True,</div></div><div class="p1656" style="display: none;"><div style="display: table-cell;"></div><div style="display: table-cell;">frame_height&nbsp;=&nbsp;None,</div></div><div class="p1656" style="display: none;"><div style="display: table-cell;"></div><div style="display: table-cell;">frame_width&nbsp;=&nbsp;None,</div></div><div class="p1656" style="display: none;"><div style="display: table-cell;"></div><div style="display: table-cell;">height&nbsp;=&nbsp;500,</div></div><div class="p1656" style="display: none;"><div style="display: table-cell;"></div><div style="display: table-cell;">height_policy&nbsp;=&nbsp;'auto',</div></div><div class="p1656" style="display: none;"><div style="display: table-cell;"></div><div style="display: table-cell;">hidpi&nbsp;=&nbsp;True,</div></div><div class="p1656" style="display: none;"><div style="display: table-cell;"></div><div style="display: table-cell;">hold_render&nbsp;=&nbsp;False,</div></div><div class="p1656" style="display: none;"><div style="display: table-cell;"></div><div style="display: table-cell;">js_event_callbacks&nbsp;=&nbsp;{},</div></div><div class="p1656" style="display: none;"><div style="display: table-cell;"></div><div style="display: table-cell;">js_property_callbacks&nbsp;=&nbsp;{},</div></div><div class="p1656" style="display: none;"><div style="display: table-cell;"></div><div style="display: table-cell;">left&nbsp;=&nbsp;[LinearAxis(id='p1614', ...)],</div></div><div class="p1656" style="display: none;"><div style="display: table-cell;"></div><div style="display: table-cell;">lod_factor&nbsp;=&nbsp;10,</div></div><div class="p1656" style="display: none;"><div style="display: table-cell;"></div><div style="display: table-cell;">lod_interval&nbsp;=&nbsp;300,</div></div><div class="p1656" style="display: none;"><div style="display: table-cell;"></div><div style="display: table-cell;">lod_threshold&nbsp;=&nbsp;2000,</div></div><div class="p1656" style="display: none;"><div style="display: table-cell;"></div><div style="display: table-cell;">lod_timeout&nbsp;=&nbsp;500,</div></div><div class="p1656" style="display: none;"><div style="display: table-cell;"></div><div style="display: table-cell;">margin&nbsp;=&nbsp;None,</div></div><div class="p1656" style="display: none;"><div style="display: table-cell;"></div><div style="display: table-cell;">match_aspect&nbsp;=&nbsp;False,</div></div><div class="p1656" style="display: none;"><div style="display: table-cell;"></div><div style="display: table-cell;">max_height&nbsp;=&nbsp;None,</div></div><div class="p1656" style="display: none;"><div style="display: table-cell;"></div><div style="display: table-cell;">max_width&nbsp;=&nbsp;None,</div></div><div class="p1656" style="display: none;"><div style="display: table-cell;"></div><div style="display: table-cell;">min_border&nbsp;=&nbsp;0,</div></div><div class="p1656" style="display: none;"><div style="display: table-cell;"></div><div style="display: table-cell;">min_border_bottom&nbsp;=&nbsp;None,</div></div><div class="p1656" style="display: none;"><div style="display: table-cell;"></div><div style="display: table-cell;">min_border_left&nbsp;=&nbsp;None,</div></div><div class="p1656" style="display: none;"><div style="display: table-cell;"></div><div style="display: table-cell;">min_border_right&nbsp;=&nbsp;None,</div></div><div class="p1656" style="display: none;"><div style="display: table-cell;"></div><div style="display: table-cell;">min_border_top&nbsp;=&nbsp;None,</div></div><div class="p1656" style="display: none;"><div style="display: table-cell;"></div><div style="display: table-cell;">min_height&nbsp;=&nbsp;None,</div></div><div class="p1656" style="display: none;"><div style="display: table-cell;"></div><div style="display: table-cell;">min_width&nbsp;=&nbsp;None,</div></div><div class="p1656" style="display: none;"><div style="display: table-cell;"></div><div style="display: table-cell;">name&nbsp;=&nbsp;None,</div></div><div class="p1656" style="display: none;"><div style="display: table-cell;"></div><div style="display: table-cell;">outline_line_alpha&nbsp;=&nbsp;1.0,</div></div><div class="p1656" style="display: none;"><div style="display: table-cell;"></div><div style="display: table-cell;">outline_line_cap&nbsp;=&nbsp;'butt',</div></div><div class="p1656" style="display: none;"><div style="display: table-cell;"></div><div style="display: table-cell;">outline_line_color&nbsp;=&nbsp;'#e5e5e5',</div></div><div class="p1656" style="display: none;"><div style="display: table-cell;"></div><div style="display: table-cell;">outline_line_dash&nbsp;=&nbsp;[],</div></div><div class="p1656" style="display: none;"><div style="display: table-cell;"></div><div style="display: table-cell;">outline_line_dash_offset&nbsp;=&nbsp;0,</div></div><div class="p1656" style="display: none;"><div style="display: table-cell;"></div><div style="display: table-cell;">outline_line_join&nbsp;=&nbsp;'bevel',</div></div><div class="p1656" style="display: none;"><div style="display: table-cell;"></div><div style="display: table-cell;">outline_line_width&nbsp;=&nbsp;1,</div></div><div class="p1656" style="display: none;"><div style="display: table-cell;"></div><div style="display: table-cell;">output_backend&nbsp;=&nbsp;'canvas',</div></div><div class="p1656" style="display: none;"><div style="display: table-cell;"></div><div style="display: table-cell;">renderers&nbsp;=&nbsp;[GlyphRenderer(id='p1641', ...)],</div></div><div class="p1656" style="display: none;"><div style="display: table-cell;"></div><div style="display: table-cell;">reset_policy&nbsp;=&nbsp;'standard',</div></div><div class="p1656" style="display: none;"><div style="display: table-cell;"></div><div style="display: table-cell;">resizable&nbsp;=&nbsp;False,</div></div><div class="p1656" style="display: none;"><div style="display: table-cell;"></div><div style="display: table-cell;">right&nbsp;=&nbsp;[],</div></div><div class="p1656" style="display: none;"><div style="display: table-cell;"></div><div style="display: table-cell;">sizing_mode&nbsp;=&nbsp;None,</div></div><div class="p1656" style="display: none;"><div style="display: table-cell;"></div><div style="display: table-cell;">styles&nbsp;=&nbsp;{},</div></div><div class="p1656" style="display: none;"><div style="display: table-cell;"></div><div style="display: table-cell;">stylesheets&nbsp;=&nbsp;[],</div></div><div class="p1656" style="display: none;"><div style="display: table-cell;"></div><div style="display: table-cell;">subscribed_events&nbsp;=&nbsp;PropertyValueSet(),</div></div><div class="p1656" style="display: none;"><div style="display: table-cell;"></div><div style="display: table-cell;">syncable&nbsp;=&nbsp;True,</div></div><div class="p1656" style="display: none;"><div style="display: table-cell;"></div><div style="display: table-cell;">tags&nbsp;=&nbsp;[],</div></div><div class="p1656" style="display: none;"><div style="display: table-cell;"></div><div style="display: table-cell;">title&nbsp;=&nbsp;Title(id='p1600', ...),</div></div><div class="p1656" style="display: none;"><div style="display: table-cell;"></div><div style="display: table-cell;">title_location&nbsp;=&nbsp;'above',</div></div><div class="p1656" style="display: none;"><div style="display: table-cell;"></div><div style="display: table-cell;">toolbar&nbsp;=&nbsp;Toolbar(id='p1606', ...),</div></div><div class="p1656" style="display: none;"><div style="display: table-cell;"></div><div style="display: table-cell;">toolbar_inner&nbsp;=&nbsp;False,</div></div><div class="p1656" style="display: none;"><div style="display: table-cell;"></div><div style="display: table-cell;">toolbar_location&nbsp;=&nbsp;'above',</div></div><div class="p1656" style="display: none;"><div style="display: table-cell;"></div><div style="display: table-cell;">toolbar_sticky&nbsp;=&nbsp;True,</div></div><div class="p1656" style="display: none;"><div style="display: table-cell;"></div><div style="display: table-cell;">visible&nbsp;=&nbsp;True,</div></div><div class="p1656" style="display: none;"><div style="display: table-cell;"></div><div style="display: table-cell;">width&nbsp;=&nbsp;500,</div></div><div class="p1656" style="display: none;"><div style="display: table-cell;"></div><div style="display: table-cell;">width_policy&nbsp;=&nbsp;'auto',</div></div><div class="p1656" style="display: none;"><div style="display: table-cell;"></div><div style="display: table-cell;">x_range&nbsp;=&nbsp;Range1d(id='p1651', ...),</div></div><div class="p1656" style="display: none;"><div style="display: table-cell;"></div><div style="display: table-cell;">x_scale&nbsp;=&nbsp;LinearScale(id='p1607', ...),</div></div><div class="p1656" style="display: none;"><div style="display: table-cell;"></div><div style="display: table-cell;">y_range&nbsp;=&nbsp;Range1d(id='p1652', ...),</div></div><div class="p1656" style="display: none;"><div style="display: table-cell;"></div><div style="display: table-cell;">y_scale&nbsp;=&nbsp;LinearScale(id='p1608', ...))</div></div></div>
    <script>
    (function() {
      let expanded = false;
      const ellipsis = document.getElementById("p1657");
      ellipsis.addEventListener("click", function() {
        const rows = document.getElementsByClassName("p1656");
        for (let i = 0; i < rows.length; i++) {
          const el = rows[i];
          el.style.display = expanded ? "none" : "table-row";
        }
        ellipsis.innerHTML = expanded ? "&hellip;)" : "&lsaquo;&lsaquo;&lsaquo;";
        expanded = !expanded;
      });
    })();
    </script>

    </div>
    <br />
    <br />

.. code-block:: Python


    import pandas as pd
    import requests
    from io import StringIO

    pd.options.plotting.backend = "ms_bokeh"

    # download the file for example plotting
    url = "https://github.com/OpenMS/pyopenms_viz/releases/download/v0.1.5/ionMobilityTestFeatureDf.tsv"
    response = requests.get(url)
    response.raise_for_status()  # Check for any HTTP errors
    df = pd.read_csv(StringIO(response.text), sep="\t")

    df.plot(
        kind="spectrum",
        x="mz",
        y="int",
        custom_annotation="Annotation",
        annotate_mz=True,
        bin_method="none",
        annotate_top_n_peaks=5,
        aggregate_duplicates=True,
    )


.. rst-class:: sphx-glr-timing

   **Total running time of the script:** (0 minutes 0.343 seconds)


.. _sphx_glr_download_gallery_ms_bokeh_plot_spectrum_dia_ms_bokeh.py:

.. only:: html

  .. container:: sphx-glr-footer sphx-glr-footer-example

    .. container:: binder-badge

      .. image:: images/binder_badge_logo.svg
        :target: https://notebooks.gesis.org/binder/v2/gh/OpenMS/pyopenms_viz/gh_pages?filepath=notebooks/gallery/ms_bokeh/plot_spectrum_dia_ms_bokeh.ipynb
        :alt: Launch binder
        :width: 150 px

    .. container:: sphx-glr-download sphx-glr-download-jupyter

      :download:`Download Jupyter notebook: plot_spectrum_dia_ms_bokeh.ipynb <plot_spectrum_dia_ms_bokeh.ipynb>`

    .. container:: sphx-glr-download sphx-glr-download-python

      :download:`Download Python source code: plot_spectrum_dia_ms_bokeh.py <plot_spectrum_dia_ms_bokeh.py>`

    .. container:: sphx-glr-download sphx-glr-download-zip

      :download:`Download zipped: plot_spectrum_dia_ms_bokeh.zip <plot_spectrum_dia_ms_bokeh.zip>`


.. only:: html

 .. rst-class:: sphx-glr-signature

    `Gallery generated by Sphinx-Gallery <https://sphinx-gallery.github.io>`_