{"id":1,"date":"2024-11-20T11:15:58","date_gmt":"2024-11-20T10:15:58","guid":{"rendered":"https:\/\/arenagruppen.se\/kodtest\/?p=1"},"modified":"2024-11-20T11:30:55","modified_gmt":"2024-11-20T10:30:55","slug":"hej-varlden","status":"publish","type":"post","link":"https:\/\/arenagruppen.se\/kodtest\/2024\/11\/20\/hej-varlden\/","title":{"rendered":""},"content":{"rendered":"\n <h1>SVG Stapeldiagram<\/h1>\n  <svg id=\"barChart\" width=\"500\" height=\"300\" style=\"border: 1px solid black;\"><\/svg>\n\n  <script>\n    \/\/ Exempeldata\n    const data = [10, 25, 15, 40, 30];\n\n    \/\/ SVG-elementets referens\n    const svg = document.getElementById('barChart');\n\n    \/\/ Inst\u00e4llningar\n    const barWidth = 40;\n    const barGap = 10;\n    const chartHeight = 300;\n\n    \/\/ Rita staplar och l\u00e4gg till hover-effekt\n    data.forEach((value, index) => {\n      const barHeight = value * 5; \/\/ Skala f\u00f6r b\u00e4ttre visning\n      const x = index * (barWidth + barGap);\n      const y = chartHeight - barHeight;\n\n      \/\/ Skapa en rektangel (stapel)\n      const rect = document.createElementNS('http:\/\/www.w3.org\/2000\/svg', 'rect');\n      rect.setAttribute('x', x);\n      rect.setAttribute('y', y);\n      rect.setAttribute('width', barWidth);\n      rect.setAttribute('height', barHeight);\n      rect.setAttribute('fill', 'blue');\n\n      \/\/ L\u00e4gg till hover-effekt\n      rect.addEventListener('mouseover', () => {\n        rect.setAttribute('fill', 'orange');\n      });\n\n      rect.addEventListener('mouseout', () => {\n        rect.setAttribute('fill', 'blue');\n      });\n\n      \/\/ L\u00e4gg till stapeln i SVG\n      svg.appendChild(rect);\n    });\n  <\/script>\n","protected":false},"excerpt":{"rendered":"<p>SVG Stapeldiagram<\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-1","post","type-post","status-publish","format-standard","hentry","category-okategoriserade"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.12 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>-<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/arenagruppen.se\/kodtest\/2024\/11\/20\/hej-varlden\/\" \/>\n<meta property=\"og:locale\" content=\"sv_SE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"-\" \/>\n<meta property=\"og:description\" content=\"SVG Stapeldiagram\" \/>\n<meta property=\"og:url\" content=\"https:\/\/arenagruppen.se\/kodtest\/2024\/11\/20\/hej-varlden\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-20T10:15:58+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-11-20T10:30:55+00:00\" \/>\n<meta name=\"author\" content=\"Simon\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Skriven av\" \/>\n\t<meta name=\"twitter:data1\" content=\"Simon\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/arenagruppen.se\/kodtest\/2024\/11\/20\/hej-varlden\/\",\"url\":\"https:\/\/arenagruppen.se\/kodtest\/2024\/11\/20\/hej-varlden\/\",\"name\":\"-\",\"isPartOf\":{\"@id\":\"https:\/\/arenagruppen.se\/kodtest\/#website\"},\"datePublished\":\"2024-11-20T10:15:58+00:00\",\"dateModified\":\"2024-11-20T10:30:55+00:00\",\"author\":{\"@id\":\"https:\/\/arenagruppen.se\/kodtest\/#\/schema\/person\/b3564e0ba5faeb72e507f97d4500dcf0\"},\"inLanguage\":\"sv-SE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/arenagruppen.se\/kodtest\/2024\/11\/20\/hej-varlden\/\"]}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/arenagruppen.se\/kodtest\/#website\",\"url\":\"https:\/\/arenagruppen.se\/kodtest\/\",\"name\":\"\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/arenagruppen.se\/kodtest\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"sv-SE\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/arenagruppen.se\/kodtest\/#\/schema\/person\/b3564e0ba5faeb72e507f97d4500dcf0\",\"name\":\"Simon\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"sv-SE\",\"@id\":\"https:\/\/arenagruppen.se\/kodtest\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/eb3a72c680cf8490f245f5300f1c71cafcef5e9f938414bcbcc5f00cac717ba1?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/eb3a72c680cf8490f245f5300f1c71cafcef5e9f938414bcbcc5f00cac717ba1?s=96&d=mm&r=g\",\"caption\":\"Simon\"},\"url\":\"https:\/\/arenagruppen.se\/kodtest\/author\/neo2023\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"-","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/arenagruppen.se\/kodtest\/2024\/11\/20\/hej-varlden\/","og_locale":"sv_SE","og_type":"article","og_title":"-","og_description":"SVG Stapeldiagram","og_url":"https:\/\/arenagruppen.se\/kodtest\/2024\/11\/20\/hej-varlden\/","article_published_time":"2024-11-20T10:15:58+00:00","article_modified_time":"2024-11-20T10:30:55+00:00","author":"Simon","twitter_card":"summary_large_image","twitter_misc":{"Skriven av":"Simon"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/arenagruppen.se\/kodtest\/2024\/11\/20\/hej-varlden\/","url":"https:\/\/arenagruppen.se\/kodtest\/2024\/11\/20\/hej-varlden\/","name":"-","isPartOf":{"@id":"https:\/\/arenagruppen.se\/kodtest\/#website"},"datePublished":"2024-11-20T10:15:58+00:00","dateModified":"2024-11-20T10:30:55+00:00","author":{"@id":"https:\/\/arenagruppen.se\/kodtest\/#\/schema\/person\/b3564e0ba5faeb72e507f97d4500dcf0"},"inLanguage":"sv-SE","potentialAction":[{"@type":"ReadAction","target":["https:\/\/arenagruppen.se\/kodtest\/2024\/11\/20\/hej-varlden\/"]}]},{"@type":"WebSite","@id":"https:\/\/arenagruppen.se\/kodtest\/#website","url":"https:\/\/arenagruppen.se\/kodtest\/","name":"","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/arenagruppen.se\/kodtest\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"sv-SE"},{"@type":"Person","@id":"https:\/\/arenagruppen.se\/kodtest\/#\/schema\/person\/b3564e0ba5faeb72e507f97d4500dcf0","name":"Simon","image":{"@type":"ImageObject","inLanguage":"sv-SE","@id":"https:\/\/arenagruppen.se\/kodtest\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/eb3a72c680cf8490f245f5300f1c71cafcef5e9f938414bcbcc5f00cac717ba1?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/eb3a72c680cf8490f245f5300f1c71cafcef5e9f938414bcbcc5f00cac717ba1?s=96&d=mm&r=g","caption":"Simon"},"url":"https:\/\/arenagruppen.se\/kodtest\/author\/neo2023\/"}]}},"_links":{"self":[{"href":"https:\/\/arenagruppen.se\/kodtest\/wp-json\/wp\/v2\/posts\/1","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/arenagruppen.se\/kodtest\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/arenagruppen.se\/kodtest\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/arenagruppen.se\/kodtest\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/arenagruppen.se\/kodtest\/wp-json\/wp\/v2\/comments?post=1"}],"version-history":[{"count":3,"href":"https:\/\/arenagruppen.se\/kodtest\/wp-json\/wp\/v2\/posts\/1\/revisions"}],"predecessor-version":[{"id":13,"href":"https:\/\/arenagruppen.se\/kodtest\/wp-json\/wp\/v2\/posts\/1\/revisions\/13"}],"wp:attachment":[{"href":"https:\/\/arenagruppen.se\/kodtest\/wp-json\/wp\/v2\/media?parent=1"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/arenagruppen.se\/kodtest\/wp-json\/wp\/v2\/categories?post=1"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/arenagruppen.se\/kodtest\/wp-json\/wp\/v2\/tags?post=1"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}