{
"cells": [
{
"cell_type": "markdown",
"metadata": {
"collapsed": false
},
"source": [
"### Javascript functions in options\n",
"\n",
"For some options, Highcharts allows you to specify a javascript function to dynamically change the behavior of the option (See an [example](http://www.highcharts.com/docs/chart-concepts/tooltip#formatter)). However, when you specify such a function using for example a dictionary in Python, they will not be recognized due to the fact they get converted to JSON making javascript think they are just strings.\n",
"\n",
"Lets take a look at this behavior. We want to use a function to display the number of our chart as the tooltip. So we create an options dictionary containing this function: "
]
},
{
"cell_type": "code",
"execution_count": 1,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"options = {\n",
" 'tooltip': { \n",
" 'formatter': 'function() { return this.point.y; }'\n",
" }\n",
"}"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"When **Charts** sees this dictionary, it will convert it to json resulting in the following:"
]
},
{
"cell_type": "code",
"execution_count": 2,
"metadata": {
"collapsed": false
},
"outputs": [
{
"name": "stdout",
"output_type": "stream",
"text": [
"{\"tooltip\": {\"formatter\": \"function() { return this.point.y; }\"}}\n"
]
}
],
"source": [
"import json\n",
"json_options = json.dumps(options)\n",
"print json_options"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"When you try to plot this, the function will not be recognized and no tooltip will be shown:"
]
},
{
"cell_type": "code",
"execution_count": 3,
"metadata": {
"collapsed": false
},
"outputs": [
{
"name": "stdout",
"output_type": "stream",
"text": [
"Server running in the folder /Users/arnoutaertgeerts/Projects/python-highcharts at 127.0.0.1:54507\n"
]
},
{
"data": {
"text/html": [
"\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",
"\n",
"\n"
],
"text/plain": [
""
]
},
"execution_count": 3,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"import charts\n",
"series = [{\n",
" 'data': [[1, 2, 3], [2, 3, 4], [3, 4, 5]]\n",
"}]\n",
"\n",
"charts.plot(series, options=options, show='inline', type='line')"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"As you can see, the function is formatted as a string and their is no way for javascript to know it actually is a function... To achieve the right behavior, you have to let **Charts** know you don't want the javascript function to be surrounded by double quotes. You can do this by adding `\"@#\"` before the function keyword and after the final closing bracket `}`.\n",
"\n",
"Let's try this:"
]
},
{
"cell_type": "code",
"execution_count": 4,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"options = {\n",
" \"tooltip\": {\n",
" \"formatter\": \"@#function() { return this.series.name + ' ' + this.point.y }@#\"\n",
" }\n",
"}"
]
},
{
"cell_type": "code",
"execution_count": 5,
"metadata": {
"collapsed": false
},
"outputs": [
{
"data": {
"text/html": [
"\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",
"\n",
"\n"
],
"text/plain": [
""
]
},
"execution_count": 5,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"charts.plot(series, options=options, show='inline', type='line')"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"By using the `\"@#\"` character sequence, you can let **Charts** know you don't want the function to be stringified and it will remove the quotes after the JSON is parsed!"
]
}
],
"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
}