Skip to content

Instantly share code, notes, and snippets.

@PhE

PhE/highcharts.ipynb

Created May 31, 2013 16:59
Show Gist options
  • Save PhE/5686342 to your computer and use it in GitHub Desktop.
Save PhE/5686342 to your computer and use it in GitHub Desktop.
Download ZIP
ipython notebbok highcharts integration
Display the source blob
Display the rendered blob
Raw
highcharts.ipynb
{
"metadata": {
"name": "highcharts"
},
"nbformat": 3,
"nbformat_minor": 0,
"worksheets": [
{
"cells": [
{
"cell_type": "code",
"collapsed": false,
"input": [
"from IPython.display import HTML"
],
"language": "python",
"metadata": {},
"outputs": [],
"prompt_number": 1
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"First brutal attemp with a single HTML() call :"
]
},
{
"cell_type": "code",
"collapsed": false,
"input": [
"HTML('''\n",
"<script src=\"http://code.highcharts.com/highcharts.js\"></script>\n",
"<script src=\"http://code.highcharts.com/modules/exporting.js\"></script>\n",
"\n",
"<div id=\"phe0001\" style=\"min-width: 400px; height: 400px; margin: 0 auto\">Coucou !</div>\n",
"<script>\n",
" do_chart = function() {\n",
"\n",
" $('#phe0001').highcharts({\n",
" chart: {\n",
" type: 'line',\n",
" marginRight: 130,\n",
" marginBottom: 25\n",
" },\n",
" title: {\n",
" text: 'XXX Average Temperature',\n",
" x: -20 //center\n",
" },\n",
" subtitle: {\n",
" text: 'Source: WorldClimate.com',\n",
" x: -20\n",
" },\n",
" xAxis: {\n",
" categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',\n",
" 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']\n",
" },\n",
" yAxis: {\n",
" title: {\n",
" text: 'Temperature (\u00b0C)'\n",
" },\n",
" plotLines: [{\n",
" value: 0,\n",
" width: 1,\n",
" color: '#808080'\n",
" }]\n",
" },\n",
" tooltip: {\n",
" valueSuffix: '\u00b0C'\n",
" },\n",
" legend: {\n",
" layout: 'vertical',\n",
" align: 'right',\n",
" verticalAlign: 'top',\n",
" x: -10,\n",
" y: 100,\n",
" borderWidth: 0\n",
" },\n",
" series: [{\n",
" name: 'Tokyo',\n",
" data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]\n",
" }, {\n",
" name: 'New York',\n",
" data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]\n",
" }, {\n",
" name: 'Berlin',\n",
" data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]\n",
" }, {\n",
" name: 'London',\n",
" data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]\n",
" }]\n",
" });\n",
"\n",
"\n",
" }\n",
" setTimeout(\"do_chart()\", 50)\n",
"</script>\n",
"''')"
],
"language": "python",
"metadata": {},
"outputs": [
{
"html": [
"\n",
"<script src=\"http://code.highcharts.com/highcharts.js\"></script>\n",
"<script src=\"http://code.highcharts.com/modules/exporting.js\"></script>\n",
"\n",
"<div id=\"phe0001\" style=\"min-width: 400px; height: 400px; margin: 0 auto\">Coucou !</div>\n",
"<script>\n",
" do_chart = function() {\n",
"\n",
" $('#phe0001').highcharts({\n",
" chart: {\n",
" type: 'line',\n",
" marginRight: 130,\n",
" marginBottom: 25\n",
" },\n",
" title: {\n",
" text: 'XXX Average Temperature',\n",
" x: -20 //center\n",
" },\n",
" subtitle: {\n",
" text: 'Source: WorldClimate.com',\n",
" x: -20\n",
" },\n",
" xAxis: {\n",
" categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',\n",
" 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']\n",
" },\n",
" yAxis: {\n",
" title: {\n",
" text: 'Temperature (\u00b0C)'\n",
" },\n",
" plotLines: [{\n",
" value: 0,\n",
" width: 1,\n",
" color: '#808080'\n",
" }]\n",
" },\n",
" tooltip: {\n",
" valueSuffix: '\u00b0C'\n",
" },\n",
" legend: {\n",
" layout: 'vertical',\n",
" align: 'right',\n",
" verticalAlign: 'top',\n",
" x: -10,\n",
" y: 100,\n",
" borderWidth: 0\n",
" },\n",
" series: [{\n",
" name: 'Tokyo',\n",
" data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]\n",
" }, {\n",
" name: 'New York',\n",
" data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]\n",
" }, {\n",
" name: 'Berlin',\n",
" data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]\n",
" }, {\n",
" name: 'London',\n",
" data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]\n",
" }]\n",
" });\n",
"\n",
"\n",
" }\n",
" setTimeout(\"do_chart()\", 50)\n",
"</script>\n"
],
"output_type": "pyout",
"prompt_number": 2,
"text": [
"<IPython.core.display.HTML at 0x28bce90>"
]
}
],
"prompt_number": 2
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Second attempt with a higher function Highcharts() :"
]
},
{
"cell_type": "code",
"collapsed": false,
"input": [
"import random\n",
"import string\n",
"import json\n",
"\n",
"def Highcharts(chart_def = None, chart_def_json = None, height=400):\n",
" assert chart_def or chart_def_json\n",
" unique_id = ''.join(random.choice(string.ascii_uppercase + string.digits) for x in range(15))\n",
" if chart_def_json is None:\n",
" chart_def_json = json.dumps(chart_def)\n",
" html = '''\n",
"<script src=\"http://code.highcharts.com/highcharts.js\"></script>\n",
"<script src=\"http://code.highcharts.com/modules/exporting.js\"></script>\n",
"\n",
"<div id=\"chart_%(unique_id)s\" style=\"min-width: 400px; height: %(height)ipx; margin: 0 auto\">Re-run cell if chart is not shown ...</div>\n",
"<script>\n",
" do_chart_%(unique_id)s = function() {\n",
" $('#chart_%(unique_id)s').highcharts(%(chart_def_json)s);\n",
" }\n",
" setTimeout(\"do_chart_%(unique_id)s()\", 50)\n",
"</script>\n",
"''' % locals()\n",
" return HTML(html)"
],
"language": "python",
"metadata": {},
"outputs": [],
"prompt_number": 3
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Then you only have to call the Highcharts() function with the graph definition as a Python dictionnary :"
]
},
{
"cell_type": "code",
"collapsed": false,
"input": [
"Highcharts({\n",
" 'chart': {\n",
" 'type': 'line',\n",
" 'marginRight': 130,\n",
" 'marginBottom': 25\n",
" },\n",
" 'title': {\n",
" 'text': 'XXX Average Temperature',\n",
" 'x': -20 #center\n",
" },\n",
" 'subtitle': {\n",
" 'text': 'Source: WorldClimate.com',\n",
" 'x': -20\n",
" },\n",
" 'xAxis': {\n",
" 'categories': ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',\n",
" 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']\n",
" },\n",
" 'yAxis': {\n",
" 'title': {\n",
" 'text': 'Temperature (\u00b0C)'\n",
" },\n",
" 'plotLines': [{\n",
" 'value': 0,\n",
" 'width': 1,\n",
" 'color': '#808080'\n",
" }]\n",
" },\n",
" 'tooltip': {\n",
" 'valueSuffix': '\u00b0C'\n",
" },\n",
" 'legend': {\n",
" 'layout': 'vertical',\n",
" 'align': 'right',\n",
" 'verticalAlign': 'top',\n",
" 'x': -10,\n",
" 'y': 100,\n",
" 'borderWidth': 0\n",
" },\n",
" 'series': [{\n",
" 'name': 'Tokyo',\n",
" 'data': [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]\n",
" }, {\n",
" 'name': 'New York',\n",
" 'data': [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]\n",
" }, {\n",
" 'name': 'Berlin',\n",
" 'data': [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]\n",
" }, {\n",
" 'name': 'Paris',\n",
" 'data': [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]\n",
" }]\n",
"})"
],
"language": "python",
"metadata": {},
"outputs": [
{
"html": [
"\n",
"<script src=\"http://code.highcharts.com/highcharts.js\"></script>\n",
"<script src=\"http://code.highcharts.com/modules/exporting.js\"></script>\n",
"\n",
"<div id=\"chart_OO5UJG6VIYRT0LW\" style=\"min-width: 400px; height: 400px; margin: 0 auto\">Re-run cell if chart is not shown ...</div>\n",
"<script>\n",
" do_chart_OO5UJG6VIYRT0LW = function() {\n",
" $('#chart_OO5UJG6VIYRT0LW').highcharts({\"subtitle\": {\"text\": \"Source: WorldClimate.com\", \"x\": -20}, \"xAxis\": {\"categories\": [\"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\", \"Jul\", \"Aug\", \"Sep\", \"Oct\", \"Nov\", \"Dec\"]}, \"title\": {\"text\": \"XXX Average Temperature\", \"x\": -20}, \"series\": [{\"data\": [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6], \"name\": \"Tokyo\"}, {\"data\": [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5], \"name\": \"New York\"}, {\"data\": [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0], \"name\": \"Berlin\"}, {\"data\": [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8], \"name\": \"Paris\"}], \"yAxis\": {\"plotLines\": [{\"color\": \"#808080\", \"width\": 1, \"value\": 0}], \"title\": {\"text\": \"Temperature (\\u00b0C)\"}}, \"chart\": {\"marginBottom\": 25, \"type\": \"line\", \"marginRight\": 130}, \"tooltip\": {\"valueSuffix\": \"\\u00b0C\"}, \"legend\": {\"verticalAlign\": \"top\", \"align\": \"right\", \"borderWidth\": 0, \"x\": -10, \"y\": 100, \"layout\": \"vertical\"}});\n",
" }\n",
" setTimeout(\"do_chart_OO5UJG6VIYRT0LW()\", 50)\n",
"</script>\n"
],
"output_type": "pyout",
"prompt_number": 4,
"text": [
"<IPython.core.display.HTML at 0x28d1ad0>"
]
}
],
"prompt_number": 4
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"You can also use a JSON string representation of the chart definition (including Javascript callbacks) :"
]
},
{
"cell_type": "code",
"collapsed": false,
"input": [
"Highcharts(chart_def_json = '''\n",
"{\n",
" chart: {\n",
" type: 'area'\n",
" },\n",
" title: {\n",
" text: 'US and USSR nuclear stockpiles'\n",
" },\n",
" subtitle: {\n",
" text: 'Source: <a href=\"http://thebulletin.metapress.com/content/c4120650912x74k7/fulltext.pdf\">'+\n",
" 'thebulletin.metapress.com</a>'\n",
" },\n",
" xAxis: {\n",
" labels: {\n",
" formatter: function() {\n",
" return this.value; // clean, unformatted number for year\n",
" }\n",
" }\n",
" },\n",
" yAxis: {\n",
" title: {\n",
" text: 'Nuclear weapon states'\n",
" },\n",
" labels: {\n",
" formatter: function() {\n",
" return this.value / 1000 +'k';\n",
" }\n",
" }\n",
" },\n",
" tooltip: {\n",
" pointFormat: '{series.name} produced <b>{point.y:,.0f}</b><br/>warheads in {point.x}'\n",
" },\n",
" plotOptions: {\n",
" area: {\n",
" pointStart: 1940,\n",
" marker: {\n",
" enabled: false,\n",
" symbol: 'circle',\n",
" radius: 2,\n",
" states: {\n",
" hover: {\n",
" enabled: true\n",
" }\n",
" }\n",
" }\n",
" }\n",
" },\n",
" series: [{\n",
" name: 'USA',\n",
" data: [null, null, null, null, null, 6 , 11, 32, 110, 235, 369, 640,\n",
" 1005, 1436, 2063, 3057, 4618, 6444, 9822, 15468, 20434, 24126,\n",
" 27387, 29459, 31056, 31982, 32040, 31233, 29224, 27342, 26662,\n",
" 26956, 27912, 28999, 28965, 27826, 25579, 25722, 24826, 24605,\n",
" 24304, 23464, 23708, 24099, 24357, 24237, 24401, 24344, 23586,\n",
" 22380, 21004, 17287, 14747, 13076, 12555, 12144, 11009, 10950,\n",
" 10871, 10824, 10577, 10527, 10475, 10421, 10358, 10295, 10104 ]\n",
" }, {\n",
" name: 'USSR/Russia',\n",
" data: [null, null, null, null, null, null, null , null , null ,null,\n",
" 5, 25, 50, 120, 150, 200, 426, 660, 869, 1060, 1605, 2471, 3322,\n",
" 4238, 5221, 6129, 7089, 8339, 9399, 10538, 11643, 13092, 14478,\n",
" 15915, 17385, 19055, 21205, 23044, 25393, 27935, 30062, 32049,\n",
" 33952, 35804, 37431, 39197, 45000, 43000, 41000, 39000, 37000,\n",
" 35000, 33000, 31000, 29000, 27000, 25000, 24000, 23000, 22000,\n",
" 21000, 20000, 19000, 18000, 18000, 17000, 16000]\n",
" }]\n",
" }\n",
"''')"
],
"language": "python",
"metadata": {},
"outputs": [
{
"html": [
"\n",
"<script src=\"http://code.highcharts.com/highcharts.js\"></script>\n",
"<script src=\"http://code.highcharts.com/modules/exporting.js\"></script>\n",
"\n",
"<div id=\"chart_AAC8KBPPGIHY5KV\" style=\"min-width: 400px; height: 400px; margin: 0 auto\">Re-run cell if chart is not shown ...</div>\n",
"<script>\n",
" do_chart_AAC8KBPPGIHY5KV = function() {\n",
" $('#chart_AAC8KBPPGIHY5KV').highcharts(\n",
"{\n",
" chart: {\n",
" type: 'area'\n",
" },\n",
" title: {\n",
" text: 'US and USSR nuclear stockpiles'\n",
" },\n",
" subtitle: {\n",
" text: 'Source: <a href=\"http://thebulletin.metapress.com/content/c4120650912x74k7/fulltext.pdf\">'+\n",
" 'thebulletin.metapress.com</a>'\n",
" },\n",
" xAxis: {\n",
" labels: {\n",
" formatter: function() {\n",
" return this.value; // clean, unformatted number for year\n",
" }\n",
" }\n",
" },\n",
" yAxis: {\n",
" title: {\n",
" text: 'Nuclear weapon states'\n",
" },\n",
" labels: {\n",
" formatter: function() {\n",
" return this.value / 1000 +'k';\n",
" }\n",
" }\n",
" },\n",
" tooltip: {\n",
" pointFormat: '{series.name} produced <b>{point.y:,.0f}</b><br/>warheads in {point.x}'\n",
" },\n",
" plotOptions: {\n",
" area: {\n",
" pointStart: 1940,\n",
" marker: {\n",
" enabled: false,\n",
" symbol: 'circle',\n",
" radius: 2,\n",
" states: {\n",
" hover: {\n",
" enabled: true\n",
" }\n",
" }\n",
" }\n",
" }\n",
" },\n",
" series: [{\n",
" name: 'USA',\n",
" data: [null, null, null, null, null, 6 , 11, 32, 110, 235, 369, 640,\n",
" 1005, 1436, 2063, 3057, 4618, 6444, 9822, 15468, 20434, 24126,\n",
" 27387, 29459, 31056, 31982, 32040, 31233, 29224, 27342, 26662,\n",
" 26956, 27912, 28999, 28965, 27826, 25579, 25722, 24826, 24605,\n",
" 24304, 23464, 23708, 24099, 24357, 24237, 24401, 24344, 23586,\n",
" 22380, 21004, 17287, 14747, 13076, 12555, 12144, 11009, 10950,\n",
" 10871, 10824, 10577, 10527, 10475, 10421, 10358, 10295, 10104 ]\n",
" }, {\n",
" name: 'USSR/Russia',\n",
" data: [null, null, null, null, null, null, null , null , null ,null,\n",
" 5, 25, 50, 120, 150, 200, 426, 660, 869, 1060, 1605, 2471, 3322,\n",
" 4238, 5221, 6129, 7089, 8339, 9399, 10538, 11643, 13092, 14478,\n",
" 15915, 17385, 19055, 21205, 23044, 25393, 27935, 30062, 32049,\n",
" 33952, 35804, 37431, 39197, 45000, 43000, 41000, 39000, 37000,\n",
" 35000, 33000, 31000, 29000, 27000, 25000, 24000, 23000, 22000,\n",
" 21000, 20000, 19000, 18000, 18000, 17000, 16000]\n",
" }]\n",
" }\n",
");\n",
" }\n",
" setTimeout(\"do_chart_AAC8KBPPGIHY5KV()\", 50)\n",
"</script>\n"
],
"output_type": "pyout",
"prompt_number": 5,
"text": [
"<IPython.core.display.HTML at 0x28cbb10>"
]
}
],
"prompt_number": 5
},
{
"cell_type": "code",
"collapsed": false,
"input": [],
"language": "python",
"metadata": {},
"outputs": [],
"prompt_number": 155
}
],
"metadata": {}
}
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment