{
"cells": [
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Basic example for python-highcharts\n",
"====================\n",
"\n",
"All datasets need to input using \"add_data_set\" method\n",
"Highchart options can be either set by \"set_options\" method as showing here or\n",
"construct a option dictionary object and input using \"set_dict_options\" method"
]
},
{
"cell_type": "code",
"execution_count": 1,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"from highcharts import Highchart # import highchart library\n",
"H = Highchart() # setup highchart instance\n",
"\n",
"data = list(range(1,20))\n",
"data2 = list(range(20,1,-1)) # generate some random datasets"
]
},
{
"cell_type": "markdown",
"metadata": {
"collapsed": false
},
"source": [
"Each dataset needs to input using add_data_set and add_data_from_jsonp (not recommended) methods\n",
"\n",
"1. add_data_set(data, series_type=\"line\", name=None, **kwargs)\n",
" 1. data is the dataset for chart \n",
" 2. series_type (default: \"line\") is the type of plot this dataset will be presented \n",
" 3. name is the variable name of dateset(default: Series X) used in python\n",
" 4. kwargs are for parameters in series or plotOptions \n",
" (for detail please ref to highcharts API: http://api.highcharts.com/highcharts#)\n",
"\n",
"2. add_data_from_jsonp(data_src, data_name='json_data', series_type=\"line\", name=None, **kwargs)\n",
" add dataset from the data_src using jsonp. It is converted to jquery function \"$.getJSON\" in javascript environment\n",
" 1. data_src is the url (https) for the dataset\n",
" 2. data_name is the variable name of dataset. This name is used for javascript environment (not in python)\n",
" 3. series_type( default: \"line\") is the type of plot this dataset will be presented\n",
" 4. kwargs are for parameters in series or plotOptions \n",
" (for detail please ref to highcharts API: http://api.highcharts.com/highcharts#)"
]
},
{
"cell_type": "code",
"execution_count": 2,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"H.add_data_set(data2,'line')\n",
"H.add_data_set(data, 'line', \n",
" marker={\n",
" 'states': {\n",
" 'hover': {\n",
" 'enabled': True, \n",
" 'fillColor': 'white', \n",
" 'lineColor': 'red',\n",
" 'lineWidth': 2\n",
" }\n",
" }\n",
" },\n",
" events={\n",
" 'click': \"function (event) { alert(this.name + ' clicked\\\\n' + 'Alt: ' + event.altKey + '\\\\n' + \\\n",
" 'Control: ' + event.ctrlKey + '\\\\n' + 'Shift: ' + event.shiftKey + '\\\\n');}\"}, \n",
" dashStyle='ShortDash'\n",
")"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Set up highchart options using \n",
"* set_options method: \n",
" set_options(option_type, option_dict)\n",
" option_type is the keyword for highchart options\n",
" option_dict is (python) dict for option settings\n",
" (for option details please ref to highcharts API: http://api.highcharts.com/highcharts#)"
]
},
{
"cell_type": "code",
"execution_count": 3,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"H.set_options('chart', {'resetZoomButton': {'relativeTo': 'plot', 'position': {'x': 0, 'y': -30}}})\n",
"H.set_options('xAxis', {'events': {'afterBreaks': 'function(e){return}'}})\n",
"H.set_options('tooltip', {'formatter': 'default_tooltip'})\n",
"H.set_options('xAxis', {'events': {'pointBreak': 'function(e){return}'}})\n",
"H.set_options('chart', {'style': {'fontFamily': 'Lucida Grande, sans-serif', \"fontfontSize\": '12px'}})\n",
"H.set_options('chart', {'style': {\"fontfontSize\": '22px'}})\n",
"H.set_options('chart', {'resetZoomButton': {'position': {'x': 10}}})\n",
"H.set_options('chart', {'resetZoomButton': {'relativeTo': 'chart'}})"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Set up highchart options using \n",
"* set_dict_options method: \n",
" set_dict_options(options)\n",
" option is a (python) dict for options settings\n",
"\n",
"The way to use this method is very similar to the options object as on highcharts docs:\n",
"http://www.highcharts.com/docs/getting-started/how-to-set-options\n",
"1. construct option (python) dict similar to the option object in javascript\n",
"2. input option dict using set_dict_options\n",
"(for all the option details please ref to highcharts API: http://api.highcharts.com/highcharts#)"
]
},
{
"cell_type": "code",
"execution_count": 4,
"metadata": {
"collapsed": false
},
"outputs": [
{
"data": {
"text/html": [
""
],
"text/plain": [
""
]
},
"execution_count": 4,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"options = {\n",
" 'xAxis':{\n",
" 'plotBands': \n",
" [{'color': '#FCFFC5', 'from': 2, 'to': 4}, \n",
" {'color': '#FCFFC5', 'from': 6, 'to': 8},\n",
" {'color': '#FCFFC5', 'from': 10, 'to': 12}]\n",
" }\n",
"}\n",
"H.set_dict_options(options) # input option object using set_dict_options method\n",
"\n",
"H # show the chart on ipython "
]
}
],
"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.6"
}
},
"nbformat": 4,
"nbformat_minor": 0
}