#!/usr/bin/env python
# coding: utf-8

# ### Javascript functions in options
# 
# 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.
# 
# 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: 

# In[1]:


options = {
    'tooltip': {        
        'formatter': 'function() { return this.point.y; }'
    }
}


# When **Charts** sees this dictionary, it will convert it to json resulting in the following:

# In[2]:


import json
json_options = json.dumps(options)
print json_options


# When you try to plot this, the function will not be recognized and no tooltip will be shown:

# In[3]:


import charts
series = [{
    'data': [[1, 2, 3], [2, 3, 4], [3, 4, 5]]
}]

charts.plot(series, options=options, show='inline', type='line')


# 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 `}`.
# 
# Let's try this:

# In[4]:


options = {
    "tooltip": {
        "formatter": "@#function() { return this.series.name + '<br/>' + this.point.y }@#"
    }
}


# In[5]:


charts.plot(series, options=options, show='inline', type='line')


# 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!