{
"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": [
"<iframe style=\"border:0;outline:none;overflow:hidden\" srcdoc=\"<!DOCTYPE html>\n",
"<html lang="en">\n",
" <head>\n",
" <meta charset="utf-8" />\n",
" <link href="https://www.highcharts.com/highslide/highslide.css" rel="stylesheet" />\n",
" <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>\n",
" <script type="text/javascript" src="https://code.highcharts.com/highcharts.js"></script>\n",
" <script type="text/javascript" src="https://code.highcharts.com/highcharts-more.js"></script>\n",
" <script type="text/javascript" src="https://code.highcharts.com/modules/exporting.js"></script>\n",
" </head>\n",
" <body style="margin:0;padding:0">\n",
" <div id="container" style="">Loading....</div>\n",
"\n",
"\n",
" <script>\n",
" $(function(){\n",
"\n",
"\n",
" \n",
"\n",
"\n",
"\n",
"\n",
" Highcharts.setOptions({"lang": {}, "global": {}});\n",
" var option = {"loading": {}, "subtitle": {}, "xAxis": {"plotBands": [{"color": "#FCFFC5", "to": 4, "from": 2}, {"color": "#FCFFC5", "to": 8, "from": 6}, {"color": "#FCFFC5", "to": 12, "from": 10}], "events": {"afterBreaks": function(e){return}, "pointBreak": function(e){return}}}, "title": {"text": "A New Highchart"}, "series": {}, "labels": {}, "yAxis": {}, "chart": {"style": {"fontFamily": "Lucida Grande, sans-serif", "fontfontSize": "22px"}, "renderTo": "container", "resetZoomButton": {"relativeTo": "chart", "position": {"y": -30, "x": 10}}}, "tooltip": {"formatter": function () { return'<b>'+ this.series.name + '</b>: ' + this.y; }}, "plotOptions": {}, "credits": {"enabled": false}, "colors": {}, "pane": {}, "exporting": {}, "drilldown": {}, "navigation": {}, "legend": {}};\n",
"\n",
"\n",
" var data = [{"data": [20, 19, 18, 17, 16, 15, 14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2], "type": "line", "name": "Series 1"}, {"dashStyle": "ShortDash", "name": "Series 2", "type": "line", "marker": {"states": {"hover": {"lineWidth": 2, "enabled": true, "fillColor": "white", "lineColor": "red"}}}, "data": [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19], "events": {"click": function (event) { alert(this.name + ' clicked\\n' + 'Alt: ' + event.altKey + '\\n' + 'Control: ' + event.ctrlKey + '\\n' + 'Shift: ' + event.shiftKey + '\\n');}}}];\n",
" option.series = data;\n",
"\n",
" \n",
"\n",
" var chart = new Highcharts.Chart(option);\n",
"\n",
"\n",
"\n",
"\n",
"\n",
" \n",
"\n",
"\n",
" \n",
" });\n",
" </script>\n",
"\n",
" </body>\n",
"</html> \"height= 520 width = 820></iframe>"
],
"text/plain": [
"<highcharts.highcharts.highcharts.Highchart at 0x7fe8b4bb3350>"
]
},
"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
}