Skip to content

Instantly share code, notes, and snippets.

@jacobbridges

jacobbridges/highcharts_example_with_jquery.ipynb

Last active January 5, 2018 06:53
Show Gist options
  • Save jacobbridges/52b88708f9757ef799083528ebcf433b to your computer and use it in GitHub Desktop.
Save jacobbridges/52b88708f9757ef799083528ebcf433b to your computer and use it in GitHub Desktop.
Download ZIP
Display the source blob
Display the rendered blob
Raw
highcharts_example_with_jquery.ipynb
{
"cells": [
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### Jupyter and JS\n",
"\n",
"Jupyter uses [requirejs](http://requirejs.org/) to manage its Javascript libraries, which means we can \"require\" Highcharts into the notebook.\n",
"\n",
"Since Highcharts does not expose itself according to the requirejs standard, I have made it into a shim. The exporting feature is a separate file in the Highcharts [source](http://code.highcharts.com/), so I loaded it as a separate shim. "
]
},
{
"cell_type": "code",
"execution_count": 1,
"metadata": {
"ExecuteTime": {
"end_time": "2017-01-30T16:20:09.241298",
"start_time": "2017-01-30T16:20:09.214886"
},
"collapsed": false
},
"outputs": [
{
"data": {
"application/javascript": [
"require.config({\n",
" paths: {\n",
" highcharts: \"https://code.highcharts.com/highcharts\",\n",
" highcharts_exports: \"https://code.highcharts.com/modules/exporting\",\n",
" jquery: \"https://code.jquery.com/jquery-3.1.1.min\",\n",
" },\n",
" shim: {\n",
" highcharts: {\n",
" exports: \"Highcharts\",\n",
" deps: [\"jquery\"]\n",
" },\n",
" highcharts_exports: {\n",
" exports: \"Highcharts\",\n",
" deps: [\"highcharts\"]\n",
" }\n",
" }\n",
"});"
],
"text/plain": [
"<IPython.core.display.Javascript object>"
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"%%javascript\n",
"require.config({\n",
" paths: {\n",
" highcharts: \"http://code.highcharts.com/highcharts\",\n",
" highcharts_exports: \"http://code.highcharts.com/modules/exporting\",\n",
" jquery: \"https://code.jquery.com/jquery-3.1.1.min\",\n",
" },\n",
" shim: {\n",
" highcharts: {\n",
" exports: \"Highcharts\",\n",
" deps: [\"jquery\"]\n",
" },\n",
" highcharts_exports: {\n",
" exports: \"Highcharts\",\n",
" deps: [\"highcharts\"]\n",
" }\n",
" }\n",
"});"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### Python to Javascript\n",
"\n",
"To translate the data from the Python realm into the Javascript realm felt a little \"hacky\", but it works. This takes the Python variable `chart_data` and binds it to Javascript's global `window` variable as `window.chartData`. If anyone has a prettier method please tweet me ([@codeweavr](http://twitter.com/codeweavr)) and I will edit this post with your recommendations."
]
},
{
"cell_type": "code",
"execution_count": 2,
"metadata": {
"ExecuteTime": {
"end_time": "2017-01-30T16:20:09.373445",
"start_time": "2017-01-30T16:20:09.243769"
},
"collapsed": false
},
"outputs": [
{
"data": {
"application/javascript": [
"window.chartData=[{\"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\": \"London\"}];"
],
"text/plain": [
"<IPython.core.display.Javascript object>"
]
},
"execution_count": 2,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"import json\n",
"from IPython.display import Javascript\n",
"\n",
"chart_data = [\n",
" {\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",
" {\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",
" {\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",
" {\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",
"Javascript(\"window.chartData={};\".format(json.dumps(chart_data)))"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"# The Graph\n",
"\n",
"To display the graph, I used the %%Javascript cell magic method and used the Highcharts demo code:"
]
},
{
"cell_type": "code",
"execution_count": 3,
"metadata": {
"ExecuteTime": {
"end_time": "2017-01-30T16:20:09.505978",
"start_time": "2017-01-30T16:20:09.374514"
},
"collapsed": false
},
"outputs": [
{
"data": {
"application/javascript": [
"// Since I append the div later, sometimes there are multiple divs.\n",
"$(\"#container\").remove();\n",
"\n",
"// Make the cdiv to contain the chart.\n",
"element.append('<div id=\"container\" style=\"height: 400px; margin: 0 auto\"></div>');\n",
"\n",
"// Require highcarts and make the chart.\n",
"require(['highcharts_exports'], function(Highcharts) {\n",
" $('#container').highcharts({\n",
" title: {\n",
" text: 'Monthly 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 (°C)'\n",
" },\n",
" plotLines: [{\n",
" value: 0,\n",
" width: 1,\n",
" color: '#808080'\n",
" }]\n",
" },\n",
" tooltip: {\n",
" valueSuffix: '°C'\n",
" },\n",
" legend: {\n",
" layout: 'vertical',\n",
" align: 'right',\n",
" verticalAlign: 'middle',\n",
" borderWidth: 0\n",
" },\n",
" // This is where I used the chart_data from Python\n",
" series: window.chartData\n",
" });\n",
"});"
],
"text/plain": [
"<IPython.core.display.Javascript object>"
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"%%javascript\n",
"// Since I append the div later, sometimes there are multiple divs.\n",
"$(\"#container\").remove();\n",
"\n",
"// Make the cdiv to contain the chart.\n",
"element.append('<div id=\"container\" style=\"min-width: 310px; height: 400px; margin: 0 auto\"></div>');\n",
"\n",
"// Require highcarts and make the chart.\n",
"require(['highcharts_exports'], function(Highcharts) {\n",
" $('#container').highcharts({\n",
" title: {\n",
" text: 'Monthly 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 (°C)'\n",
" },\n",
" plotLines: [{\n",
" value: 0,\n",
" width: 1,\n",
" color: '#808080'\n",
" }]\n",
" },\n",
" tooltip: {\n",
" valueSuffix: '°C'\n",
" },\n",
" legend: {\n",
" layout: 'vertical',\n",
" align: 'right',\n",
" verticalAlign: 'middle',\n",
" borderWidth: 0\n",
" },\n",
" // This is where I used the chart_data from Python\n",
" series: window.chartData\n",
" });\n",
"});"
]
}
],
"metadata": {
"kernelspec": {
"display_name": "Python 3",
"language": "python",
"name": "python3"
},
"language_info": {
"codemirror_mode": {
"name": "ipython",
"version": 3
},
"file_extension": ".py",
"mimetype": "text/x-python",
"name": "python",
"nbconvert_exporter": "python",
"pygments_lexer": "ipython3",
"version": "3.5.2"
}
},
"nbformat": 4,
"nbformat_minor": 1
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment