#!/usr/bin/env python
# coding: utf-8

# # Jupyter Notebook Highcharts
# 
# * [Your First Chart | Highcharts](https://www.highcharts.com/docs/getting-started/your-first-chart)

# In[1]:


get_ipython().run_cell_magic('html', '', '<script src="https://code.highcharts.com/highcharts.js"></script>\n')


# In[2]:


get_ipython().run_cell_magic('html', '', '<div id="container" style="width:100%; height:400px;"></div>\n')


# In[3]:


get_ipython().run_cell_magic('javascript', '', "/*\n.ipynb ファイルを開き直したときに次のエラーになる。\nJavascript error adding output!\nReferenceError: Highcharts is not defined\nSee your browser Javascript console for more details.\n*/\n/*\n$(function () {\n    var myChart = Highcharts.chart('container', {\n        chart: {\n            type: 'bar'\n        },\n        title: {\n            text: 'Fruit Consumption'\n        },\n        xAxis: {\n            categories: ['Apples', 'Bananas', 'Oranges']\n        },\n        yAxis: {\n            title: {\n                text: 'Fruit eaten'\n            }\n        },\n        series: [{\n            name: 'Jane',\n            data: [1, 0, 4]\n        }, {\n            name: 'John',\n            data: [5, 7, 3]\n        }]\n    });\n});\n*/\n")


# In[4]:


get_ipython().run_cell_magic('javascript', '', 'console.log($.fn.jquery);\n// 2.2.4\n')


# In[5]:


get_ipython().run_cell_magic('javascript', '', "const plot = () => {\n    if (document.readyState !== 'complete' ||\n        typeof Highcharts !== 'object' ||\n        typeof Highcharts.chart !== 'function') {\n        const timeoutID = setTimeout(plot, 1000);\n        return {};\n    }\n    var myChart = Highcharts.chart('container', {\n        chart: {\n            type: 'bar'\n        },\n        title: {\n            text: 'Fruit Consumption'\n        },\n        xAxis: {\n            categories: ['Apples', 'Bananas', 'Oranges']\n        },\n        yAxis: {\n            title: {\n                text: 'Fruit eaten'\n            }\n        },\n        series: [{\n            name: 'Jane',\n            data: [1, 0, 4]\n        }, {\n            name: 'John',\n            data: [5, 7, 3]\n        }]\n    });\n    return myChart;\n};\nplot();\n")