Created
August 8, 2019 13:06
-
-
Save mihailescu2m/cac68646ecb140492b98d0b5347fcf52 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
```javascript | |
%%javascript | |
require.config({ | |
packages: [{ | |
name: 'highcharts', | |
main: 'highcharts' | |
}], | |
paths: { | |
// Change this to your server if you do not wish to use our CDN. | |
'highcharts': 'https://code.highcharts.com' | |
} | |
}); | |
``` | |
<IPython.core.display.Javascript object> | |
```python | |
import json | |
from IPython.display import Javascript | |
chart_data = [ | |
{ | |
'name': 'Tokyo', | |
'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': 'New York', | |
'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': 'Berlin', | |
'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': 'London', | |
'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] | |
} | |
] | |
Javascript("window.chartData={};".format(json.dumps(chart_data))) | |
``` | |
<IPython.core.display.Javascript object> | |
```javascript | |
%%javascript | |
// Since I append the div later, sometimes there are multiple divs. | |
$("#container").remove(); | |
// Make the cdiv to contain the chart. | |
element.append('<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>'); | |
console.log("init"); | |
console.log(window.chartData); | |
// Require highcarts and make the chart. | |
require([ | |
'highcharts', | |
'highcharts/modules/exporting', | |
'highcharts/modules/accessibility' | |
], function (Highcharts) { | |
console.log("WORKING"); | |
$('#container').highcharts({ | |
title: { | |
text: 'Monthly Average Temperature', | |
x: -20 //center | |
}, | |
subtitle: { | |
text: 'Source: WorldClimate.com', | |
x: -20 | |
}, | |
xAxis: { | |
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', | |
'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] | |
}, | |
yAxis: { | |
title: { | |
text: 'Temperature (°C)' | |
}, | |
plotLines: [{ | |
value: 0, | |
width: 1, | |
color: '#808080' | |
}] | |
}, | |
tooltip: { | |
valueSuffix: '°C' | |
}, | |
legend: { | |
layout: 'vertical', | |
align: 'right', | |
verticalAlign: 'middle', | |
borderWidth: 0 | |
}, | |
// This is where I used the chart_data from Python | |
series: window.chartData | |
}); | |
}); | |
``` | |
<IPython.core.display.Javascript object> | |
```python | |
``` |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment