2b:null 2c:["$","title",null,{"children":"Import external library | Chomtana | Observable"}] 31:T562,highchart_test = { await Highcharts_theme; Highcharts.chart('container', { title: { text: 'Solar Employment Growth by Sector, 2010-2016' }, subtitle: { text: 'Source: thesolarfoundation.com' }, yAxis: { title: { text: 'Number of Employees' } }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'middle' }, plotOptions: { series: { label: { connectorAllowed: false }, pointStart: 2010 } }, series: [{ name: 'Installation', data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175] }, { name: 'Manufacturing', data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434] }, { name: 'Sales & Distribution', data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387] }, { name: 'Project Development', data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227] }, { name: 'Other', data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111] }], responsive: { rules: [{ condition: { maxWidth: 500 }, chartOptions: { legend: { layout: 'horizontal', align: 'center', verticalAlign: 'bottom' } } }] } }); }32:[] 2f:{"id":"7f2392b54118328f","slug":"import-external-library","title":"Import external library","thumbnail":"23d3be2c1e5cf4d3fc73554b985bb382c7cd2a3c693eae8e94abfa35ee061191","access_level":"public","create_time":"$D2018-07-31T01:56:24.681Z","update_time":"$D2018-07-31T04:01:47.381Z","view_time":null,"first_public_time":"$D2018-07-31T02:39:36.107Z","fork":false,"stars":18,"starred":false,"owner":{"type":"team","id":"487a8cff7d2ca204","login":"chomtana","name":"Chomtana","avatar_url":"https://avatars-next.observableusercontent.com/5913d1ba65021d4c3a75e073ece42dde2fde8c99b68fd0a057996de255771539","tier":"starter_2024"},"version":201,"publish_version":201,"role":null,"authored":false,"authors":[{"type":"individual","id":"b2fa6f6acef97003","login":"chomtana","name":"Chomtana","avatar_url":"https://avatars-next.observableusercontent.com/5913d1ba65021d4c3a75e073ece42dde2fde8c99b68fd0a057996de255771539","tier":null}],"members":[{"type":"individual","id":"b2fa6f6acef97003","login":"chomtana","name":"Chomtana","avatar_url":"https://avatars-next.observableusercontent.com/5913d1ba65021d4c3a75e073ece42dde2fde8c99b68fd0a057996de255771539","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":13,"collection":null,"type":"notebook","body":{"title":"Import external library","cells":[{"id":0,"value":"md`# Import external library`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"md`\n(As of 2018-7-31)\n\nSometime you will notice that you cannot load some library with require(\"...\") in anyway.\n\nFor example\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":17,"value":"Highcharts_npm = require(\"highcharts\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":23,"value":"Highcharts_official = require(\"https://code.highcharts.com/highcharts.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":28,"value":"Highcharts_unpkg = require(\"https://unpkg.com/highcharts@6.1.1/highcharts.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":30,"value":"Highcharts_cdnjs = require(\"https://cdnjs.cloudflare.com/ajax/libs/highcharts/6.1.1/highcharts.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":32,"value":"md`## Code that used to fix it`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"$$ = require(\"https://code.jquery.com/jquery-3.3.1.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"head = $(\"head\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":36,"value":"md`### Function: importjs`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":34,"value":"importjs = function(src,targetvar) {\n /*if (!$(\"head\").find(`script[src=\"${src}\"]`)) {\n $(\"head\").append(``);\n }*/\n return new Promise(function(resolve,reject) {\n function waitForFoo(){\n if (typeof targetvar == \"undefined\") resolve();\n if (eval(targetvar)) resolve(eval(targetvar));\n setTimeout(waitForFoo, 30);\n };\n\n require(src).then(function(){\n waitForFoo();\n }).catch(function() {\n waitForFoo();\n });\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":83,"value":"md`### Function: importcss`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":85,"value":"importcss = function(src) {\n $(\"head\").append(``)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":40,"value":"md`## How to use this`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":89,"value":"md`To use this you need to\n*import {importjs,importcss} from \"@chomtana/import-external-library\"*\nand then use following functions.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":66,"value":"md`### importjs`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":68,"value":"md`\n**Import and get result variable**\n\n[varname] = importjs(\"script src\",\"window.[varname]\")\n\n**Import only**\n\nimportjs(\"script src\")\n\n**Sequential sync import**\n\nRead code below\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":187,"value":"Highcharts = importjs(\"https://unpkg.com/highcharts@6.1.1/highcharts.js\",\"window.Highcharts\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":43,"value":"Highcharts_theme = {\n await Highcharts;\n await importjs(\"https://unpkg.com/highcharts@6.1.1/themes/dark-unica.js\");\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":101,"value":"md`### importcss`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":120,"value":"md`importcss(\"css src\")\n\nFor example\n\n**importcss(\"https://unpkg.com/highcharts@6.1.1/css/highcharts.css\")**\n\nBut here I use js as theme\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":106,"value":"md`## Test whether it is working or not`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":117,"value":"md`Example from https://www.highcharts.com/demo/line-basic`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":111,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":113,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":115,"value":"md`**Yeah it is working**`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":167,"value":"Highcharts.theme","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"