%%html
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<!--
highstock.js の読み込みが終わるより先に drag-panes.js, exporting.js の読み込みが動いてしまうようで、次のエラーがコンソールに出力されている。
ReferenceError: Highcharts is not defined
(.ipynb ファイルを開いた直後の場合)
drag-panes.js が読み込めないとローソクのペインと出来高のペインの表示領域のサイズをドラッグで変更する機能が使えない。
exporting.js が読み込めないとチャートの右上のメニューが表示されなくて、印刷やダウンロードの機能が使えない。
%%html で記述する `<script>` は jQuery によって動的に DOM に追加されるように見えるため、読み込みの順番は保証されないのかもしれない。
browserify や webpack で事前にバンドルしておいた方がよさそう。
-->
<script src="https://code.highcharts.com/stock/modules/drag-panes.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
<!--
テーマの実装で `import` とか使っているため %%html や %%javascript で実行することができない。
Highcharts オブジェクトと Highcharts.createElement 関数と Highcharts.setOptions 関数があればよさそうなので、セルに直接入力する。
<script src="https://www.highcharts.com/stock/demo/intraday-candlestick/parts/Globals.js"></script>
<script src="https://raw.githubusercontent.com/highcharts/highcharts/master/js/themes/dark-unica.js"></script>
-->
%%html
<div id="container" style="height: 400px; min-width: 310px"></div>
%%javascript
const plot = () => {
if (typeof Highcharts !== 'object' ||
typeof Highcharts.stockChart !== 'function') {
const timeoutID = setTimeout(plot, 1000);
return;
}
// [CORS](https://developer.mozilla.org/ja/docs/Web/HTTP/HTTP_access_control)
//$.getJSON('https://www.highcharts.com/samples/data/aapl-ohlcv.json', function (data) {
$.getJSON('https://gist.githubusercontent.com/va2577/5a9ec41b4875deb25894147c25dc859e/raw/2b3de82e00a73a874a4a4cfe1b12dcc713cd6b39/aapl-ohlcv.json', function (data) {
// split the data set into ohlc and volume
var ohlc = [],
volume = [],
dataLength = data.length,
// set the allowed units for data grouping
groupingUnits = [[
'week', // unit name
[1] // allowed multiples
], [
'month',
[1, 2, 3, 4, 6]
]],
i = 0;
for (i; i < dataLength; i += 1) {
ohlc.push([
data[i][0], // the date
data[i][1], // open
data[i][2], // high
data[i][3], // low
data[i][4] // close
]);
volume.push([
data[i][0], // the date
data[i][5] // the volume
]);
}
// create the chart
Highcharts.stockChart('container', {
rangeSelector: {
selected: 1
},
title: {
text: 'AAPL Historical'
},
yAxis: [{
labels: {
align: 'right',
x: -3
},
title: {
text: 'OHLC'
},
height: '60%',
lineWidth: 2,
resize: {
enabled: true
}
}, {
labels: {
align: 'right',
x: -3
},
title: {
text: 'Volume'
},
top: '65%',
height: '35%',
offset: 0,
lineWidth: 2
}],
tooltip: {
split: true
},
series: [{
type: 'candlestick',
name: 'AAPL',
data: ohlc,
dataGrouping: {
units: groupingUnits
}
}, {
type: 'column',
name: 'Volume',
data: volume,
yAxis: 1,
dataGrouping: {
units: groupingUnits
}
}]
});
});
};
plot();
%%javascript
const theme = () => {
if (typeof Highcharts !== 'object' ||
typeof Highcharts.createElement !== 'function' ||
typeof Highcharts.setOptions !== 'function') {
const timeoutID = setTimeout(theme, 1000);
return;
}
/**
* (c) 2010-2017 Torstein Honsi
*
* License: www.highcharts.com/license
*
* Dark theme for Highcharts JS
* @author Torstein Honsi
*/
'use strict';
/* global document */
// Load the fonts
/*
comment out
import Highcharts from '../parts/Globals.js';
*/
Highcharts.createElement('link', {
href: 'https://fonts.googleapis.com/css?family=Unica+One',
rel: 'stylesheet',
type: 'text/css'
}, null, document.getElementsByTagName('head')[0]);
Highcharts.theme = {
colors: ['#2b908f', '#90ee7e', '#f45b5b', '#7798BF', '#aaeeee', '#ff0066',
'#eeaaee', '#55BF3B', '#DF5353', '#7798BF', '#aaeeee'],
chart: {
backgroundColor: {
linearGradient: { x1: 0, y1: 0, x2: 1, y2: 1 },
stops: [
[0, '#2a2a2b'],
[1, '#3e3e40']
]
},
style: {
fontFamily: '\'Unica One\', sans-serif'
},
plotBorderColor: '#606063'
},
title: {
style: {
color: '#E0E0E3',
textTransform: 'uppercase',
fontSize: '20px'
}
},
subtitle: {
style: {
color: '#E0E0E3',
textTransform: 'uppercase'
}
},
xAxis: {
gridLineColor: '#707073',
labels: {
style: {
color: '#E0E0E3'
}
},
lineColor: '#707073',
minorGridLineColor: '#505053',
tickColor: '#707073',
title: {
style: {
color: '#A0A0A3'
}
}
},
yAxis: {
gridLineColor: '#707073',
labels: {
style: {
color: '#E0E0E3'
}
},
lineColor: '#707073',
minorGridLineColor: '#505053',
tickColor: '#707073',
tickWidth: 1,
title: {
style: {
color: '#A0A0A3'
}
}
},
tooltip: {
backgroundColor: 'rgba(0, 0, 0, 0.85)',
style: {
color: '#F0F0F0'
}
},
plotOptions: {
series: {
dataLabels: {
color: '#B0B0B3'
},
marker: {
lineColor: '#333'
}
},
boxplot: {
fillColor: '#505053'
},
candlestick: {
lineColor: 'white'
},
errorbar: {
color: 'white'
}
},
legend: {
itemStyle: {
color: '#E0E0E3'
},
itemHoverStyle: {
color: '#FFF'
},
itemHiddenStyle: {
color: '#606063'
}
},
credits: {
style: {
color: '#666'
}
},
labels: {
style: {
color: '#707073'
}
},
drilldown: {
activeAxisLabelStyle: {
color: '#F0F0F3'
},
activeDataLabelStyle: {
color: '#F0F0F3'
}
},
navigation: {
buttonOptions: {
symbolStroke: '#DDDDDD',
theme: {
fill: '#505053'
}
}
},
// scroll charts
rangeSelector: {
buttonTheme: {
fill: '#505053',
stroke: '#000000',
style: {
color: '#CCC'
},
states: {
hover: {
fill: '#707073',
stroke: '#000000',
style: {
color: 'white'
}
},
select: {
fill: '#000003',
stroke: '#000000',
style: {
color: 'white'
}
}
}
},
inputBoxBorderColor: '#505053',
inputStyle: {
backgroundColor: '#333',
color: 'silver'
},
labelStyle: {
color: 'silver'
}
},
navigator: {
handles: {
backgroundColor: '#666',
borderColor: '#AAA'
},
outlineColor: '#CCC',
maskFill: 'rgba(255,255,255,0.1)',
series: {
color: '#7798BF',
lineColor: '#A6C7ED'
},
xAxis: {
gridLineColor: '#505053'
}
},
scrollbar: {
barBackgroundColor: '#808083',
barBorderColor: '#808083',
buttonArrowColor: '#CCC',
buttonBackgroundColor: '#606063',
buttonBorderColor: '#606063',
rifleColor: '#FFF',
trackBackgroundColor: '#404043',
trackBorderColor: '#404043'
},
// special colors for some of the
legendBackgroundColor: 'rgba(0, 0, 0, 0.5)',
background2: '#505053',
dataLabelsColor: '#B0B0B3',
textColor: '#C0C0C0',
contrastTextColor: '#F0F0F3',
maskColor: 'rgba(255,255,255,0.3)'
};
// Apply the theme
Highcharts.setOptions(Highcharts.theme);
};
theme();
from IPython.display import HTML, display
display(HTML('<a href="http://ipython.readthedocs.io/en/stable/api/generated/IPython.display.html?highlight=display#IPython.display.HTML">class IPython.display.HTML</a>'))