{
 "cells": [
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "import pandas as pd\n",
    "import holoviews as hv\n",
    "from holoviews import opts\n",
    "\n",
    "from holoviews.plotting.links import RangeToolLink\n",
    "\n",
    "hv.extension('bokeh')"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "This demo demonstrates how to link two timeseries plots using the ``RangeToolLink`` along the x-axis. This can be useful to get an overview and a detailed view of some data at the same time."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Declare data"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "from bokeh.sampledata.stocks import AAPL\n",
    "\n",
    "aapl_df = pd.DataFrame(AAPL['close'], columns=['close'], index=pd.to_datetime(AAPL['date']))\n",
    "aapl_df.index.name = 'Date'\n",
    "\n",
    "aapl_curve = hv.Curve(aapl_df, 'Date', ('close', 'Price ($)'))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Declare plot"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Having declared a ``Curve`` element containing the AAPL stock closing prices we create two copies of it with different styling. One smaller view which will become the ``source`` of the link which will display the range tool, and a larger ``target`` view whose axes will be linked to the range of the ``RangeTool`` on the ``source``:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": [
    "tgt = aapl_curve.relabel('AAPL close price').opts(width=800, labelled=['y'], toolbar='disable')\n",
    "src = aapl_curve.opts(width=800, height=100, yaxis=None, default_tools=[])\n",
    "\n",
    "RangeToolLink(src, tgt)\n",
    "\n",
    "layout = (tgt + src).cols(1)\n",
    "layout.opts(opts.Layout(shared_axes=False, merge_tools=False))"
   ]
  }
 ],
 "metadata": {
  "language_info": {
   "name": "python",
   "pygments_lexer": "ipython3"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}
