{
"cells": [
{
"cell_type": "markdown",
"metadata": {},
"source": [
"\n",
"## Charts\n",
" \n",
"The python [**Charts**](https://github.com/arnoutaertgeerts/python-highcharts) library enables you to use the amazing [Highcharts](http://www.highcharts.com/) javascript library in your Python code to create beautiful and interactive charts. The library is structured in such a way that anything you can do with Highcharts, you can do with **Charts**... Even right in your the IPython Notebook!\n",
"\n",
"All you need to do to get started is download the library using pip:\n",
"\n",
" pip install charts\n",
" \n",
"And import the libary in Python to get started:"
]
},
{
"cell_type": "code",
"execution_count": 1,
"metadata": {
"collapsed": false
},
"outputs": [],
"source": [
"import charts"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"As is explained in the Highchart [API](http://api.highcharts.com/highcharts#Series), the `plot(series, options)` function of the **Charts** library needs a `series` array and an `options` dictionary object. The `series` array constists of dictionaries with two mandatory fields:\n",
"- `name`: The name of the series\n",
"- `data`: The data of the series\n",
"\n",
"The `options` dictionary contains the options to style the chart. More information on these options can also be found in the Highcharts [API](http://api.highcharts.com/highcharts).\n",
"\n",
"To get a first idea of the library, let's load some example data and use some default options for a time-series plot. In this plot we will use [Highstock](http://www.highcharts.com/stock/demo), a specialized version of highcharts to display timeseries, by setting the option `stock=True` and display the chart inline by setting `show='inline'`."
]
},
{
"cell_type": "code",
"execution_count": 2,
"metadata": {
"collapsed": false
},
"outputs": [
{
"data": {
"text/html": [
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"
"
],
"text/plain": [
""
]
},
"execution_count": 2,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"aapl = charts.data.aapl()\n",
"msft = charts.data.msft()\n",
"ohlc = charts.data.ohlc()\n",
"\n",
"ohlc['display'] = False\n",
"\n",
"series = [\n",
" aapl,\n",
" msft,\n",
" ohlc\n",
"]\n",
"options = charts.options.default()\n",
"\n",
"charts.plot(series, options, height=500, stock=True, show='inline', save='index.html')"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"First, lets go over some extra features of the **Charts** library in comparison with Highcharts.\n",
"- **The variable searcher**: As you can see we added a variable searcher above the chart which can be used to add and remove series from the chart and is indexed by the name of the series. Try typing in `OHLC` and press enter. This is especially usefull if you have a large amount of data you want to plot at the same time.\n",
"- **The settings editor**: When you press the *SETTINGS* button, a JSON editor appears which contains all of the charts settings. You can change every setting of the chart right there! Try changing the title of the chart, located under `object > title > text`.\n",
"\n",
"These features are the main differences between Charts and Highcharts and we try to stay out of your way for the rest. Lets proof that in the following examples!\n",
"
"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### Area chart\n",
"To create an area chart, we simply define some data and set the chart type to *area*."
]
},
{
"cell_type": "code",
"execution_count": 3,
"metadata": {
"collapsed": false
},
"outputs": [
{
"data": {
"text/html": [
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"
"
],
"text/plain": [
""
]
},
"execution_count": 5,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"charts.plot(series, {'chart': {'type': 'spline'}, 'title': {'text': 'A Spline chart'}}, show='inline')"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"... and a scatter chart. All these charts will work separatly and stay interactive even after the notebook was shut down or in a static notebook on the web (Maybe you are even viewing a static notebook now!)"
]
},
{
"cell_type": "code",
"execution_count": 6,
"metadata": {
"collapsed": false
},
"outputs": [
{
"data": {
"text/html": [
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"
"
],
"text/plain": [
""
]
},
"execution_count": 6,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"charts.plot(series, {'chart': {'type': 'scatter'}, 'title': {'text': 'A scatter chart'}}, show='inline')"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### Well that seems easy as pie!\n",
"Yep. Know that you mention it, I wanted to show you another chart type: The Pie chart. This chart type does need a different series format but for everything else behaves just the same as the other charts. "
]
},
{
"cell_type": "code",
"execution_count": 7,
"metadata": {
"collapsed": false
},
"outputs": [
{
"data": {
"text/html": [
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"\n",
"
"
],
"text/plain": [
""
]
},
"execution_count": 8,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"series = [{\n",
" 'type': 'column',\n",
" 'name': 'Jane',\n",
" 'data': [3, 2, 1, 3, 4]\n",
"}, {\n",
" 'type': 'line',\n",
" 'name': 'John',\n",
" 'data': [2, 3, 5, 7, 6]\n",
"}, {\n",
" 'type': 'column',\n",
" 'name': 'Joe',\n",
" 'data': [4, 3, 3, 9, 0]\n",
"}, {\n",
" 'type': 'spline',\n",
" 'name': 'Average',\n",
" 'data': [3, 2.67, 3, 6.33, 3.33],\n",
" 'marker': {\n",
" 'lineWidth': 2,\n",
" 'lineColor': '#90ed7d',\n",
" 'fillColor': 'white'\n",
" }\n",
"}]\n",
"\n",
"charts.plot(series, {'title': {'text': 'A Combination chart'}}, show='inline')"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### What's next? I want more!\n",
"Well we have some more features :)\n",
"- For smaller data series, `charts.plot()` can creates an HTML file with all data embedded in the file. This means you can easily share the HTML file and your friend just has to double click the file to see and interact with your chart!\n",
"- For larger data series (for example 100 series of 4MB+), no browser can load the HTML file (this would mean loading an HTML file of over 400MB!) Charts provides the `charts.plotasync()` method as a solution which has the exact same functionality as the `charts.plot()`. Every series is saved in a separate JSON file and loaded asynchrounously when needed, preventing memory issues\n",
"- Lot's of other things we haven't even tried yet. Due to the direct link between Charts and Highcharts, their are no limitations!\n",
"\n",
" \n",
"\n",
"Now go and try it! If you have any questions, feature requests or want to help visit the [github](https://github.com/arnoutaertgeerts/python-highcharts) page!"
]
}
],
"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.9"
}
},
"nbformat": 4,
"nbformat_minor": 0
}