{
"cells": [
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## Asynchronous charts\n",
"\n",
"In this example we will take a look at asynchronous charts. Asynchronous charts offer some advantages over the normal synchronous charts:\n",
"\n",
"- The chart can hold any (!) amount of data\n",
"- You can draw a chart and add new data to the chart afterwards\n",
"\n",
"It does this by first making a separate JSON file of your series objects and stores them in a dedicated directory. When you select a variable from the variable-selector, the chart will load this data and display it! At any time you can add a series to the directory and notify the chart by pressing the `update` button.\n",
"\n",
" \n",
"\n",
"Let's try this out. Import the library:"
]
},
{
"cell_type": "code",
"execution_count": 1,
"metadata": {
"collapsed": false
},
"outputs": [
{
"name": "stdout",
"output_type": "stream",
"text": [
"Server running in the folder /home/arnout/Projects/Work/python-highcharts at 127.0.0.1:47688\n"
]
}
],
"source": [
"import charts"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Notice the line telling us their is a server running. This server is run in a separate thread and allows the use of asynchronous charts. You don't need to care so much just remember when you browse to the address listed there you can view your asynchronous charts (Charts will open a page at this address so you probably won't need it).\n",
"\n",
" \n",
"\n",
"As in the previous example, lets load some data and default options. We set the title of the chart to `Asynchronous Chart`"
]
},
{
"cell_type": "code",
"execution_count": 2,
"metadata": {
"collapsed": false
},
"outputs": [],
"source": [
"aapl = charts.data.aapl()\n",
"msft = charts.data.msft()\n",
"ohlc = charts.data.ohlc()\n",
"\n",
"series = [\n",
" aapl,\n",
" msft,\n",
" ohlc\n",
"]\n",
"options = dict()\n",
"options['title'] = dict(text='Asynchronous Chart')"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### An inline chart\n",
"\n",
"We start by making an inline chart. As opposed to the syncronous charts, the `plotasync()` method returns a `Chart` object we will need to interact with the chart after it has been build. Create the chart and save it inside the `inline_chart` variable:"
]
},
{
"cell_type": "code",
"execution_count": 9,
"metadata": {
"collapsed": false
},
"outputs": [],
"source": [
"inline_chart = charts.plotasync(\n",
" [aapl], options='testfile', stock=True, show='inline', save='stocks', display=True)"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"We can notice two things:\n",
"\n",
"1. We included a new option `purge=True`\n",
"2. The chart is not displayed immediately \n",
"\n",
"An asyncronous chart saves the series data in separate json files inside a directory (given by the `save='stocks'` parameter) which can already exist. If set `purge=True` all the contents of the directory will be deleted. Go and check out the folder from which you executed this code and you will see a new folder called `stocks` where you chart data is stored.\n",
"\n",
"To display the chart, just call the `show()`method"
]
},
{
"cell_type": "code",
"execution_count": 10,
"metadata": {
"collapsed": false,
"scrolled": false
},
"outputs": [
{
"data": {
"text/html": [
"\n",
"\n",
"\n",
"\n",
"
\n",
"
\n",
"
\n",
" \n",
"
\n",
"
\n",
"
\n",
" \n",
" \n",
"
\n",
"\n",
"
\n",
"
\n",
"\n",
"
\n",
"
\n",
"
\n",
"
Adjust chart settings
\n",
"
\n",
"
\n",
" \n",
"
\n",
"
\n",
"
\n",
" \n",
"
\n",
"
\n",
" \n",
"\n",
"
\n",
"
\n",
"
\n",
"
\n",
"
\n",
"
\n",
"\n",
"
\n",
" \n",
"
\n",
"
\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n"
],
"text/plain": [
""
]
},
"execution_count": 10,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"inline_chart.show()"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### Add data asynchronously\n",
"\n",
"The chart works exactly the same as the synchronous chart. Lets try something we cannot do with the boring synchronous charts: \n",
"\n",
"Add new data to the chart by calling the `plot()` method:"
]
},
{
"cell_type": "code",
"execution_count": 8,
"metadata": {
"collapsed": false
},
"outputs": [],
"source": [
"inline_chart.plot([msft, ohlc], display=['MSFT'])"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Nothing happened? Nop, let the chart know you updated it by clicking the **update** button. Afterwards try typing in `OHLC`. You can add as much data as you want once the chart is created!"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### A chart in a new tab\n",
"\n",
"Just like the normal charts, you can also open asynchronous charts in a new tab. Do this by setting `inline='tab'`. This can be usefull when you don't want to clutter your notebook with lots of charts or when you are operating from a normal python or ipython shell. The chart in the tab works exactly the same way as the inline chart.\n",
"\n",
"Lets try it:"
]
},
{
"cell_type": "code",
"execution_count": 9,
"metadata": {
"collapsed": false
},
"outputs": [
{
"name": "stdout",
"output_type": "stream",
"text": [
"Opening new tab...\n"
]
}
],
"source": [
"tab_chart = charts.plotasync(\n",
" msft, options, height=500, show='tab', purge=True, stock=True, save='different-stocks', live=True)\n",
"tab_chart.show()"
]
},
{
"cell_type": "markdown",
"metadata": {
"collapsed": false
},
"source": [
"Note that we saved the chart to a different directory (`temp-2`) to avoid data mixing."
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### Coupled charts\n",
"\n",
"**What would happen if we saved the above data to the same directory and set `purge=True`?**. Asynchronous charts with the same name will always share the exact same data. This means that if you create a chart with the same name as the previous chart and set `purge=False`, the data of the new chart will be added to the data of the old chart and all the data will be available to both charts!\n",
"\n",
"The above can be very usefull when you want the same data be visualised in several ways. Let's try this by creating a synchronized line and bar chart.\n",
"Start by creating a new bar chart in the directory `chart` and set `purge=True` to clean the directory first:"
]
},
{
"cell_type": "code",
"execution_count": 10,
"metadata": {
"collapsed": false,
"scrolled": false
},
"outputs": [
{
"name": "stdout",
"output_type": "stream",
"text": [
"Opening new tab...\n"
]
}
],
"source": [
"bar = charts.plotasync(\n",
" dict(data=[1,2,4,9], name=\"A\"), \n",
" options=dict(chart=dict(type='bar')),\n",
" show='tab', purge=True, save='temp-3', display=True)\n",
"bar.show()"
]
},
{
"cell_type": "markdown",
"metadata": {
"collapsed": false
},
"source": [
"Now create an area chart in the same directory but make sure to set `purge=False`. Also add a new data series called `\"C\"`."
]
},
{
"cell_type": "code",
"execution_count": 11,
"metadata": {
"collapsed": false,
"scrolled": false
},
"outputs": [
{
"data": {
"text/html": [
"\n",
"\n",
"\n",
"\n",
"
\n",
"
\n",
"
\n",
" \n",
"
\n",
"
\n",
"
\n",
" \n",
" \n",
"
\n",
"\n",
"
\n",
"
\n",
"\n",
"
\n",
"
\n",
"
\n",
"
Adjust chart settings
\n",
"
\n",
"
\n",
" \n",
"
\n",
"
\n",
"
\n",
" \n",
"
\n",
"
\n",
"
\n",
"
\n",
"
\n",
"
\n",
"\n",
"
\n",
" \n",
"
\n",
"
\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n"
],
"text/plain": [
""
]
},
"execution_count": 11,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"area = charts.plotasync(\n",
" dict(data=[9,3,6,9], name=\"C\"), \n",
" type='area',\n",
" show='inline', purge=False, save='temp-3', display=True)\n",
"area.show()"
]
},
{
"cell_type": "markdown",
"metadata": {
"collapsed": false
},
"source": [
"Because both charts share the same name, they will share the same data! Try to plot `A` and `C` in both charts (*After pressing the update button*).\n",
"\n",
"When you add data to one of the charts, this data will be available to both. If you set `display=True` the data will be immedialty visible in all the charts sharing this name. If you set `display=False`, the data will still be their but will not be plotted immediatly and has to be added through the variable selector.\n",
"\n",
"Lets try this by adding a series to the area chart and immediatly plot and do the same for the bar chart but keep it hidden:"
]
},
{
"cell_type": "code",
"execution_count": 12,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"area.plot([10,10,6,0], 'B', display=False)"
]
},
{
"cell_type": "code",
"execution_count": 13,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"bar.plot([0,2,8,20], 'D', display=True)"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"To plot `D` just search for it in the variable selector ;)"
]
}
],
"metadata": {
"kernelspec": {
"display_name": "Python 2",
"language": "python",
"name": "python2"
},
"language_info": {
"codemirror_mode": {
"name": "ipython",
"version": 2
},
"file_extension": ".py",
"mimetype": "text/x-python",
"name": "python",
"nbconvert_exporter": "python",
"pygments_lexer": "ipython2",
"version": "2.7.10"
}
},
"nbformat": 4,
"nbformat_minor": 0
}