Anonymous Pens can't be embedded.
Edit on CodePen
{"__browser":{"device":"unknown_device","mobile":false,"name":"unknown browser","platform":"unknown_platform","version":"0"},"__constants":{},"__CPDATA":{"domain_iframe":"https://cdpn.io","environment":"production","host":"codepen.io","iframe_allow":"accelerometer; ambient-light-sensor; camera; display-capture; encrypted-media; geolocation; gyroscope; microphone; midi; payment; vr","iframe_sandbox":"allow-forms allow-modals allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation-by-user-activation allow-downloads allow-presentation"},"__graphql":{"data":{"data":null,"errors":[{"message":"Cannot return null for non-nullable field Query.sessionUser"}]},"url":"https://codepen.io/graphql","api":"cprails","cpedata":{"action":"show_preview","controller":"embed"}},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__pay_braintree_env":"production","__boomboom":{"serve_url":"https://cdpn.io/cpe/boomboom","store_url":"https://codepen.io/cpe/boomboom/store"},"__pageType":"embed","__item":"{\"editor_settings\":{\"auto_run\":true,\"auto_save\":true,\"format_on_save\":false,\"indent_with\":\"spaces\",\"tab_size\":2,\"id\":\"VoDkNZ\",\"autocomplete\":false,\"code_folding\":true,\"css_pre_processor\":\"none\",\"css_prefix\":\"neither\",\"css_starter\":\"neither\",\"emmet_active\":true,\"font_size\":14,\"font_type\":\"system\",\"html_pre_processor\":\"none\",\"js_pre_processor\":\"none\",\"key_bindings\":\"normal\",\"line_numbers\":true,\"line_wrapping\":true,\"match_brackets\":true,\"snippets\":{\"markupSnippets\":{},\"stylesheetSnippets\":{}},\"theme\":\"twilight\"},\"hashid\":\"JOwPQZ\",\"itemType\":\"pen\",\"resources\":[],\"tags\":[],\"id\":19910142,\"user_id\":1,\"html\":\"<!DOCTYPE html>\\n\\n<html>\\n\\t\\n\\t<head>\\n\\t\\t<meta charset=\\\"utf-8\\\"/>\\n\\t\\t<link href=\\\"https://fonts.googleapis.com/css?family=Raleway\\\" rel=\\\"stylesheet\\\">\\n\\t\\t<script src=\\\"https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js\\\"></script>\\n\\t\\t<script src=\\\"https://code.jquery.com/jquery-3.2.1.min.js\\\"></script>\\n\\t\\t<link rel=\\\"stylesheet\\\" href=\\\"/css/layout.css\\\">\\n\\t\\t<script src=\\\"/js/graph.js\\\"></script>\\n\\t</head>\\n\\n\\t<body>\\n \\t\\t<nav>\\t\\n\\t\\t\\t<ul id=\\\"navigation\\\">\\n\\t\\t\\t\\t<li><a href=\\\"#Willkommen\\\">Willkommen</a></li>\\n\\t\\t\\t\\t<li><a href=\\\"#Chart\\\">Chart</a></li>\\n\\t\\t\\t\\t<li><a href=\\\"#Nutzungshinweis\\\">Nutzungshinweis</a></li>\\n\\t\\t\\t</ul>\\n\\t\\t</nav>\\n\\t\\t<main>\\n\\t \\t\\t<section id=\\\"Willkommen\\\">\\n\\t \\t\\t\\t<h1>Willkommen<h1>\\n\\t \\t\\t\\t<p>Auf dieser Seite können Sie die Ergebnisse einer Klausur grafisch darstellen.</p>\\n\\t \\t\\t</section>\\n\\t \\t\\t<section id=\\\"Chart\\\">\\n\\t \\t\\t\\t<div id=\\\"chartEingabe\\\">\\n\\t\\t \\t\\t\\t<h3>Eingabe</h3>\\n\\t\\t \\t\\t\\t<p>Labels</p>\\n\\t\\t \\t\\t\\t<textarea id =\\\"labelInput\\\"rows=\\\"4\\\" cols=\\\"50\\\" onkeyup=\\\"zeichneGraph()\\\">1,2,3,4,5,6</textarea>\\n\\n\\t\\t \\t\\t\\t<p>Noten</p>\\n\\t\\t \\t\\t\\t<textarea id =\\\"notenInput\\\"rows=\\\"4\\\" cols=\\\"50\\\" onkeyup=\\\"zeichneGraph()\\\">0,2,3,5,8,5</textarea>\\n\\n\\t\\t \\t\\t\\t<p id = \\\"status\\\"></p>\\n\\t \\t\\t\\t</div>\\n\\t \\t\\t\\t\\n\\t\\t \\t\\t<!-- https://stackoverflow.com/questions/19847582/chart-js-canvas-resize -->\\n\\t \\t\\t\\t<div id=\\\"chartDarstellung\\\">\\n\\t \\t\\t\\t\\t<h1>Darstellung des Graphen</h1>\\n\\t\\t\\t\\t\\t<canvas id=\\\"myChart\\\"></canvas>\\n\\t\\t\\t\\t</div>\\n\\t\\t\\t\\t<script>\\n\\t\\t\\t\\tvar ctx = document.getElementById(\\\"myChart\\\").getContext('2d');\\n\\n\\t\\t\\t\\tvar chartData = {\\n\\t\\t\\t\\t\\t\\t labels: [\\\"6\\\", \\\"5\\\", \\\"4\\\", \\\"3\\\", \\\"2\\\", \\\"1\\\"],\\n\\t\\t\\t\\t\\t\\t datasets: [{\\n\\t\\t\\t\\t\\t\\t label: 'Notenverteilung',\\n\\t\\t\\t\\t\\t\\t data: [0,2,3,5,8,5],\\n\\t\\t\\t\\t\\t\\t backgroundColor: \\n\\t\\t\\t\\t\\t\\t 'rgba(255, 18, 34, 0.3)',\\n\\t\\t\\t\\t\\t\\t borderColor: \\n\\t\\t\\t\\t\\t\\t 'rgba(255,18,34,0.1)',\\n\\t\\t\\t\\t\\t\\t borderWidth: 1\\n\\t\\t\\t\\t\\t\\t }]\\n\\t\\t\\t\\t\\t\\t };\\n\\n\\t\\t\\t\\tvar myChart = new Chart(ctx, {\\n\\t\\t\\t\\t type: 'bar',\\n\\t\\t\\t\\t data: chartData,\\n\\t\\t\\t\\t});\\n\\t\\t\\t\\t</script>\\n\\t\\t\\t\\t\\n\\t\\n\\t\\t\\t\\t<div id=\\\"unterChart\\\">\\n\\t\\t\\t\\t\\t<p id=\\\"durchschnitt\\\">Durchschnittsnote: 4.48</p>\\n\\t\\t\\t\\t\\t<label>\\n\\t\\t\\t <input type=\\\"checkbox\\\" onchange='klickAufBarchart(this);' checked/>\\n\\t\\t\\t Barchart\\n\\t\\t\\t </label>\\n\\t\\t\\t </div>\\n\\t\\t\\t\\t\\n\\t\\t\\t</section>\\n\\t \\t\\t\\n\\t \\t\\t<section id=\\\"Nutzungshinweis\\\">\\n\\t \\t\\t\\t<h1>Nutzungshinweis</h1>\\n\\t \\t\\t\\t<p>Der Code wird nur lokal auf dem Client ausgeführt. Es werden keinerlei Daten übertragen oder gespeichert.</p>\\n\\t \\t\\t</section>\\n\\t \\t</main>\\n\\t</body>\\n\\t\\n\\n</html>\",\"css\":\"\\n/*https://stackoverflow.com/questions/1875852/how-can-i-define-colors-as-variables-in-css*/\\n\\n:root {\\n --hintergrund-grau-blau:#A9E5BB;\\n --hintergrund-eingabe:#FCF6B1;\\n --dunkel-gruen:#4D9961;\\n --rot:#F72C25;\\n --orange:#F7B32B;\\n --lila:#2D1E2F;\\n --gelb:#FFDE58;\\n --gruen:#34CC27;\\n\\n}\\n\\ntextarea {\\n background-color : var(--hintergrund-eingabe); \\n}\\n\\nmain {\\n\\tcolor: #2D1E2F;\\n\\t/*https://fonts.google.com/?selection.family=Raleway*/\\n\\tfont-family: 'Raleway', sans-serif;position: relative;\\n\\toverflow: hidden;\\n\\theight: 100vh;\\n\\tbackground: var(--hintergrund-grau-blau);\\n}\\n \\nsection {\\n\\tpadding:3em 1em 1em;\\n\\twidth:90vw;\\n\\theight:100vh;\\n\\n}\\n\\n#chartEingabe{\\n\\ttext-decoration-color: var(--lila);\\n\\tposition:relative;\\n\\tfloat:left;\\n\\twidth:100vw;\\n\\theight:30vh;\\n}\\n#chartDarstellung{\\n\\tposition:relative;\\n\\tfloat:left;\\n\\theight:45vh;\\n\\twidth:90vw;\\n}\\n#unterChart{\\n\\tposition:relative;\\n\\tfloat:left;\\n}\\n\\n\\n#navigation {\\n\\tposition: absolute;\\n\\tleft: 0;\\n\\tz-index: 99;\\t\\n\\tmargin: 0;\\n\\tpadding: 1em;\\n\\twidth: 100%;\\n\\theight: 5vh;\\n\\tlist-style: none;\\n}\\n#navigation li {\\n\\tfloat: left;\\n\\theight: 2em;\\n\\ttext-align: center;\\n\\tmargin: 0;\\n\\tborder: solid 1px var(--gelb);\\n\\tborder-radius:.5em;\\n\\tline-height: 150%;\\n\\tfont-family: Arial bold, Helvetica, sans-serif;\\n\\tmargin: 0 0 0 1em;\\n}\\n\\n#navigation li a, #navigation li a:link, #navigation li a:visited {\\n\\ttext-decoration: none;\\n\\tdisplay: block;\\n\\theight: 2em;\\n\\tcolor: var(--gelb);\\n\\tfont-weight:bold;\\n\\tpadding: 0.1em 1em;\\t\\n}\\n\\n#navigation li a:hover, #navigation li a:focus, #navigation li a:active {\\n\\tbackground: var(--gelb);\\n\\tcolor: var(--hintergrund-grau-blau);\\n\\tborder-radius: .5em;\\n}\",\"js\":\"\\nfunction zeichneGraph(){\\n\\t\\n\\n\\t\\tvar noten = $('#notenInput').val().split(',');\\n\\t\\tvar labels = $('#labelInput').val().split(',');\\n\\t\\tmyChart.data.datasets[0].data = noten;\\n\\t\\tmyChart.data.labels = labels;\\n\\n\\t\\tmyChart.update();\\n\\n\\t\\t//durchschnitt-Berechnung\\n\\t\\tif(noten.length==labels.length){\\n\\t\\t\\t//Fehlermeldung zuruecksetzen\\n\\t\\t\\t$('#status').text('');\\n\\n\\t\\t\\tvar notenSum=0;\\n\\t\\t\\tvar notenAnzahl=0;\\n\\t\\t\\tvar breakup = false;\\n\\t\\t\\tfor(var i=0; i< noten.length;i++){\\n\\t\\t\\t\\t//https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/parseFloat\\n\\t\\t\\t\\t//zu Zahlen konvertieren\\n\\t\\t\\t\\tvar label= parseFloat(labels[i]);\\n\\t\\t\\t\\tvar note = parseFloat(noten[i]);\\n\\t\\t\\t\\t//https://www.w3schools.com/jsref/jsref_isnan.asp\\n\\t\\t\\t\\t//Falls keine Zahl => Berechnung abbrechen und Fehlermeldung anzeigen\\n\\t\\t\\t\\tif(isNaN(label) || isNaN(note)){\\n\\n\\t\\t\\t\\t\\tbreakup = true;\\n\\t\\t\\t\\t\\tbreak;\\n\\t\\t\\t\\t}else{\\n\\t\\t\\t\\t\\tnotenAnzahl = notenAnzahl + note;\\n\\t\\t\\t\\t\\tnotenSum = notenSum + (note*label);\\n\\t\\t\\t\\t}\\n\\t\\t\\t}\\n\\t\\t\\tif(breakup){\\n\\t\\t\\t\\t$('#status').text('Bitte nur komma-getrennte Zahlen eingeben (z.B. 1,3,2).');\\n\\t\\t\\t\\t\\t$('#durchschnitt').text('');\\n\\t\\t\\t}\\n\\t\\t\\telse{\\n\\t\\t\\t\\tvar durchschnitt = notenSum/notenAnzahl;\\n\\t\\t\\t\\t//https://stackoverflow.com/questions/9453421/how-to-round-float-numbers-in-javascript\\n\\t\\t\\t\\t$('#durchschnitt').text('Durchschnittsnote: '+ Math.round(durchschnitt * 100) / 100);\\n\\t\\t\\t}\\n\\t\\t}else{\\n\\t\\t\\t$('#status').text('Bitte gleich viele Werte bei Label und Noten eingegeben.');\\n\\t\\t}\\n}\\n\\nfunction klickAufBarchart(cb) {\\n\\t\\n\\t\\n\\tif(cb.checked){\\n\\t\\taendereGraph('bar');\\n\\t}\\n\\n\\telse{\\n\\t\\taendereGraph('line');\\n\\t}\\n\\t\\n \\n}\\n\\nfunction aendereGraph(art){\\n\\tmyChart.destroy();\\n\\n\\tmyChart = new Chart(ctx, {\\n\\t type: art,\\n\\t data: chartData,\\n\\t options: {\\n\\t\\t scales: {\\n\\t yAxes: [{\\n\\t ticks: {\\n\\t beginAtZero:true\\n\\t }\\n\\t }]\\n\\t },\\n\\t elements: {\\n\\t line: {\\n\\t tension: 0.1, // disables bezier curves\\n\\t }\\n\\t }\\n\\t }\\n\\t});\\n\\n\\tzeichneGraph();\\n}\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"none\",\"js_pre_processor\":\"none\",\"html_classes\":\"\",\"css_starter\":\"neither\",\"js_library\":null,\"created_at\":\"2017-11-30T17:16:40.000Z\",\"updated_at\":\"2017-11-30T17:16:40.000Z\",\"title\":\"\",\"description\":\"\",\"slug_hash\":\"JOwPQZ\",\"head\":\"\",\"private\":false,\"has_animation\":false,\"team_id\":0,\"css_prefix\":\"neither\",\"template\":false,\"parent_id\":null,\"comments_count\":0,\"custom_screenshot_filename\":null,\"loves_count\":0,\"pick\":false,\"popularity_score\":0,\"views_count\":0,\"pick_visible_at\":\"2022-11-08T22:42:57.485Z\",\"cpid\":null,\"pen_hash\":null}","__jwt":"eyJhbGciOiJIUzI1NiJ9.eyJjbGFpbXMiOnsidXNlcl9pZCI6MX0sImV4cCI6MTY3OTg0MjY0Mn0.gOE69Qsf3kyE5U0oZeIYfpEa38gfx6a6uZOQFaIQ-9A","__processorsMap":{"autoprefixer":"autoprefixer-10","babel":"babel-7","coffeescript":"coffeescript-2","format-1":"format-1","flutter":"flutter-1","haml":"haml-4","less":"less-3","lint-1":"lint-1","livescript":"livescript-1","markdown":"markdown-11","postcss":"postcss-7","pug":"pug-2","sass":"sass-1","scss":"sass-1","sass-ruby-3":"sass-ruby-3","sass-ruby-compass-3":"sass-ruby-compass-3","slim":"slim-3","stylus":"stylus-0","typescript":"typescript-4","vue":"vue-2","vue3":"vue-3"},"__favicon_mask_icon":"https://cpwebassets.codepen.io/assets/favicon/logo-pin-b4b4269c16397ad2f0f7a01bcdf513a1994f4c94b8af2f191c09eb0d601762b1.svg","__favicon_shortcut_icon":"https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico","__path_to_iframe_console_runner":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeConsoleRunner-6bce046e7128ddf9391ccf7acbecbf7ce0cbd7b6defbeb2e217a867f51485d25.js","__path_to_iframe_refresh_css":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRefreshCSS-44fe83e49b63affec96918c9af88c0d80b209a862cf87ac46bc933074b8c557d.js","__path_to_iframe_runtime_errors":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRuntimeErrors-4f205f2c14e769b448bcf477de2938c681660d5038bc464e3700256713ebe261.js","__path_to_processor_worker":"https://cpwebassets.codepen.io/assets/packs/router.js","__path_to_stop_execution_on_timeout":"https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js","__pen_normalize_css_url":"https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css","__pen_prefix_free_url":"https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js","__pen_reset_css_url":"https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"}