28:null 29:["$","title",null,{"children":"Import external library via CDN | Alan David Garcia | Observable"}] 2e:T16fd,am4core.ready(function() { // Themes begin am4core.useTheme(am4themes_animated); // Themes end var insterfaceColors = new am4core.InterfaceColorSet(); var lineColor = insterfaceColors.getFor("background"); var chart = am4core.create("chartdiv", am4plugins_timeline.CurveChart); chart.curveContainer.padding(20,20,20,20); chart.data = [ { name: "Chandler", file: "//joeschmoe.io/api/v1/chandler", track: 1, value: 450 }, { name: "Ross", file: "//joeschmoe.io/api/v1/ross", track: 2, value: 650 }, { name: "Joey", file: "//joeschmoe.io/api/v1/joey", track: 3, value: 578 }, { name: "Monica", file: "//joeschmoe.io/api/v1/monica", track: 4, value: 730 }, { name: "Phoebe", file: "//joeschmoe.io/api/v1/phoebe", track: 5, value: 490 }, { name: "Rachel", file: "//joeschmoe.io/api/v1/rachel", track: 6, value: 532 } ]; var categoryAxis = chart.yAxes.push(new am4charts.CategoryAxis()); categoryAxis.dataFields.category = "name"; categoryAxis.renderer.minGridDistance = 10; categoryAxis.renderer.innerRadius = 5; categoryAxis.renderer.radius = 145; categoryAxis.renderer.line.stroke = lineColor; categoryAxis.renderer.line.strokeWidth = 5; categoryAxis.renderer.line.strokeOpacity = 1; var labelTemplate = categoryAxis.renderer.labels.template; labelTemplate.fill = lineColor; labelTemplate.fontWeight = 600; labelTemplate.fontSize = 11; var gridTemplate = categoryAxis.renderer.grid.template; gridTemplate.strokeWidth = 1; gridTemplate.strokeOpacity = 1; gridTemplate.stroke = lineColor; gridTemplate.location = 0; gridTemplate.above = true; var fillTemplate = categoryAxis.renderer.axisFills.template; fillTemplate.disabled = false; fillTemplate.fill = am4core.color("#b84f49"); fillTemplate.fillOpacity = 1; categoryAxis.fillRule = function(dataItem) { dataItem.axisFill.__disabled = false; dataItem.axisFill.opacity = 1; } var valueAxis = chart.xAxes.push(new am4charts.ValueAxis()); valueAxis.min = 0; valueAxis.max = 1000; valueAxis.renderer.points = [{ x: 0, y: -100 }, { x: 200, y: -100 }, { x: 200, y: 100 }, { x: 0, y: 100 }, { x: -200, y: 100 }, { x: -200, y: -100 }, { x: 0, y: -100 }]; valueAxis.renderer.polyspline.tensionX = 0.4; valueAxis.renderer.line.strokeOpacity = 0.1; valueAxis.renderer.line.strokeWidth = 10; valueAxis.renderer.maxLabelPosition = 0.98; valueAxis.renderer.minLabelPosition = 0.02; // Flag bullet var flagRange = valueAxis.axisRanges.create(); flagRange.value = 0; var flagBullet = new am4plugins_bullets.FlagBullet(); flagBullet.label.text = "START"; flagRange.bullet = flagBullet; flagBullet.dy = -145; flagBullet.adapter.add("dy", function (dy, target) { return -categoryAxis.renderer.radius; }) var valueLabelTemplate = valueAxis.renderer.labels.template; valueLabelTemplate.fill = lineColor; valueLabelTemplate.fontSize = 8; valueLabelTemplate.fontWeight = 600; valueLabelTemplate.fillOpacity = 1; valueLabelTemplate.horizontalCenter = "right"; valueLabelTemplate.verticalCenter = "bottom"; valueLabelTemplate.padding(0, 10, 0, 0); valueLabelTemplate.adapter.add("rotation", function (rotation, target) { var value = target.dataItem.value; var position = valueAxis.valueToPosition(value); var angle = valueAxis.renderer.positionToAngle(position); return angle; }) var valueGridTemplate = valueAxis.renderer.grid.template; valueGridTemplate.strokeOpacity = 0.3; valueGridTemplate.stroke = lineColor; // SERIES var series = chart.series.push(new am4plugins_timeline.CurveColumnSeries()); series.dataFields.categoryY = "name"; series.stroke = lineColor; series.fill = lineColor; series.dataFields.valueX = "value"; series.defaultState.transitionDuration = 4000; var columnTemplate = series.columns.template; columnTemplate.fill = lineColor; columnTemplate.strokeOpacity = 0; columnTemplate.fillOpacity = 0.3; columnTemplate.height = am4core.percent(100); var hoverState = columnTemplate.states.create("hover"); hoverState.properties.fillOpacity = 0.9; var bullet = series.bullets.push(new am4charts.CircleBullet()) bullet.fill = lineColor; // LEGEND chart.legend = new am4charts.Legend(); chart.legend.data = chart.data; chart.legend.parent = chart.curveContainer; chart.legend.width = 360; chart.legend.horizontalCenter = "middle"; chart.legend.verticalCenter = "middle"; var markerTemplate = chart.legend.markers.template; markerTemplate.width = 30; markerTemplate.height = 30; chart.legend.itemContainers.template.events.on("over", function (event) { series.dataItems.each(function (dataItem) { if (dataItem.dataContext == event.target.dataItem.dataContext) { dataItem.column.isHover = true; } else { dataItem.column.isHover = false; } }) }) chart.legend.itemContainers.template.events.on("hit", function (event) { series.dataItems.each(function (dataItem) { if (dataItem.dataContext == event.target.dataItem.dataContext) { if (dataItem.visible) { dataItem.hide(1000, 0, 0, ["valueX"]); } else { dataItem.show(1000, 0, ["valueX"]); } } }) }) var rect = markerTemplate.children.getIndex(0); rect.cornerRadius(20, 20, 20, 20); var as = markerTemplate.states.create("active"); as.properties.opacity = 0.5; var image = markerTemplate.createChild(am4core.Image) image.propertyFields.href = "file"; image.width = 30; image.height = 30; image.filters.push(new am4core.DesaturateFilter()); image.events.on("inited", function (event) { var image = event.target; var parent = image.parent; image.mask = parent.children.getIndex(0); }) }); 2f:[] 2c:{"id":"7f248cdc48c01db4","slug":"import-external-library","title":"Import external library via CDN","thumbnail":"5569f56d8a083678a6d86d6722af8e8ff9a474c21bbf977236293d2af315ace1","access_level":"public","create_time":"$D2019-10-14T04:06:41.971Z","update_time":"$D2019-10-14T17:50:34.691Z","view_time":null,"first_public_time":"$D2019-10-14T04:54:44.066Z","has_unpublished_edits":null,"fork":{"id":"7f2392b54118328f","slug":"import-external-library","title":"Import external library","owner":{"id":"487a8cff7d2ca204","login":"chomtana","name":"Chomtana"}},"stars":4,"starred":false,"owner":{"type":"team","id":"b303a442e7f4d979","login":"adg29","name":"Alan David Garcia","avatar_url":"https://avatars-next.observableusercontent.com/9986f4c71f0fd48221998c143420e87cc995869c7496ffcff6c4e1fc392f3614","tier":"starter_2024"},"version":333,"publish_version":333,"role":null,"authored":false,"authors":[{"type":"individual","id":"4f917008c4233b6e","login":"adg29","name":"Alan David Garcia","avatar_url":"https://avatars-next.observableusercontent.com/9986f4c71f0fd48221998c143420e87cc995869c7496ffcff6c4e1fc392f3614","tier":null}],"members":[{"type":"individual","id":"4f917008c4233b6e","login":"adg29","name":"Alan David Garcia","avatar_url":"https://avatars-next.observableusercontent.com/9986f4c71f0fd48221998c143420e87cc995869c7496ffcff6c4e1fc392f3614","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":{"id":"85f1e015fee8db90","slug":"techniques-for-using-dependencies-require-import-cdn-etc","title":"Techniques for using dependencies - require, import, CDN, etc. ","owner":{"id":"b303a442e7f4d979","login":"adg29","name":"Alan David Garcia"}},"type":"notebook","body":{"title":"Import external library via CDN","cells":[{"id":0,"value":"md`# Import external library via CDN \n## Sequential sync import of \\`@amcharts/amcharts4\\` plugins\n(As of 2019-10-14)\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","output":"$undefined","database":"$undefined"},{"id":17,"value":"//am4_npm = require(\"@amcharts/amcharts4\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"//am4_official = require(\"https://amcharts.com/lib/4/core.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"//am4_unpkg = require(\"https://unpkg.com/@amcharts/amcharts4@4.6.9/core.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"//am4_cdnjs = require(\"https://cdnjs.cloudflare.com/ajax/libs/@amcharts/amcharts4@4.6.9/core.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"md`## Code used to implement a solution`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"$$ = require(\"https://code.jquery.com/jquery-3.3.1.js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"head = $(\"head\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"md`### Function: importjs`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$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","output":"$undefined","database":"$undefined"},{"id":40,"value":"md`## How to use this`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"md`To use this you need to\n*import {importjs} from \"@chomtana/import-external-library\"*\nand then use following functions.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"md`### importjs`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$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","output":"$undefined","database":"$undefined"},{"id":187,"value":"am4core = importjs(\"https://amcharts.com/lib/4/core.js\",\"window.am4core\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":301,"value":"am4charts = {\n await am4core\n return await importjs(\"https://amcharts.com/lib/4/charts.js\", 'window.am4charts')\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":298,"value":"am4plugins_timeline = {\n await am4core\n return await importjs(\"https://amcharts.com/lib/4/plugins/timeline.js\", 'window.am4plugins_timeline')\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":296,"value":"am4plugins_bullets = {\n await am4core\n return await importjs(\"https://amcharts.com/lib/4/plugins/bullets.js\", 'window.am4plugins_bullets')\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"am4themes_animated = {\n await am4core\n return await importjs(\"https://amcharts.com/lib/4/themes/animated.js\", 'window.am4themes_animated')\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"md`## Test whether it is working or not\nExample from https://www.amcharts.com/demos/stadium-track-chart/`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"$2e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2d:"$2c:body"